[英]"require is not defined" when I import something from node_modules
我正在用 React 构建一个简单的博客应用程序,我是 React 新手并且我正在使用路由,所以我必须从react-router-dom
导入Route
,但是当我导入它时
import { Route } from "react-router-dom";
然后它显示
未捕获的 ReferenceError:未定义要求
它发生在每个文件中,我尝试在 App.js 中导入。
我在App.js
所在的public
中创建了一个名为js
的新文件夹。
我已经尝试了几个小时,但它仍然显示该错误。 我也尝试过使用browsify
和webpack
但仍然显示。
应用程序.js
import { Route } from "react-router-dom";
function App() => {
return (
<div>
React App
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('content')
)
package.json
{
"name": "my-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"history": "^5.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "5.2.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"webpack": "^5.70.0"
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React-App</title>
<script src="vendor/babel-standalone.js"></script>
<script src="vendor/react.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="vendor/react-dom.js"></script>
</head>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
<body >
<div id="content"></div>
<script
type="text/babel"
data-plugins="transform-class-properties"
src="App.js"
></script>
</body>
</html>
任何帮助将非常感激。 先感谢您。
我认为您的App.js
应该在src
文件夹中而不是在public
中。 尝试移动它并重试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.