Express Web应用中JavaScript文件导入报错的解决方法咨询

结合你的代码和遇到的错误，核心是CommonJS与ES6模块系统不兼容导致的问题，分两种常见场景给你针对性解决方案：

场景1：board.js是前端脚本（在浏览器中运行） #

从你的server.js配置来看，public目录被设为静态资源文件夹，board.js大概率是在index.html中引入的前端脚本，这时候按以下步骤调整：

步骤1：将utility.js改为ES6导出格式 #

把原来的CommonJS导出语法替换为ES6的export：

export const hello = () => {
    console.log('hello');
}

步骤2：确保board.js的import在文件最顶部 #

ES6的import语句必须放在文件代码的最开头，不能嵌套在函数、条件判断等代码块内，示例：

// 必须放在文件第一行附近，不能在任何业务代码之后
import { hello } from './utility.js';

// 后续写你的业务逻辑
hello();

步骤3：在HTML中引入board.js时标记为模块 #

在index.html里引入board.js时，一定要添加type="module"属性，告诉浏览器这是ES6模块：

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

场景2：board.js是后端模块（在Node.js中运行） #

如果board.js是作为Express后端的一部分被server.js引用，需要将整个项目切换到ES6模块系统：

步骤1：在package.json中声明模块类型 #

在项目根目录的package.json里添加"type": "module"字段，让Node.js默认将.js文件当作ES6模块处理：

{
  "name": "your-project-name",
  "type": "module",
  // 其他项目配置字段...
}

步骤2：修改所有后端文件为ES6语法 #

• server.js替换为import写法：

import express from "express";
import path from 'path';

const app = express();
const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {
    console.log("server started")
});

app.use(express.static(path.join(__dirname, '/public')))
app.get('/', (req,res) => {
    res.sendFile(path.join(__dirname, "/index.html"))
});

• utility.js保持ES6导出格式（同场景1）
• board.js的import放在文件顶部：

import { hello } from './utility.js';

// 你的后端业务逻辑代码

错误原因说明 #

• ReferenceError: require is not defined：浏览器环境不支持Node.js专属的CommonJS模块语法（require/module.exports），只有Node.js默认支持这种写法。
• SyntaxError: import declarations may only appear at top level of a module：要么是你把import放在了函数、代码块内部（违反ES6模块规则），要么是脚本未被标记为模块（前端场景没加type="module"，后端场景没配置package.json的type字段）。

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