React+Chakra UI集成Storybook时fs模块报错求助

我使用React 17.0.2、Chakra UI和Storybook 6.5.15开发组件库，未使用create-react-app。开发过程中遇到Node核心模块（如fs）无法解析的错误，尝试在Storybook的main.js中配置Webpack 5的fallback：

webpackFinal: (config) => {
   config.resolve.fallback.fs = false;
   config.resolve.fallback.module = false;
   config.resolve.fallback.os = false;
    
    return config;
  },

但展示组件Story时出现如下错误：

TypeError: fs[fsStatType] is not a function
    at isTypeSync (http://localhost:6006/vendors-node_modules_chakra-ui_layout_dist_chakra-ui-layout_esm_js-node_modules_chakra-ui_spi-d8af64.iframe.bundle.js:116363:24)
    at getDirectorySync (http://localhost:6006/vendors-node_modules_chakra-ui_layout_dist_chakra-ui-layout_esm_js-node_modules_chakra-ui_spi-d8af64.iframe.bundle.js:82082:61)
    at ExplorerSync.searchSync (http://localhost:6006/vendors-node_modules_chakra-ui_layout_dist_chakra-ui-layout_esm_js-node_modules_chakra-ui_spi-d8af64.iframe.bundle.js:81910:63)

我的package.json开发依赖如下：

"devDependencies": {
"@babel/cli": "^7.20.7",
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@chakra-ui/react": "^1.7.1",
"@chakra-ui/storybook-addon": "^4.0.16",
"@emotion/react": "^11.1.5",
"@emotion/styled": "^11.1.5",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-commonjs": "^24.0.0",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-typescript": "^10.0.1",
"@storybook/addon-actions": "^6.5.15",
"@storybook/addon-essentials": "^6.5.15",
"@storybook/addon-interactions": "^6.5.15",
"@storybook/addon-links": "^6.5.15",
"@storybook/builder-webpack5": "^6.5.15",
"@storybook/manager-webpack5": "^6.5.15",
"@storybook/react": "^6.5.15",
"@storybook/testing-library": "0.0.13",
"@types/react": "^18.0.26",
"babel-loader": "^8.3.0",
"base64-arraybuffer": "^1.0.2",
"cross-fetch": "^3.1.5",
"crypto": "^1.0.1",
"framer-motion": "^6.5.0",
"jest-fetch-mock": "^3.0.3",
"js-cookie": "^3.0.1",
"jwt-decode": "^3.1.2",
"nanoid": "^4.0.0",
"njwt": "^1.2.0",
"node-polyfill-webpack-plugin": "^2.0.1",
"npm-run-all": "^4.1.5",
"randomstring": "^1.2.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rollup": "^3.9.1",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-dts": "^5.1.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"tslib": "^2.4.1",
"typescript": "^4.9.4",
"webpack": "^5.75.0"}

我曾尝试添加NodePolyfillPlugin到Webpack配置，但仍出现fs相关错误，推测该插件无fs的fallback；尝试添加别名指向Node模块，却找不到可用的fs npm包（似乎已废弃）。请问有解决该问题的方案吗？

方案1：提供fs的Mock实现 #

不要直接将fs设为false，而是提供一个包含代码所需方法的Mock对象，避免调用不存在的方法报错。

方法A：使用现成的Mock包 #

先安装mock-fs依赖：

npm i mock-fs --save-dev

修改Storybook的main.js配置：

webpackFinal: (config) => {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    fs: require.resolve('mock-fs'),
    module: false,
    os: require.resolve('os-browserify/browser') // 补充os的浏览器兼容实现
  };
  return config;
},

方法B：自定义极简Mock #

在项目根目录创建fs-mock.js：

module.exports = {
  statSync: () => ({ isDirectory: () => false }),
  // 根据后续错误提示，补充其他被调用的fs方法
};

修改Storybook的main.js：

const path = require('path');

webpackFinal: (config) => {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    fs: path.resolve(__dirname, './fs-mock.js'),
    module: false,
    os: require.resolve('os-browserify/browser')
  };
  return config;
},

方案2：修复Chakra UI依赖问题 #

从错误栈来看，问题源于@chakra-ui/layout和@chakra-ui/spi在浏览器环境中调用了Node的fs模块，这属于依赖包的环境适配问题。

• 尝试升级Chakra UI到v2.x版本，旧版本可能存在浏览器环境下误引入Node模块的bug，升级后同步更新@chakra-ui/storybook-addon到对应版本。
• 检查组件代码，确认是否错误引入了仅适用于Node环境的Chakra功能。

方案3：用Webpack IgnorePlugin忽略不必要的模块 #

如果确认fs是被第三方包误引入且实际不需要，可通过IgnorePlugin跳过相关模块的打包：

const webpack = require('webpack');

module.exports = {
  // ...其他Storybook配置
  webpackFinal: (config) => {
    config.plugins.push(
      new webpack.IgnorePlugin({
        resourceRegExp: /^fs$/,
      })
    );
    config.resolve.fallback.module = false;
    config.resolve.fallback.os = require.resolve('os-browserify/browser');
    return config;
  },
};

注意：此方法仅适用于确认fs未被实际使用的场景，否则会导致正常功能报错。

方案4：调整Rollup组件库打包配置 #

作为组件库开发，Rollup的配置也会影响产物的兼容性。确保@rollup/plugin-node-resolve配置正确：

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  // ...其他Rollup配置
  plugins: [
    nodeResolve({
      browser: true, // 优先使用包的浏览器适配版本
      preferBuiltins: false, // 不优先使用Node内置模块
    }),
    // ...其他插件
  ],
};

内容的提问来源于stack exchange，提问作者Jonas