导入uuid npm包遇多类错误：相对引用格式及模块导入异常

问题复现 #

通过npm install uuid安装uuid@9.0.0后，在前端index.js中导入模块时连续遇到以下报错：

• 使用CommonJS语法：const { v4: uuidv4 } = require('uuid');，报错：Uncaught ReferenceError: require is not defined
• 改用ES模块语法：import { v4 as uuidv4 } from 'uuid';，报错：SyntaxError: Cannot use import statement outside a module
• 在HTML的script标签添加type="module"后，报错：TypeError: Failed to resolve module specifier "uuid". Relative references must start with either "/", "./", or "../".
• 尝试相对路径导入：import { v4 as uuidv4 } from '../node_modules/uuid/dist/v4';，出现404：GET http://localhost:3000/node_modules/uuid/dist/v4 net::ERR_ABORTED 404 (Not Found)

当前package.json依赖项：

"dependencies": {
    "express": "^4.18.1",
    "nodemon": "^2.0.20",
    "socket.io": "^4.5.2",
    "socket.io-client": "^4.5.4",
    "uuid": "^9.0.0"
 }

核心原因 #

1. 浏览器原生不支持Node.js的CommonJSrequire语法。
2. 未标记脚本为ES模块时，浏览器无法识别import语句。
3. 浏览器仅支持相对/绝对路径的模块引用，无法解析裸模块名（如uuid）。
4. 默认情况下，Express等前端服务器不会静态托管node_modules目录，直接访问会返回404。

解决方案 #

方案一：CDN直接引入（快速生效） #

在HTML中通过CDN加载uuid的ES模块版本，无需依赖本地node_modules：

<script type="module">
  import { v4 as uuidv4 } from 'https://cdn.jsdelivr.net/npm/uuid@9.0.0/+esm';
  // 调用示例
  console.log(uuidv4());
</script>

方案二：配置Express托管node_modules（临时测试用） #

在Express服务端代码中添加node_modules的静态托管规则：

const express = require('express');
const app = express();

// 托管node_modules目录，允许前端访问
app.use('/node_modules', express.static('node_modules'));

app.listen(3000, () => console.log('Server running on port 3000'));

之后在index.js中使用绝对路径导入：

import { v4 as uuidv4 } from '/node_modules/uuid/esm/v4.js';

方案三：使用打包工具（生产环境推荐） #

借助Webpack、Vite或Rollup等打包工具处理模块依赖：

1. 以Vite为例，初始化项目后直接在index.js中写import { v4 as uuidv4 } from 'uuid';
2. 运行npm run dev或npm run build，工具会自动解析并打包模块，生成浏览器可执行的代码。

方案四：手动复制模块文件 #

从node_modules/uuid/esm/目录复制v4.js到你的前端静态资源目录（如public/js），然后用相对路径导入：

import { v4 as uuidv4 } from './js/v4.js';

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