CoffeeScript文件导入Quill包报错：Cannot use import statement outside a module

云原生阿岚

2026-8-5

解决CoffeeScript中使用import语句报错"Cannot use import statement outside a module"的问题

以下是针对该问题的具体解决方法：

升级CoffeeScript版本并指定编译输出为ES模块
旧版CoffeeScript（1.x）不支持ES模块语法，先升级到2.x及以上版本：
```
npm install coffeescript@latest --save-dev
```
编译时指定输出为ES模块，命令行编译可添加参数：
```
coffee --output-type=es --compile your-file.coffee
```
如果使用webpack等构建工具，在loader配置里开启ES模块输出：
```
module: {
  rules: [
    {
      test: /\.coffee$/,
      use: {
        loader: 'coffee-loader',
        options: {
          coffeeOptions: { output: 'es' }
        }
      }
    }
  ]
}
```
浏览器引入编译后的文件时添加type="module"
如果直接在HTML中引入编译后的JS文件，必须给script标签加上type="module"属性：
```
<script type="module" src="./compiled-script.js"></script>
```
浏览器默认将普通script视为非模块，即使package.json设置了type: module也需要这一步。
检查构建工具的CoffeeScript插件配置
若使用Vue CLI或Vite，需确保插件正确识别CoffeeScript为ES模块：
- Vite中安装@vitejs/plugin-coffee并配置：
```
import coffee from '@vitejs/plugin-coffee'
export default { plugins: [coffee()] }
```
- Vue CLI中需确保vue-cli-plugin-coffee配置正确，开启ES模块支持。
确认package.json的type: module作用范围
type: module仅对当前项目目录下的JS文件生效，若CoffeeScript编译后的文件输出到其他目录，需确保该目录下也有package.json并设置type: module，或者直接在编译时强制输出ES模块格式。