未捕获的引用错误：process未定义。

Question

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

未捕获的引用错误：process未定义

未捕获的引用错误：require未定义

我通过在index.html头标签中明确包含链接此脚本来解决“require未定义”的错误，其中require函数被定义。

然而，我找不到类似于process函数的东西。

我的问题有两个方面：

1. 为什么内置的node.js模块需要重新定义？为什么它们不被视为“内置模块”而被识别？“内置模块”这个术语难道不意味着模块不需要外部重新定义吗？

2. 是否有方法解决这个问题？我的脚本非常简单，我只是尝试使用node.js的基本函数，所以我无法弄清楚可能出错的原因。

如果有人遇到了这个问题并找到了解决方法或原因，请帮忙解答。

- Kantharis

---

大家好！感谢大家仍然尝试回答这个问题！这个问题现在可能已经不再适用于当前的工具，因为六年过去了，在此期间Web应用技术取得了巨大进步，开发过程也大大简化了。不过，有时候它仍然是有效的，这很有趣。 - Kantharis

Answer 1

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

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)
}

- Makc

---

不知道为什么，在把一个项目的 webpack 从 3 升级到 5（CLI 从 3 升级到 4）时，我突然需要这个东西了。谢谢！ - n8jadams

非常好的提示，它帮助我解决了Firebase客户端凭据由我们运行的APP环境确定的问题。 - Jean Costa

不知道怎么做，但我需要收藏这个答案。 - ndotie

是的。dotenv-webpack 是一个很好的方法来实现这一点。https://www.npmjs.com/package/dotenv-webpack - ginna

Answer 2

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

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

node server.js

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

您可以按照使用Express作为HTTP服务器模块的简单示例进行操作：http://expressjs.com/starter/hello-world.html。

- greuze

---

我正在使用命令“npm start”，它指的是package.json中设置为“start”：“http-server -a localhost -p 8000 -c-1”的“start”脚本，因此它基本上会运行到我创建的本地服务器。但是，我收到“process is not defined”的错误提示。所以问题肯定不在这里。谢谢。 - Kantharis

在脚本的/start属性中，我通常会写类似这样的内容："start": "node server.js"。如果你直接有一个 node.js 脚本，那么第一行必须是 "#!/usr/bin/env node" 或类似的内容。 不过，尝试使用 node 命令直接运行可能会澄清问题。请发布代码以便更好地理解问题。 - greuze

Answer 3

以下是解决 Uncaught ReferenceError: process is not defined 的方法：

1. 如果您使用的是 CRA（create react app），请使用 process.env.
2. 如果您使用的是 ViteJS，请使用 import.meta.env.

在此处阅读有关如何在 Vite 中导入 env 进程的更多信息：https://vitejs.dev/guide/env-and-mode.html

示例：

CRA: process.env.API_BASE_URL

Vite: import.meta.env.VITE_API_BASE_URL

- jhon26

Answer 4

如果您遇到此问题并且正在使用webpack，则可以通过在webpack.config.js中使用DefinePlugin将所需的process数据注入客户端包来解决。

下面的示例展示了如何添加几个内容到process.env对象中，以便在浏览器中使用：

1. 使用库dotenv获取.env中的所有环境变量
2. 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文档：

警告：在定义process的值时，优先使用

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

而不是

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

使用后者将覆盖process对象，可能会破坏某些模块对process对象的其他值的兼容性。

！警告！

按照描述将dotenv.parsed注入客户端包将向客户端公开这些机密。 对于开发目的，这并不是大问题，但在部署的生产环境中，任何密码或私有API密钥都将对寻找它们的任何人可见。

- taco_friday

Answer 5

我遇到了这个问题，尝试根据其他建议调整webpack.config.js文件并不能解决它。我怀疑我使用的某些包在浏览器中编写不正确，或者我的环境存在问题。

最终，我通过在HTML文件中添加以下代码来“修复”它，放在所有其他<script>文件引用之前。

    <script>
        // Required by some npm packages
        window.process = { browser: true, env: { ENVIRONMENT: 'BROWSER' } };
    </script>

- George

---

这个解决方案也为我解决了这个错误。如果你正在使用React，在public文件夹中打开你的index.html文件，将上面的代码复制粘贴到你的index.html文件中，重新启动你的IDE和服务器。 - Martin Oputa

这个解决方案也为我解决了这个错误。如果你正在使用React，在public文件夹中打开你的index.html文件，将上面的代码复制粘贴到你的index.html文件中，重新启动你的IDE和服务器。 - undefined

Answer 6

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

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

更多说明

- Lameck Meshack

---

这不会消除运行时错误，对吗？ - sureshvv

Answer 7

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

这个链接真的很有用https://eslint.org/docs/user-guide/configuring#specifying-globals。

- Oluwatobi Lesi

---

嘿，Oluwatobi！欢迎来到SOF。对于未来的答案，我的个人建议是添加一些代码或者通过粘贴代码片段来解释事情。 - Alwaysblue

嘿@Oluwatobi，你的方法看起来很有趣。你能否添加你的工作.eslintrc文件？ - zeamedia

Answer 8

我在本地热重载的Quasar（Vue）应用程序中调用特定端点时遇到此错误（Uncaught ReferenceError: process is not defined）。 对我来说，问题的解决方法是重新启动热重载服务器（自添加process.env.MY_VARIABLE代码以来，我还没有重新加载它）。

- Nathan Wailes

---

提供了很多无用的变通方法，而这个方法确实救了我。谢谢。 - Organic

Answer 9

我曾在尝试创建一个Node.js应用时遇到同样的问题：https://www.youtube.com/watch?v=mr9Mtm_TRpw。在HTML中，通过<script>标签引入的require未定义，如下所示：

<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
    }
});

我希望这有所帮助。

- Zeghra

---

这是针对Electron的，而问题说明它是一个Web应用程序。 - paddotk

Answer 10

在webpack 5+配置文件的插件部分中添加ProvidePlugin：

plugins: [
  ...,
  new webpack.ProvidePlugin({
    process: 'process/browser',
    Buffer: ['buffer', 'Buffer']
  }),
  ...
]

- Per Quested Aronsson

---

这对我起作用了！ - jiamijiang