HTML集成WalletConnect Web3Modal遇MIME类型错误求解决

问题背景 #

在纯HTML应用中集成WalletConnect Web3Modal时，触发以下错误：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

使用的代码示例：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>WC</title>
    <script type="module" >
      import { EthereumClient, w3mConnectors, w3mProvider } from './node_modules/@web3modal/ethereum'
      import { Web3Modal } from './node_modules/@web3modal/html'
      import { configureChains, createClient } from './node_modules/@wagmi/core'
      import { arbitrum, mainnet, polygon } from './node_modules/@wagmi/core/chains'

      const chains = [arbitrum, mainnet, polygon]
      const projectId = 'YOUR_PROJECT_ID'

      const { provider } = configureChains(chains, [w3mProvider({ projectId })])
      const wagmiClient = createClient({
        autoConnect: true,
        connectors: w3mConnectors({ projectId, version: 1, chains }),
        provider
      })
      const ethereumClient = new EthereumClient(wagmiClient, chains)
      const web3modal = new Web3Modal({ projectId }, ethereumClient)
    </script>
  </head>

  <body>
    <w3m-core-button></w3m-core-button>
  </body>

</html>

解决方案 #

1. 改用CDN导入模块（最直接方案） #

直接通过CDN导入ES模块，规避本地node_modules的路径解析和MIME类型问题，修改script代码如下：

<script type="module">
  import { EthereumClient, w3mConnectors, w3mProvider } from 'https://unpkg.com/@web3modal/ethereum@2.7.1'
  import { Web3Modal } from 'https://unpkg.com/@web3modal/html@2.7.1'
  import { configureChains, createClient } from 'https://unpkg.com/@wagmi/core@1.4.6'
  import { arbitrum, mainnet, polygon } from 'https://unpkg.com/@wagmi/core@1.4.6/chains'

  const chains = [arbitrum, mainnet, polygon]
  const projectId = 'YOUR_PROJECT_ID'

  const { provider } = configureChains(chains, [w3mProvider({ projectId })])
  const wagmiClient = createClient({
    autoConnect: true,
    connectors: w3mConnectors({ projectId, version: 1, chains }),
    provider
  })
  const ethereumClient = new EthereumClient(wagmiClient, chains)
  const web3modal = new Web3Modal({ projectId }, ethereumClient)
</script>

可以指定具体版本号避免兼容性问题，版本号可根据官方更新调整。

2. 修正本地服务器的MIME类型配置 #

若坚持使用本地node_modules，需确保静态服务器（如http-server、live-server）能正确返回.js文件的application/javascript MIME类型：

• 检查服务器是否将404请求重定向到index.html，这种行为会导致模块请求返回HTML，触发MIME错误，需修改配置关闭该重定向
• 部分服务器可通过命令行参数或配置文件强制设置MIME映射规则

3. 验证node_modules路径正确性 #

确认./node_modules/@web3modal/ethereum等路径下存在合法的JS入口文件（通常是index.js或dist目录下的模块文件），路径错误会导致服务器返回HTML页面，引发MIME类型异常。

4. 用打包工具构建项目 #

如果需要依赖本地包，可使用Vite这类轻量工具：

1. 初始化项目：npm create vite@latest my-wc-project -- --template vanilla
2. 安装依赖：npm install @web3modal/ethereum @web3modal/html @wagmi/core
3. 将业务代码迁移到main.js，运行npm run dev启动服务，Vite会自动处理模块导入和MIME类型问题

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