Uncaught ReferenceError: process is not defined

Question

我正在使用 node.js 创建 Web 应用程序。当我运行应用程序（通过在浏览器上打开 index.html 或在终端上使用命令 "npm start" ）时，我收到两个错误：

未捕获的 ReferenceError：未定义进程

未捕获的 ReferenceError：未定义要求

我解决了 "require is not defined" 错误，具体方法是在我的 index.html head 标记中包含 link 到 this 脚本，其中定义了 require 函数。但是，我找不到类似的过程函数。

我的问题是双重的：

为什么内置的node.js模块需要重新定义？为什么他们没有被识别出来，即"built-in modules"？术语 "built-in module" 是否意味着不需要重新定义模块 externaly/second-handedly？
有没有办法解决这个问题？我的脚本很简单，我只是尝试使用node.js的一个基本功能，所以我不知道我可能犯了什么错误。

如果有人遇到过这个问题并找到了解决方法或发生这种情况的原因，那么您会很有帮助。

Answer 1

Node.js 代码必须由节点进程运行，而不是浏览器（代码必须运行在服务器中）。

要运行代码，您必须运行命令：

node server.js

然后您可以通过输入“http://localhost:8080”从浏览器访问您的服务器。您必须有一个包含所需服务器代码的文件 server.js（或其他文件）（在本例中，在端口 8080 中创建一个 Web 服务器）。

您可以按照这个简单的示例，使用 express 作为 http 服务器模块：http://expressjs.com/starter/hello-world.html

Answer 2

我进入我的 .eslintrc.js 文件解决了同样的问题配置我的全局变量，向全局变量添加 require 和 process 并将相应的值设置为 "writable"。希望对你有用。

这个link真的很有帮助 https://eslint.org/docs/user-guide/configuring#specifying-globals

Answer 3

我尝试做这个节点 js 应用程序时遇到了同样的问题：https://www.youtube.com/watch?v=mr9Mtm_TRpw

html 中的要求是从 < 脚本> 达到的，但未定义，例如

<script> require('./renderer.js');</script>

我改成了：

<script src="./renderer.js"></script>

html 脚本中的进程也未定义。我在 js 文件中包含了 webPreferences: nodeIntegration:

win = new BrowserWindow({
    width: 800, 
    height:600, 
    icon: __dirname+'/img/sysinfo.png', 
    webPreferences: {
        nodeIntegration: true
    }
});

希望对您有所帮助。

Answer 4

Webpack 可以将环境变量注入“客户端”.js 代码（在 SPA/PWA 的情况下非常有用）。您应该将它们定义为 webpack.config.js

中的插件

webpack.config.js

module.exports = {
plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.MY_ENV': JSON.stringify(process.env.MY_ENV),
      ... and so on ...
    })
],
}

现在您可以在客户端访问它了：

app.js

// Something like that
if(process.env.NODE_ENV === 'debug'){
    setDebugLevel(1)
}

Answer 5

如果您在 Webpack 3 中使用 npm 模块 dotenv-webpack，可能是因为您正在使用解构，如下所示：

const { ENV1, ENV2 } = process.env;

这是一个known issue。

丑陋的解决方法是：

const { ENV1 } = process.env;
const { ENV2 } = process.env;

Answer 6

如果您遇到这个问题并且您正在使用 webpack，您可以通过在 webpack.config.js.[= 中使用 DefinePlugin 将所需的 process 数据注入客户端包34=]

在下面的示例中，我展示了如何向 process.env 对象添加一些内容以使其在浏览器中可用：

使用库的.env里面的所有环境变量 dotenv
NODE_ENV 的值，即 'development' 或 'production'

工作示例

# .env

API_KEY=taco-tues-123
API_SECRET=secret_tacos

// webpack.config.js

const dotenv = require('dotenv').config({ path: __dirname + '/.env' })
const isDevelopment = process.env.NODE_ENV !== 'production'

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(dotenv.parsed),
      'process.env.NODE_ENV': JSON.stringify(isDevelopment ? 'development' : 'production'),
    }),
  ].filter(Boolean),
}

// Within client side bundle (React)
// src/App.jsx

console.log(process.env)          // {API_KEY: "taco-tues-123", API_SECRET: "secret_tacos"}
console.log(process.env.NODE_ENV) // development

请注意 console.log(process.env) 仅包含来自 .env 文件的值，并且 NODE_ENV 不是 process.env 对象的一部分。

在下面的示例中，我展示了我是如何尝试注入 process.env 导致我出现此堆栈溢出的对象的。我还包括了 webpack 文档中的一个重点，说明为什么下面的代码不起作用。

坏例子

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        ...dotenv.parsed,
        'NODE_ENV': JSON.stringify(isDevelopment ? 'development' : 'production')
      }
    }),
  ].filter(Boolean),
}

// Within client side bundle (React)
// src/App.jsx

console.log(process.env)          // Uncaught ReferenceError: taco is not defined
console.log(process.env.NODE_ENV) // development

来自 webpack DefinePlugin docs:

Warning When defining values for process prefer

'process.env.NODE_ENV': JSON.stringify('production')

over

process: { env: { NODE_ENV: JSON.stringify('production') } }

Using the latter will overwrite the process object which can break compatibility with some modules that expect other values on the process object to be defined.

！警告！

将 dotenv.parsed 注入到客户端包中，如所述会将这些秘密暴露给客户端。出于开发目的，这没什么大不了的，但在已部署的生产环境中，任何密码或私有 api 密钥都将对寻找它们的任何人可见。

Answer 7

您可以将以下内容添加到您的 package.json 文件

{
"name": "mypackage",//default
"version": "0.0.1", //default
"eslintConfig": {
    "env": {
        "browser": true,
        "node": true
    }
}}

More Explanation

Answer 8

我刚刚在调用特定端点时在本地 hot-reloading Quasar (Vue) 应用程序中收到此错误 (Uncaught ReferenceError: process is not defined)。我的解决方法最终是重新启动 hot-reloading 服务器（自从添加 process.env.MY_VARIABLE 代码后我没有重新加载它）。

Uncaught ReferenceError: process is not defined