uniapp referenceerror: require is not defined如何解决

在uniapp开发中遇到报错"ReferenceError: require is not defined"，尝试导入CommonJS模块时出现这个错误。请问应该如何解决？我的环境是HBuilderX，在vue文件中使用require语句就报这个错。已经检查过node_modules存在，但在uniapp里似乎不支持require语法？求教正确的模块引入方式。

2 回复

在uniapp中，require是Node.js语法，浏览器环境不支持。改用ES6模块导入方式：

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

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

如果使用npm包，确保支持浏览器环境，并在pages.json中配置。


在uni-app中出现ReferenceError: require is not defined错误，是因为uni-app运行在浏览器环境中，不支持Node.js的require语法。以下是解决方案：

1. 使用ES6模块导入

将require改为ES6的import语法：

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

// ✅ 正确写法
import module from './module.js'
// 或者
import { functionName } from './module.js'

2. 动态导入（适用于条件加载）

// 使用import()进行动态导入
const module = await import('./module.js')

3. 处理第三方库

如果第三方库使用CommonJS：

  • 寻找该库的ES模块版本
  • 或使用构建工具进行转换

4. 配置修改

在vue.config.js中配置（如使用Vue CLI）：

module.exports = {
  configureWebpack: {
    node: {
      global: false,
      __filename: false,
      __dirname: false
    }
  }
}

5. 静态资源处理

对于JSON等静态文件：

// ❌ 错误
const data = require('./data.json')

// ✅ 正确
import data from './data.json'

注意：uni-app开发时应始终使用ES6模块语法，避免使用Node.js特定的API和语法。

回到顶部