在Flask托管的原生JS/HTML中引入npm包遇MIME类型错误

问题根源 #

你碰到的错误是因为Flask找不到指定的node_modules文件，返回了404错误页面（HTML格式），浏览器拿到的内容MIME类型是text/html，不符合JS模块要求的application/javascript，所以加载失败。

解决方案 #

方案1：调整静态文件配置与导入路径 #

• 步骤1：让Flask能访问node_modules
  Flask默认只从static目录加载静态文件，你可以把node_modules文件夹移到项目的static目录里；或者临时修改Flask配置，允许从根目录加载静态文件（不推荐生产环境使用，易暴露敏感文件）：

  from flask import Flask
  
  app = Flask(__name__, static_folder='.', static_url_path='')
  

• 步骤2：修正HTML中的导入路径
  如果node_modules在static目录下，导入路径要加上Flask静态文件的默认URL前缀/static：

  <script type="module">
      import { configureChains, createClient } from "/static/node_modules/@wagmi/core";
      import { bsc } from "/static/node_modules/@wagmi/core/chains";
      import { Web3Modal } from "/static/node_modules/@web3modal/html";
      import { EthereumClient, modalConnectors, walletConnectProvider } from "/static/node_modules/@web3modal/ethereum";
  </script>
  

方案2：用打包工具整合依赖（推荐生产环境） #

直接引用node_modules文件容易出现路径依赖问题，更稳妥的方式是用打包工具（比如Vite、Parcel）把所有依赖打包成单个JS文件：

1. 初始化前端项目并安装依赖：

   npm init vite@latest frontend -- --template vanilla
   cd frontend
   npm install @wagmi/core @web3modal/html @web3modal/ethereum
   

2. 在frontend/src/main.js中编写业务代码：

   import { configureChains, createClient } from "@wagmi/core";
   import { bsc } from "@wagmi/core/chains";
   import { Web3Modal } from "@web3modal/html";
   import { EthereumClient, modalConnectors, walletConnectProvider } from "@web3modal/ethereum";
   
   // 这里添加你的业务逻辑
   

3. 打包项目：

   npm run build
   

4. 把frontend/dist目录下的文件复制到Flask的static目录，在模板HTML中引用打包后的JS文件：

   <script type="module" src="/static/assets/main.xxxx.js"></script>
   

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