[英]Module not found: Error: Can't resolve 'fs' in dotenv/lib
All of a sudden, when creating a react production build, I get this error.突然之间,在创建 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'
I have searched on the web, found similar cases but different frameworks of which all were not of help in regards to this issue.我在 web 上搜索过,发现类似的案例,但不同的框架都对这个问题没有帮助。
I have tried to uninstall dotenv and reinstall it again but i get the same error.我试图卸载 dotenv 并重新安装它,但我得到了同样的错误。 I'm not sure what could be the problem understanding that fs module is part of nodejs and comes bundled with it
我不确定理解 fs 模块是 nodejs 的一部分并与之捆绑在一起可能是什么问题
To solve this:要解决这个问题:
No need of dotenv for your React app.您的 React 应用程序不需要 dotenv。
I solved the same problem;我解决了同样的问题;
npm install dotenv-webpack --save-dev
.env
file under root folder.env
文件env
variable asenv
变量为REACT_APP_YOURVARIABLE=itsvalue
const Dotenv = require('dotenv-webpack');
module.exports = {
plugins: [
new Dotenv()
]
}
.env
write.env
中使用变量的地方写process.env.REACT_APP_YOURVARIABLE
There is no need to import dotenv
.无需导入
dotenv
。 It is already done in webpack.config.js
它已经在
webpack.config.js
中完成
1- As already mentioned by Stéphane Sulikowski, No need to use dot-env
in react projects 1- 正如 Stéphane Sulikowski 已经提到的,无需在 React 项目中使用
dot-env
Why?为什么?
"dot-env" uses some modules that are only supported by nodejs but not supported by "browser engines" like fs, os etc. React-code-bundle runs in the browser and the browser doesn't support module "fs", so if any modules reference the "fs" module will get the same error.
“dot-env”使用了一些仅被nodejs支持但不被“浏览器引擎”支持的模块,如fs,os等。React-code-bundle在浏览器中运行并且浏览器不支持模块“fs”,所以如果任何模块引用“fs”模块将得到相同的错误。
There is some inbuilt support by reactjs to use environment variables stored in a
.env
file and begins withREACT_APP_
reactjs 提供了一些内置支持,以使用存储在
.env
文件中并以REACT_APP_
开头的环境变量
2- If you have to use it for some reason use "env-cmd" 2- 如果出于某种原因必须使用它,请使用“env-cmd”
npm install env-cmd
3- create environment specific.env files like .env.local
OR .env
3- 创建环境特定的 .env 文件,如
.env.local
或.env
4- In your "environment specific" OR .env
file, add variables beginning with REACT_APP_
4- 在您的“环境特定”OR
.env
文件中,添加以REACT_APP_
开头的变量
REACT_APP_API_BASE_URL="http://localhost:4000"
REACT_APP_API_BASE_URL="http://localhost:4000"
5- Use these environment variables in your code files like console.warn (process.env.REACT_APP_API_BASE_URL)
5- 在代码文件中使用这些环境变量,例如
console.warn (process.env.REACT_APP_API_BASE_URL)
6- OPTIONALLY...... configure package.json something like this 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"
}
Note - When you add a new variable in .env....
files, you have to run npm start
OR related...注意 - 当您在
.env....
文件中添加新变量时,您必须运行npm start
OR related...
If you are using create-react-app this article describes the behavior of environment variables: https://create-react-app.dev/docs/adding-custom-environment-variables/如果您使用的是 create-react-app,本文介绍了环境变量的行为: https://create-react-app.dev/docs/adding-custom-environment-variables/
Note that the document frequently reminds you of this warning:请注意,该文档经常提醒您以下警告:
WARNING: Do not store any secrets (such as private API keys) in your React app!
警告:不要在你的 React 应用程序中存储任何秘密(例如私有 API 密钥)!
Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
环境变量嵌入到构建中,这意味着任何人都可以通过检查您的应用程序文件来查看它们。
To securely use secrets such as passwords and tokens, consider setting up a server that can deliver this data to the frontend via HTTP. For example, once users authenticate into your app you send their credentials to a microservice that can validate their identity and return an API key or session to be used for subsequent REST API calls.为了安全地使用密码和令牌等秘密,请考虑设置一个服务器,该服务器可以通过 HTTP 将此数据传送到前端。例如,一旦用户在您的应用程序中进行身份验证,您就将他们的凭据发送到一个微服务,该微服务可以验证他们的身份并返回一个API 密钥或 session 用于后续 REST API 调用。
Just like Reno mentioned just create your.env at the root with the name prepended with REACT_APP and it will work out of the box Example .env
file就像Reno提到的那样,只需在根目录下创建 your.env,名称前加 REACT_APP 即可开箱即用 Example
.env
文件
REACT_APP_GITHUB_API_URL=https://api.github.com/graphql
REACT_APP_GITHUB_API_URL=https://api.github.com/graphql
Usage:用法:
process.env.REACT_APP_GITHUB_API_URL
process.env.REACT_APP_GITHUB_API_URL
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.