找不到模块：错误：无法解析 dotenv/lib 中的“fs”

Question

突然之间，在创建 React 生产版本时，出现此错误。

> safe-courier@0.1.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'fs' in '/workspace/safe-courier/client/node_modules/dotenv/lib'

我在 web 上搜索过，发现类似的案例，但不同的框架都对这个问题没有帮助。

我试图卸载 dotenv 并重新安装它，但我得到了同样的错误。 我不确定理解 fs 模块是 nodejs 的一部分并与之捆绑在一起可能是什么问题

Answer 1

要解决这个问题：

1. 在你的应用程序的根级别创建 .env 文件
2. 以 REACT_APP_ 开头命名您的变量 // 这是关键！
3. 每次更改 env 变量时使用 npm start 重新启动服务器
4. 将您的变量与 process.env.NAMEOFYOURVARIABLE 一起使用

您的 React 应用程序不需要 dotenv。

Answer 2

我解决了同样的问题；

1. npm install dotenv-webpack --save-dev
2. 在根文件夹下创建.env文件
3. 创建env变量为

REACT_APP_YOURVARIABLE=itsvalue

4. 在根文件夹下创建 webpack.config.js 文件，内容如下

const Dotenv = require('dotenv-webpack');
module.exports = {
    plugins: [
        new Dotenv()
    ]
}

5. 然后在任何你想在.env中使用变量的地方写

process.env.REACT_APP_YOURVARIABLE

无需导入dotenv 。 它已经在webpack.config.js中完成

Answer 3

1- 正如 Stéphane Sulikowski 已经提到的，无需在 React 项目中使用dot-env

为什么？

“dot-env”使用了一些仅被nodejs支持但不被“浏览器引擎”支持的模块，如fs，os等。React-code-bundle在浏览器中运行并且浏览器不支持模块“fs”，所以如果任何模块引用“fs”模块将得到相同的错误。

reactjs 提供了一些内置支持，以使用存储在.env文件中并以REACT_APP_开头的环境变量

2- 如果出于某种原因必须使用它，请使用“env-cmd”

npm install env-cmd

3- 创建环境特定的 .env 文件，如.env.local或.env

4- 在您的“环境特定”OR .env文件中，添加以REACT_APP_开头的变量

REACT_APP_API_BASE_URL="http://localhost:4000"

5- 在代码文件中使用这些环境变量，例如console.warn (process.env.REACT_APP_API_BASE_URL)

6-可选......配置package.json这样的东西

...

"scripts": {
    "start": "env-cmd -f .env.local react-scripts start",
    "build:staging": "env-cmd -f .env.staging react-scripts build",
    "build:production": "env-cmd -f .env.production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

注意 - 当您在.env....文件中添加新变量时，您必须运行npm start OR related...

Answer 4

如果您使用的是 create-react-app，本文介绍了环境变量的行为： https://create-react-app.dev/docs/adding-custom-environment-variables/

请注意，该文档经常提醒您以下警告：

警告：不要在你的 React 应用程序中存储任何秘密（例如私有 API 密钥）！

环境变量嵌入到构建中，这意味着任何人都可以通过检查您的应用程序文件来查看它们。

为了安全地使用密码和令牌等秘密，请考虑设置一个服务器，该服务器可以通过 HTTP 将此数据传送到前端。例如，一旦用户在您的应用程序中进行身份验证，您就将他们的凭据发送到一个微服务，该微服务可以验证他们的身份并返回一个API 密钥或 session 用于后续 REST API 调用。

Answer 5

就像Reno提到的那样，只需在根目录下创建 your.env，名称前加 REACT_APP 即可开箱即用 Example .env文件

REACT_APP_GITHUB_API_URL=https://api.github.com/graphql

用法：

process.env.REACT_APP_GITHUB_API_URL