在react中使用process.env

如果是生产或开发环境，我将尝试动态分配IP地址。

react是通过Django应用程序提供的。

.env在react应用程序的根项目中，与package.json文件处于同一级别

REACT_APP_AXIOS_URL=127.0.0.1:8000

我这样称呼它

require('dotenv').config()
const API_URL = process.env.REACT_APP_AXIOS_URL
console.log(API_URL)

我在控制台中得到以下错误：

main.js:83 Uncaught ReferenceError: process is not defined
at Object.config (main.js:83)
at eval (index.js:13)
at Object../src/index.js (main.js:700)
at __webpack_require__ (main.js:2244)
at main.js:2489
at main.js:2491

有人能告诉我我做错了什么吗？

额外信息：

这是我的包.json

{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --entry ./src/index.js --output-path ./static/",
"prod": "webpack --mode production --entry ./src/index.js --output-path ./static/"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "^6.3.0",
"file-loader": "^6.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sass-loader": "^12.1.0",
"style-loader": "^3.3.0",
"url-loader": "^4.1.1",
"web-vitals": "^2.1.0",
"webpack": "^5.55.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {
"axios": "^0.21.4",
"bootstrap": "^5.1.1",
"crypto-browserify": "^3.12.0",
"dotenv": "^10.0.0",
"react-bootstrap": "^2.0.0-rc.0",
"react-dropzone": "^11.4.2",
"react-router-dom": "^5.3.0",
"ts-node": "^10.3.0"
}
}

React是使用Dockerfile 设置的

RUN apt-get update 
&& apt-get install -y curl 
&& curl --silent --location https://deb.nodesource.com/setup_12.x | bash - 
&& apt-get install -y nodejs 
&& npm install --silent
&& npm install react-scripts@4.0.3 -g --silent

然后我开始使用以下进行反应

(cd frontend/src && npm run dev)

这是我的webpack.config.js

module.exports = {
resolve: {
fallback: {
"os": false,
"fs": false,
"tls": false,
"net": false,
"path": false,
"zlib": false,
"http": false,
"https": false,
"stream": false,
"crypto": false,
"crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify
}
},
module: {

rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
]
}
};