在AWS Amplify构建时遇console-browserify导入错误求解决方案

问题重现 #

构建时触发如下错误：

2022-07-15T12:18:10.405Z [INFO]: Failed to compile.
2022-07-15T12:18:10.411Z [INFO]: Module not found: Error: You attempted to import /codebuild/output/src341411582/src/react-sol/node_modules/console-browserify/index.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
                                 You can either move it inside src/, or add a symlink to it from project's node_modules/.

问题根源是Web3相关依赖（如moralis、solana/web3.js）内部使用了相对路径导入console-browserify，触发了Create React App默认的src目录导入限制。

解决方案 #

1. 修正webpack配置（推荐） #

由于项目使用react-app-rewired，修改webpack.config.js为如下内容，添加别名并放宽导入限制：

const webpack = require('webpack');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = function override(config, env) {
  // 为console-browserify添加别名，确保正确解析
  config.resolve.alias = {
    ...config.resolve.alias,
    'console-browserify': require.resolve('console-browserify')
  };

  // 调整模块规则，允许导入node_modules中的console-browserify
  config.module.rules.forEach(rule => {
    if (rule.oneOf) {
      rule.oneOf.forEach(oneOfRule => {
        if (oneOfRule.include) {
          oneOfRule.include = [oneOfRule.include, /node_modules\/console-browserify/];
        }
      });
    }
  });

  // 注入必要的polyfill插件
  config.plugins.push(
    new webpack.ProvidePlugin({
      process: "process/browser.js",
    }),
    new NodePolyfillPlugin()
  );

  // 保留原有的node配置
  config.node = {
    ...config.node,
    fs: "empty",
  };

  return config;
};

2. 升级/清理依赖 #

• 升级Web3相关依赖到最新稳定版：

  npm update @solana/web3.js moralis
  

• 移除不必要的依赖（浏览器环境不需要的fs-webpack-plugin、fs）：

  npm uninstall fs-webpack-plugin fs
  

3. 强制指定console-browserify版本 #

在package.json中添加resolutions字段，强制使用兼容版本：

{
  // ... 其他原有配置
  "resolutions": {
    "console-browserify": "^1.2.0"
  }
}

执行npm install重新安装依赖。

验证步骤 #

1. 本地执行npm run build确认错误消失
2. 推送代码到AWS Amplify重新触发构建

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