安装@solana/web3.js后遇Class extends构造函数错误求助

错误信息 #

Class extends value /static/media/client.98866d6736d9f36d61b8.cjs is not a constructor or null 
TypeError: Class extends value /static/media/client.98866d6736d9f36d61b8.cjs is not a constructor or null     
at ./node_modules/@solana/web3.js/lib/index.browser.esm.js (http://localhost:3000/static/js/bundle.js:95779:34)     
at options.factory (http://localhost:3000/static/js/bundle.js:623205:31)     
at __webpack_require__ (http://localhost:3000/static/js/bundle.js:622599:32)     
at fn (http://localhost:3000/static/js/bundle.js:622863:21)     
at ./src/pages/cryptobasket/Test.jsx (http://localhost:3000/static/js/bundle.js:48762:73)     
at options.factory (http://localhost:3000/static/js/bundle.js:623205:31)     
at __webpack_require__ (http://localhost:3000/static/js/bundle.js:622599:32)     
at fn (http://localhost:3000/static/js/bundle.js:622863:21)     
at ./src/component/common/RouterComponent.jsx (http://localhost:3000/static/js/bundle.js:12857:82)     
at options.factory (http://localhost:3000/static/js/bundle.js:623205:31) 

解决方案 #

• 清理依赖缓存并重装
  删除现有依赖文件和锁文件，重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

  若使用yarn，替换为：

  rm -rf node_modules yarn.lock
  yarn install
  

• 配置webpack模块解析（针对Create React App项目）
  该错误多因webpack无法正确解析Node.js核心模块导致，需添加polyfill和fallback配置：

  1. 安装craco（无需eject项目）：

     npm install @craco/craco --save-dev
     

  2. 在项目根目录创建craco.config.js，添加以下内容：

     const webpack = require('webpack');
     
     module.exports = {
       webpack: {
         configure: {
           resolve: {
             fallback: {
               crypto: require.resolve('crypto-browserify'),
               stream: require.resolve('stream-browserify'),
               buffer: require.resolve('buffer/'),
             },
           },
           plugins: [
             new webpack.ProvidePlugin({
               Buffer: ['buffer', 'Buffer'],
             }),
           ],
         },
       },
     };
     

  3. 修改package.json中的启动命令，将react-scripts替换为craco：

     "scripts": {
       "start": "craco start",
       "build": "craco build",
       "test": "craco test"
     }
     

• 安装必要的polyfill依赖
  安装Node.js核心模块的浏览器兼容版本：

  npm install crypto-browserify stream-browserify buffer --save
  

• 调整@solana/web3.js版本
  降级到1.36.0无效的话，尝试升级到经过验证的兼容版本：

  npm install @solana/web3.js@1.78.0
  

• 检查导入方式
  确保代码中导入@solana/web3.js的方式正确，避免直接导入内部模块：

  // 正确写法
  import * as web3 from '@solana/web3.js';
  // 或按需导入
  import { Connection, PublicKey } from '@solana/web3.js';
  

内容的提问来源于stack exchange，提问作者Mohammad syied bin salim