不使用link正确导入frappe-charts？已遇模块及CORS加载错误

问题描述 #

我通过import { Chart } from "frappe-charts/dist/frappe-charts.min.esm";导入frappe-charts，已将包下载至项目中。起初碰到Uncaught SyntaxError: Cannot use import statement outside a module错误，给script标签添加type="module"解决后，又出现两个新问题：

• index.html:1 因CORS策略阻止从null源访问本地脚本文件
• index.html:7 无法获取index.js文件

我的代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Data Chart</title>
    <script type="module" src="js/index.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <form id="municipality-form">
      <input type="text" id="input-area" placeholder="Type municipality name" />
      <button type="button" id="submit-data">Fetch Data</button>
    </form>
  </body>
</html>

index.js #

import { Chart } from "frappe-charts/dist/frappe-charts.min.esm";

解决步骤 #

1. 修复"无法获取index.js文件"问题 #

• 核对文件路径：确认index.js确实放在项目根目录下的js文件夹里，注意路径大小写（Mac/Linux系统区分大小写，Windows不区分）
• 改用明确的相对路径：将script标签的src改为./js/index.js，明确从当前html所在目录开始查找：

  <script type="module" src="./js/index.js"></script>
  

2. 解决CORS策略阻止问题 #

直接双击打开本地html文件时，浏览器用file://协议加载，会触发CORS限制，必须通过本地服务器运行项目：

• Python内置服务器：
  项目根目录打开终端，运行对应命令：

  # Python 3版本
  python -m http.server 8000
  # Python 2版本
  python -m SimpleHTTPServer 8000
  

  然后在浏览器访问http://localhost:8000
• Node.js的http-server工具：
  先全局安装工具：

  npm install -g http-server
  

  项目根目录运行：

  http-server -p 8000
  

  访问http://localhost:8000即可

3. 验证frappe-charts导入有效性 #

如果导入仍失败，确认node_modules文件夹在项目根目录，可尝试使用完整相对路径导入：

import { Chart } from "../node_modules/frappe-charts/dist/frappe-charts.min.esm";

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