HTML Canvas游戏报错：Cannot use import statement outside a module

核心问题拆解 #

你碰到的两个错误是独立的：

• SyntaxError: Cannot use import statement outside a module：浏览器把没标记type="module"的脚本当成普通脚本，不识别ES模块的import语法。
• JS里导入CSS报错：浏览器原生ES模块不支持直接import CSS文件，这是Webpack这类打包工具的专属语法。

具体解决步骤 #

1. 修复JS模块导入错误 #

所有使用import/export的脚本必须标记为ES模块，直接调整HTML的脚本引入逻辑：

<!-- 删掉单独引入resources.js的行，让main.js作为入口去导入它 -->
<script src="main.js" type="module"></script>

这样main.js里的import {Resources} from "./src/resources.js"就能正常执行，因为浏览器会把它当作ES模块处理，自动加载依赖的resources.js。

2. 修复CSS导入问题 #

直接删掉main.js里的import './src/style.css'语句——你已经在HTML头部用<link rel="stylesheet" href="src/style.css">引入了CSS，完全不需要在JS里重复导入。

如果确实需要在JS里动态加载CSS，用原生DOM API实现：

const cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href = './src/style.css';
document.head.appendChild(cssLink);

3. 关键注意事项 #

• 必须通过本地服务器访问页面（比如用npx serve启动），ES模块不支持file://协议，直接打开本地HTML文件会导致加载失败。
• 核对文件相对路径：./src/resources.js是相对于main.js所在目录的路径，别写错层级。

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