Storybook 无法解析 fs

Question

我正在使用 RemixJS 设置故事书。尝试导入组件时出现以下错误

ERROR in ./node_modules/@remix-run/node/errors.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/@remix-run/node'
ERROR in ./node_modules/@remix-run/node/node_modules/source-map/lib/read-wasm.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/@remix-run/node/node_modules/source-map/lib'
ERROR in ./node_modules/@remix-run/node/sessions/fileStorage.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/@remix-run/node/sessions'
ERROR in ./node_modules/busboy/lib/main.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/busboy/lib'
ERROR in ./node_modules/@remix-run/node/errors.js
Module not found: Error: Can't resolve 'fs/promises' in '/Users/ht/Desktop/a/node_modules/@remix-run/node'
ERROR in ./node_modules/@remix-run/node/upload/fileUploadHandler.js 124:15
Module parse failed: Unexpected token (124:15)
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| class NodeOnDiskFile {
>   lastModified = 0;
|   webkitRelativePath = "";
| 
ERROR in ./node_modules/@remix-run/node/formData.js 53:73
Module parse failed: Unexpected token (53:73)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   get(name) {
|     let arr = this._fields[name];
>     return (arr === null || arr === void 0 ? void 0 : arr.slice(-1)[0]) ?? null;
|   }
|

我得到了将其添加到网络包的建议

{
  resolve: {
    fallback: {
      fs: false
    }
  }
}

我怎么能用故事书来做呢？我使用故事书版本 6.4.19

我将其添加到 .storybook/main.js 但没有成功

 webpackFinal: async (config, { configType }) => {
      config.node = {
        ...config.node,
        fs: 'empty'
      };
      return config;
    },

谢谢

Answer 1

根据您用于构建 Storybook 的 webpack 版本，您需要添加 fs、stream 和 Remix 包使用的其他 Node 核心模块。

根据经验，您可以使用 resolve.fallback here.

上的 Webpack 文档中的列表

如果您将 Stroybook 与 Webpack 4 一起使用，配置应该如下所示：

module.exports = {
// Storybook config
webpackFinal: async (config, { configType }) => {
    config.node = {
      ...config.node,
      fs: "empty",
      assert: "empty",
      buffer: "empty",
      console: "empty",
      constants: "empty",
      crypto: "empty",
      domain: "empty",
      events: "empty",
      http: "empty",
      https: "empty",
      os: "empty",
      path: "empty",
      punycode: "empty",
      process: "empty",
      querystring: "empty",
      stream: "empty",
      string_decoder: "empty",
      sys: "empty",
      timers: "empty",
      tty: "empty",
      url: "empty",
      util: "empty",
      vm: "empty",
      zlib: "empty",
    };
    return config;
  },
};

或者使用 Webpack 5

module.exports = {
// Storybook config
webpackFinal: async (config, { configType }) => {
    config.resolve.fallback = {
      fs: false,
      assert: false,
      buffer: false,
      console: false,
      constants: false,
      crypto: false,
      domain: false,
      events: false,
      http: false,
      https: false,
      os: false,
      path: false,
      punycode: false,
      process: false,
      querystring: false,
      stream: false,
      string_decoder: false,
      sys: false,
      timers: false,
      tty: false,
      url: false,
      util: false,
      vm: false,
      zlib: false,
    };
    return config;
  },
};

Answer 2

升级故事书以使用 webpack 5 https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324

更新.storybook/main.js

module.exports = {
    stories: ["../.slicemachine/assets/**/*.stories.@(js|jsx|ts|tsx)"],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/addon-interactions",
    ],
    framework: "@storybook/react",
    core: {
        builder: "webpack5",
    },
    webpackFinal: async (config, { configType }) => {
        config.resolve = {
            ...config.resolve,
            fallback: {
                ...(config.resolve || {}).fallback,
                fs: false,
                stream: false,
                os: false,
            },
        }

        // Return the altered config
        return config
    },
}

Storybook 无法解析 fs

Storybook couldn't resolve fs

reactjs

storybook