使用@metaplex-foundation/js-next SDK遇'ACCOUNT_SIZE'导入错误求助

问题原因 #

react-scripts 4.0.3的webpack配置对ES模块（.mjs后缀文件）的处理存在局限，会将部分Metaplex依赖中的ES模块误识别为CommonJS模块，导致无法读取命名导出ACCOUNT_SIZE。

解决方案 #

方案1：升级react-scripts到5.x版本 #

这是最直接的解决方式，5.x版本对ES模块的支持更完善：

npm uninstall react-scripts
npm install react-scripts@latest
# 或者用yarn
yarn remove react-scripts
yarn add react-scripts@latest

升级完成后重启开发服务器即可。

方案2：使用react-app-rewired修改webpack配置（不升级react-scripts） #

如果无法升级react-scripts，可以通过自定义webpack配置来修复：

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev
# 或者yarn
yarn add react-app-rewired customize-cra --dev

2. 在项目根目录创建config-overrides.js文件，添加以下内容：

const { override, addWebpackModuleRule } = require('customize-cra');

module.exports = override(
  addWebpackModuleRule({
    test: /\.mjs$/,
    include: /node_modules/,
    type: 'javascript/auto'
  })
);

3. 修改package.json中的启动脚本，替换react-scripts为react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. 重启开发服务器，错误即可解决。

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