未捕获的引用错误：生产中的 React Vite 中未定义 require

Question

我遇到的问题是 Uncaught ReferenceError: require is not Defined。 我正在使用 React 18，Vite 版本 5。我将 Vite 实现到我现有的 React 项目中。 一切都在开发中工作，但是当我构建并将其部署到生产中时，我遇到了这个错误。 有人可以帮我吗？

我到处寻找但没有成功。

Answer 1

1.导入模块

使用Vite时，请使用

import

语法而不是

require()

// const react = require('react') ❌
import react from 'react' ✅

2.参考资产：

此外，当包含图像、svgs 和视频时，请将您在 create-react-app 中使用的

require()

替换为资源文件的实际路径。

示例：

// # create-react-app
<img src={require('../media/myImage.png')} /> ❌

// # Vite
<img src="../media/myImage.png" /> ✅

3.导入资产

有时，在代码中，您将资产作为模块导入：

import myImage from './myImage'

Vite 也有同样的情况

当您使用路径别名时，这很有用，例如，有时，您在 create-react-app 中导入图像，如下所示：

<img src={require('@media/myImage.png')} /> 

实际上，如果你想要这样，请先在顶部导入它，然后在底部使用它：

import MyImage from '@media/myImage.png'
<img src={MyImage} /> ✅
// <img src={"@media/myImage.png"} /> ❌

---

总结：vite 里没有什么叫

require()

的东西，如果你以前在 create-react-app 里这么做的话，在 Vite 里就不会发生这种事