Uncaught (in promise) ReferenceError: require is not defined

最新推荐文章于 2025-03-10 09:37:01 发布

survivorsfyh

最新推荐文章于 2025-03-10 09:37:01 发布

阅读量1.9k

点赞数 10

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/survivorsfyh/article/details/135459578

版权

Vue 专栏收录该内容

26 篇文章

订阅专栏

在 Vue3 中加载项目路径下的资源图片,起初按照之前 vue 的写法 require 但浏览器却抛出了异常

Uncaught (in promise) ReferenceError: require is not defined

因为 require 采用的 webpack 加载方式,而 vue3 中通过 vite 的方式,两者存在差异,所以才产生了刚开始的一目;

vue3 中应采用 vite 静态资源加载的方式来渲染即可,具体方式如下:

<van-image width="10rem" height="10rem" fit="cover" :src="icon" />
// 将 require 改为 new URL 的方式即可
const icon = new URL('@/assets/resource/chh_1.jpg', import.meta.url).href;

以上便是此次分享的全部内容，希望能对大家有所帮助!

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

survivorsfyh

关注关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue3 - vite 项目报错：Uncaught ReferenceError: require is not defined（解决 vue3 vite 项目无法识别 require 语法导致报错）

王二红

12-16

2万+

vue3，vite，报错解决，vue3+vite报错requireisnotdefined，vue3vite引插件不识别require，老插件必须用require怎么办，vite项目插件要求使用require引入但报错，vue3不兼容require导致第三方包插件无法使用，vue3vite中使用require报错怎么办，解决Vite+vue3使用第三方依赖报错“requireisnotdefined”问题，vite项目require语法兼容问题解决requireisnotdefine

Vue3 - Vite运行打包时Uncaught ReferenceError: process is not defined（解决vue3+vite报错process is not defined）

王二红

03-26

6369

vue3，vite，vue3+vite报错，process，UncaughtReferenceError:processisnotdefined，浏览器控制台报错processisnotdefined解决方法，vue3如何解决报错，vite报错怎么办，前端打包UncaughtReferenceError:processisnotdefined，npmrunbuild打包报错，vite打包时出现错误，vue3打包运行找不到process，热更新会报错UncaughtRefer

参与评论您还未登录，请先登录后发表或查看评论

解决报错：Uncaught ReferenUncaught (in promise) ReferenceError: require is not defined

m0_70934522的博客

10-20

9308

解决报错：Uncaught ReferenUncaught (in promise) ReferenceError: require is not defined

Vite 不支持 require 解决方案（三种情况/require is not defined）

热门推荐

木得是的博客

06-14

3万+

当我们使用electron的时候，想要使用nodejs以及第三方的时候出现Uncaught ReferenceError: require is not defined，这种问题的时候，也许并不是我们的问题而是少了配置。也可能是版本的问题。如图：而我们只需要再加一个配置，这个错误提示就会消失， webPreferences: { nodeIntegration: true, contextIsolation:false // 把这一项加上错误就会消失 } 补充： nodeInteg

vue3 引入图片报错 Uncaught (in promise) ReferenceError: require is not defined

Hermia_yuan的博客

08-04

2321

如果我们使用 require 来引入一个图片文件的话，那么 require 返回的就是用于引入的图片（npm 运行之后图片的编译路径）。vue 项目通过 webpack 的 devServer 运行之后，默认的 vue-cli 配置下，图片会被打包成 name.hash 的图片名，在这种情况下，如果我们使用固定的字符串路径则无法找到该图片，所以需要使用 require 方法来返回图片的编译路径。是一个 ESM 的原生功能，会暴露当前模块的 URL。如果项目是用vite搭建的,就需要使用。

Uncaught (in promise) ReferenceError: reject is not defined的出现原因及解决

weixin_43858851的博客

03-04

1790

Uncaught (in promise) ReferenceError: reject is not defined的出现原因及解决

Vue报错：Uncaught (in promise) ReferenceError: Message is not defined at eval

小龙爷的博客

08-17

1万+

问题：在封装的请求文件request.js中判断状态码为400时单独引入的element组件Message控制台显示undefined，原因未知；报错信息如下：修改前：解决：

ReferenceError: require is not defined in ES module scope, you can use import instead

十一姐的博客

03-17

2767

【代码】ReferenceError: require is not defined in ES module scope, you can use import instead。

【electron】解决 electron require()报错：Uncaught ReferenceError: require is not defined

欢迎来到C-Homes

10-01

1157

有关技术问题，都可以一起讨论喔~~

Electron-Vue程序启动控制台报错：Uncaught ReferenceError: require is not defined at (index):1

BigFamer的博客

12-23

6894

一、前言我在使用electron制作exe安装包的项目中用到了nodejs的一个usb模块，遇到了一些问题。二、问题描述 npm install安装（我的这个版本是：“usb”: “^1.6.3”,）之后，启动项目之后发现页面空白，我打开控制台发现了这样的报错：三、问题分析和解决 1、分析这里需要知道electron本质是什么，来看一张图片： Chromium : 为Electron提供了强大的UI能力，可以不考虑兼容性的情况下，利用强大的Web生态来开发界面。 Node.js ：让Electr

前端向后端发起请求时，报Uncaught (in promise) ReferenceError: ***** is not defined的错

qq_51910659的博客

04-21

6337

在前端向后端发起请求的时候，接口等都封装好了的。但是报Uncaught (in promise) ReferenceError: getGoods is not defined。

Uncaught ReferenceError: require is not defined

zoepriselife316的博客

06-28

3万+

在electron中，渲染进程与主进程交互时，引入ipcRenderer报错 Uncaught ReferenceError: require is not defined 渲染进程是这么写的： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>He...

Uncaught Referencerror: require is not defined

weixin_54138016的博客

06-14

973

在框架中使用是会报错的。例如如下代码：就会得到报错：那么在中，如何找到对应的方法呢？就可以使用或者方法了。为动态导入，构建时，会分离为独立的 chunk;而为直接引入。

Uncaught (in promise) ReferenceError: params is not defined --- 已解决

持之以恒

07-19

2548

Uncaught (in promise) ReferenceError: params is not defined

uncaught (in promise) ReferenceError: require is not defined怎么解决

02-24

### 解决方案概述当遇到 `Uncaught (in promise) ReferenceError: require is not defined` 错误时，通常是因为尝试在不支持 Node.js 模块系统的环境中使用 `require()` 函数。此问题常见于 Electron 应用程序中的渲染进程中[^1]。 ### 原因分析该错误可能由以下几个原因引起： - 渲染进程默认情况下并不启用 Node.js 集成，因此无法识别 `require()` - 使用了 Webpack 或其他打包工具，默认配置下可能会禁用 CommonJS 模块解析 - ES6 模块化环境与 CommonJS 不兼容，导致直接使用 `require()` 失败[^2] ### 解决策略一：修改Electron应用设置对于基于 Electron 的项目，在主进程中通过以下方式开启节点集成可以解决问题： ```javascript // main.js const { app, BrowserWindow } = require('electron') function createWindow () { let win = new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false // 安全建议保持为true，这里仅用于调试目的设为false } }) win.loadFile('index.html') } app.whenReady().then(createWindow) ``` 注意：出于安全考虑，生产环境下不应随意关闭上下文隔离(`contextIsolation`)并打开Node集成(`nodeIntegration`)。这会带来潜在的安全风险[^5]。 ### 解决策略二：调整构建工具配置如果正在使用的前端框架（如 Vue、React 等），可以通过适当调整其构建配置来解决这个问题。例如，在 Vite 构建的 Vue3 项目中，应该避免直接使用 `require()` 而改用动态导入或静态资源路径处理方法[^4]: ```html  <template> <img :src="iconPath"/> </template> <script setup lang="ts"> import { ref } from 'vue' const iconPath = new URL('./assets/icon.png', import.meta.url).href; </script> ``` ### 解决策略三：检查依赖库版本有时特定版本的某些 npm 包也可能引发此类问题。确保所使用的包是最新的稳定版，并且适用于当前的工作流。比如 js-base64 版本过低可能导致ES Module 和CommonJS之间的冲突[^3]。