导入@solana/web3.js包遇异常：Node.js正常但HTML/Vue报错

一、纯HTML/浏览器环境的解决方案 #

浏览器原生ES模块无法直接解析npm包名（比如@solana/web3.js），必须使用完整文件路径或CDN链接：

方案1：使用CDN链接导入 #

修改导入代码，直接用CDN地址：

import {
    Transaction,
    SystemProgram,
    Keypair,
    Connection,
    sendAndConfirmTransaction,
    clusterApiUrl
} from "https://cdn.jsdelivr.net/npm/@solana/web3.js@latest/lib/index.esm.browser.min.js"

提示：需要指定版本的话，把@latest替换成具体版本号（比如@1.91.8）

方案2：本地构建后用相对路径 #

1. 执行npm install @solana/web3.js安装包
2. 从node_modules/@solana/web3.js/lib/目录复制index.esm.browser.min.js到项目静态资源文件夹（比如./js/）
3. 用相对路径导入：

import {
    Transaction,
    SystemProgram,
    Keypair,
    Connection,
    sendAndConfirmTransaction,
    clusterApiUrl
} from "./js/index.esm.browser.min.js"

同时确保HTML中的script标签加上type="module"：

<script type="module" src="./your-script.js"></script>

二、Vue.js项目的解决方案 #

Vue CLI项目 #

直接用原导入代码即可，Vue CLI已配置webpack解析npm包。若仍报错：

• 确认已执行npm install @solana/web3.js
• 重启开发服务器（缓存可能导致解析失败）
• 若无效，在vue.config.js添加别名配置：

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@solana/web3.js': path.resolve(__dirname, 'node_modules/@solana/web3.js/lib/index.esm.js')
      }
    }
  }
}

Vite项目 #

Vite默认支持npm包导入，先确保已安装包。若报错：

• 若用TypeScript，安装类型定义：npm install @types/solana__web3.js --save-dev
• 或直接指定ES模块入口：

import {
    Transaction,
    SystemProgram,
    Keypair,
    Connection,
    sendAndConfirmTransaction,
    clusterApiUrl
} from "@solana/web3.js/lib/index.esm.js"

核心原因 #

Node.js遵循npm模块解析规则，可直接识别包名；但浏览器原生ES模块只支持相对/绝对路径，无法解析npm短包名。Vue项目报错多因构建工具缓存或入口配置问题，重启服务或调整路径即可解决。

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