引入@solana/web3.js时报'import'仅可配合'sourceType: module'使用如何解决

报错原因 #

你遇到的是@solana/web3.js在浏览器端打包时的典型问题：该库依赖Node.js原生核心模块（如crypto、stream、Buffer、process等），浏览器环境没有这些模块的原生实现，同时你的项目中存在Babel6和Babel7的依赖冲突，导致打包失败。

解决方案 #

按以下步骤操作即可修复：

1. 清理冲突依赖
   你当前同时安装了Babel6的旧版预设和Babel7的新版预设，会引发编译冲突，先卸载冗余依赖：

npm uninstall babel-preset-env babel-preset-es2015 babel-preset-stage-0 babel-core

2. 安装Node模块polyfill
   安装浏览器端需要的Node核心模块兼容包：

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

3. 修改package.json配置
   替换原有配置中的browser、browserify、scripts字段，修改后内容如下：

"scripts": {
    "start": "budo src/index.js -- -t babelify"
},
"dependencies": {
    "@babel/runtime": "^7.14.8",
    "@solana/web3.js": "^1.29.2"
},
"devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "babel-preset-react": "^6.24.1",
    "babelify": "^10.0.0",
    "browserify": "^16.5.2",
    "budo": "^11.6.4",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "process": "^0.11.10",
    "stream-browserify": "^3.0.0"
},
"browser": {
    "crypto": "crypto-browserify",
    "stream": "stream-browserify"
},
"browserify": {
    "transform": [
        [
            "babelify",
            {
                "presets": [
                    "@babel/preset-env"
                ],
                "plugins": [
                    "@babel/plugin-transform-runtime"
                ]
            }
        ]
    ],
    "insertGlobalVars": {
        "Buffer": () => "require('buffer').Buffer",
        "process": () => "require('process')"
    }
}

4. 重新安装依赖
   删除原有依赖缓存后重新安装：

rm -rf node_modules package-lock.json
npm install

修改完成后重新执行npm start即可正常启动。

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