JS使用require/import加载模块终端正常但浏览器报错如何解决

你混淆了Node.js运行环境和浏览器运行环境的能力边界：express是专为Node.js后端设计的服务端框架，本身不支持在浏览器端直接运行，这是所有报错的底层原因。

• 报错Uncaught ReferenceError: require is not defined：require是Node.js内置的CommonJS模块加载语法，浏览器原生不支持该语法，仅在VS Code终端用Node命令运行JS文件时生效，浏览器环境直接调用会报未定义。
• 报错Uncaught SyntaxError: Cannot use import statement outside a module：import是ES Module专属语法，浏览器默认把不带type="module"属性的script标签识别为普通JS脚本，不允许直接使用ES Module导入语法，因此触发语法错误。
• 报错Uncaught TypeError: Failed to resolve module specifier "express"：即使开启浏览器的ES Module支持，浏览器也不支持直接从node_modules目录裸导入包名，要求导入路径必须以/、./、../开头。即便补全路径，express本身依赖Node.js内置的http、fs等浏览器不存在的API，依然无法正常运行。

根据实际开发需求选择对应方案：

方案1：开发后端express服务 #

express是后端框架，不能直接引入到HTML中运行，你需要单独运行该JS作为后端服务：

1. 删除HTML中引入main.js的script标签
2. 在VS Code终端执行node main.js启动后端服务
3. 前端如果需要和后端交互，使用fetch/axios调用express暴露的HTTP接口即可

方案2：开发前端页面，误引入了后端框架 #

你需要把express替换为前端可用的对应功能库：如果要做前端路由，可使用vue-router/react-router；如果要发送网络请求，可使用axios/原生fetch，不要在前端代码中引入纯后端框架。

补充说明 #

如果你确实需要在浏览器端使用部分兼容浏览器的Node.js生态包，可以用webpack/vite等前端构建工具对代码进行打包，将Node.js模块转换为浏览器可识别的格式，但express这类依赖Node.js专属API的纯后端包，就算经过构建也无法在浏览器运行。

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