我最近正在用React开发Web应用程序,并使用“nedb”作为数据库。我可以用$ node "the code path"
运行下面的代码。但是,在localhost中,发生了以下错误。
ERROR
process is not defined
ReferenceError: process is not defined
at ./node_modules/path/path.js (H//localhost:3000/static/js/bundle.js:37516:17)
at options.factory (H//localhost:3000/static/js/bundle.js:81477:31)
at __webpack_require__ (H//localhost:3000/static/js/bundle.js:80900:33)
at fn (H//localhost:3000/static/js/bundle.js:81134:21)
at ./node_modules/nedb/lib/persistence.js (H//localhost:3000/static/js/bundle.js:35644:10)
at options.factory (H//localhost:3000/static/js/bundle.js:81477:31)
at __webpack_require__ (H//localhost:3000/static/js/bundle.js:80900:33)
at fn (H//localhost:3000/static/js/bundle.js:81134:21)
at ./node_modules/nedb/lib/datastore.js (H//localhost:3000/static/js/bundle.js:33587:17)
at options.factory (H//localhost:3000/static/js/bundle.js:81477:31)
我更改了错误中的URL,因为StackOverFlow将其作为垃圾邮件拒绝。(https->H)
DatabaseComponent.js
const NeDB = require('nedb');
const db = {};
db.users = new NeDB({
filename: 'src/database/users.db',
autoload: true,
});
export const addUser = (props) => {
const { name, email } = props;
db.users.insert({ name, email }, (err, newDoc) => {
console.log('[INSERT]');
console.log(newDoc);
});
};
export default { addUser };
EditDB.js
/* eslint-disable react/button-has-type */
import { React } from 'react';
import { useNavigate } from 'react-router-dom';
// eslint-disable-next-line no-unused-vars
import { addUser } from '../../backend/DatabaseComponent';
function EditDB() {
return (
<div className="editDB">
<h1>EditDB</h1>
<Buttons />
</div>
);
}
function Buttons() {
const navigate = useNavigate();
return (
<div className="buttons">
<button onClick={() => navigate(-1)}>back</button>
<button onClick={({}) => addUser()}>create</button>
</div>
);
}
export default EditDB;
package.json
{
"name": "imse2",
"version": "0.1.0",
"private": true,
"homepage": "./",
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.13.5",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"nedb": "^1.8.0",
"path": "^0.12.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.9.0",
"react-router-dom": "^6.13.0",
"react-scripts": "5.0.1",
"util": "^0.12.5",
"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": {
"eslint": "^8.43.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0"
}
}
我在谷歌上搜索了这个错误,发现很多人通过修改webpack.config.js解决了这个错误。虽然我的项目中没有这个文件,可能是因为我用create-react-app
创建了这个应用程序。有人能告诉我这个错误的解决方案吗?先谢谢你。
1条答案
按热度按时间velaa5lx1#
[解决]
**第一步:**我卸载了path,出现如下错误。
错误
此错误是由webpack的版本升级引起的(请查看:link)
另外,我在
/node_modules/react-scripts/config/webpack.config.js
中找到了webpack.config.js
。**第二步:**我在此文件中添加了一些脚本:
**第三步:**编辑完成后,尝试重启npm。你的工作会成功的!!
还有,谢谢你,先生林。