uniapp 默认模板 require is not defined 如何解决？

在使用uniapp默认模板时，遇到报错"require is not defined"该如何解决？项目运行后控制台提示该错误，导致部分功能无法正常加载。尝试过修改manifest.json配置但无效，不清楚是webpack配置问题还是uniapp本身的兼容性问题。请问有什么解决方案或排查方向？环境是HBuilderX最新版，vue3+ts模板。

2 回复

在 manifest.json 的源码视图中，添加以下代码：

"h5": {
  "devServer": {
    "disableHostCheck": true
  }
}

然后重启项目即可解决。


在 UniApp 中遇到 require is not defined 错误，通常是因为在浏览器环境或小程序环境中使用了 Node.js 的模块引入方式。以下是解决方案：

1. 使用 ES6 模块语法

将 require 替换为 import：

// 错误写法
// const module = require('./module.js');

// 正确写法
import module from './module.js';

2. 动态导入（适用于异步加载）

使用 import() 进行动态导入：

import('./module.js').then(module => {
  // 使用模块
});

3. 检查 UniApp 配置

在 vue.config.js 中配置 CommonJS 模块支持（如果需要）：

module.exports = {
  configureWebpack: {
    node: {
      global: true
    }
  }
};

4. 避免在浏览器端使用 Node.js 模块

确保代码中没有引用仅限 Node.js 的模块（如 fs、path），这些在浏览器或小程序中不可用。

5. 使用 UniApp 提供的 API

对于文件操作，使用 UniApp 的 API（如 uni.getFileSystemManager()）替代 Node.js 模块。

示例代码修正：

假设原代码为：

const utils = require('../../common/utils.js');

修正为：

import utils from '../../common/utils.js';

如果问题持续，请检查开发环境配置或提供更多代码细节以便进一步排查。

回到顶部