Django项目加载JS文件遇SyntaxError: Unexpected token '*'错误求助

1. 给脚本标签添加type="module"声明 #

浏览器默认将JS文件当作传统脚本解析，不支持ES模块的import * as语法。在Django模板中加载你的JS文件时，必须明确指定type="module"：

<script type="module" src="{% static 'js/three_script.js' %}"></script>

确保用Django的{% static %}标签正确引用静态文件，且STATIC_URL与STATICFILES_DIRS配置无误。

2. 修正Three.js的导入路径 #

浏览器端的ES模块导入不支持直接使用包名（如'three'），必须使用相对路径、绝对路径或CDN地址：

• 本地文件方式：将three包中的three.module.js文件复制到Django静态目录（比如static/js/lib/），修改导入语句：

  import * as THREE from './lib/three.module.js';
  

• CDN方式：直接替换为CDN的模块地址，无需本地安装依赖：

  import * as THREE from 'https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js';
  

3. 使用模块打包工具（推荐） #

若想保留import * as THREE from 'three';的写法，建议用Webpack或Vite等工具打包JS代码：

• 初始化打包项目并安装three依赖；
• 配置打包输出目录为Django的静态文件夹（比如static/js/dist/）；
• 在Django模板中加载打包后的文件（如bundle.js），此时无需添加type="module"（打包后的文件兼容传统脚本）。

内容的提问来源于stack exchange，提问作者rick de graaf