在Craco中添加Polyfill：配置resolve.fallback解决path缺失问题

你已经正确安装了path-browserify，只需要在Craco的webpack配置中添加resolve.fallback规则即可。修改你的craco.config.js，在webpack.configure回调里扩展webpack的resolve配置：

修改后的完整craco.config.js #

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const DefinePlugin = require('webpack').DefinePlugin;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const commitHash = require('child_process').execSync('git rev-parse --short HEAD').toString().trim();

module.exports = {
  babel: {
    plugins: ['@vanilla-extract/babel-plugin'],
  },
  webpack: {
    plugins: [
      new VanillaExtractPlugin(),
      new DefinePlugin({
        'process.env.REACT_APP_GIT_COMMIT_HASH': JSON.stringify(commitHash.toString()),
      }),
    ],
    configure: (webpackConfig) => {
      // 添加path的polyfill回退配置
      webpackConfig.resolve = {
        ...webpackConfig.resolve,
        fallback: {
          ...(webpackConfig.resolve.fallback || {}),
          "path": require.resolve("path-browserify")
        }
      };

      const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
        (plugin) => plugin instanceof MiniCssExtractPlugin
      );
      if (instanceOfMiniCssExtractPlugin) {
        instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;
      }

      return webpackConfig;
    },
  },
};

关键说明 #

• 用扩展运算符...保留原有的resolve和fallback配置，避免覆盖Create React App默认的webpack设置。
• require.resolve("path-browserify")会直接指向你已安装的包路径，确保webpack能正确找到polyfill。
• 如果之后需要添加其他Node.js模块的polyfill，只需在fallback对象中继续添加对应的键值对即可。

若不想使用Polyfill的替代方案 #

如果之后改变主意不需要polyfill，可将fallback中的配置改为：

"path": false

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