NodeJS 如何解决React中“过程”问题

b09cbbtk  于 2023-06-29  发布在  Node.js
关注(0)|答案(1)|浏览(106)

我最近正在用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创建了这个应用程序。有人能告诉我这个错误的解决方案吗?先谢谢你。

velaa5lx

velaa5lx1#

[解决]

**第一步:**我卸载了path,出现如下错误。

错误

If you want to include a polyfill, you need to:
 - add a fallback 
'resolve.fallback: { 
"path": require.resolve("path-browserify") 
}' 
- install 'path-browserify' 
If you don't want to include a polyfill, you can use an empty module like this:
 resolve.fallback: { "path": false }

此错误是由webpack的版本升级引起的(请查看:link
另外,我在/node_modules/react-scripts/config/webpack.config.js中找到了webpack.config.js

**第二步:**我在此文件中添加了一些脚本:

resolve:{
 ...
 fallback: {
        "fs": false,
        "tls": false,
        "net": false,
        "path": false,
        "zlib": false,
        "http": false,
        "https": false,
        "stream": false,
        "crypto": false,
      }
}

**第三步:**编辑完成后,尝试重启npm。你的工作会成功的!!

还有,谢谢你,先生林。

相关问题