描述bug
我创建了一个全新的CRA5项目(TypeScript),除了在项目根目录中添加了.env文件,并修改了src/App.tsx以尝试访问process.env
变量。我遇到了未处理的异常process is undefined
。我认为这与Webpack 5升级有关。
你是否尝试恢复依赖项?
没有,因为项目是全新的create-react-app v5 Bootstrap 。
你在用户指南中搜索了哪些术语?
https://create-react-app.dev/docs/adding-custom-environment-variables/说一切都应该正常工作。
环境
Environment Info:
current version of create-react-app: 5.0.0
running from /Users/evgenijvladimirovic/.npm/_npx/33863/lib/node_modules/create-react-app
System:
OS: macOS 12.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 14.16.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.11 - /usr/local/bin/npm
Browsers:
Chrome: 97.0.4692.71
Edge: Not Found
Firefox: 94.0.2
Safari: 15.2
npmPackages:
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
react-scripts: 5.0.0 => 5.0.0
npmGlobalPackages:
create-react-app: Not Found
重现步骤
npx create-react-app my-app --template typescript
- 在项目根目录中添加.env文件,并添加一行
REACT_APP_FOO=foo
- 以某种方式尝试访问
process.env.REACT_APP_FOO
(或仅访问process
本身)。例如,我在JSX中添加了console.log("process is ", process);
和{process.env.REACT_APP_FOO}
。
预期行为
我从.env
文件中获取了REACT_APP_FOO
值,就像在CRA文档中一样:
实际行为
我得到了未处理的异常:
7条答案
按热度按时间arknldoa1#
随着CRA 5的发布,webpack升级到了v5版本,其中移除了一些node内置模块(如
process
)。你可以选择将应用踢出,但这并不理想,或者使用类似craco的方法来配置webpack与未踢出的create-react-app。
有一个open pull request可以解决这个问题。
31moq8wy2#
我们还发现,在当前情况下,CRA5几乎无法使用。
我们执行了弹出操作,安装了
process
,并在webpack配置中添加了以下行:eqqqjvef3#
我们也在考虑驱逐,除非 #11764 会被合并。但目前它存在冲突。
更新:我们已经驱逐了 :D
dauxcl2d4#
同样的问题,暂时退回到4.0.3版本。我刚开始使用CRA,这个基本的bug让人有些不安。有没有针对测试webpack包运行的测试来检查这类问题?
ejk8hzay5#
这可能是eslint的问题。我遇到了相同的问题,并使用以下代码更新了.eslintrc文件中的env部分,这样我就能够访问本地存储和进程的node API和windows API链接。你不需要弹出或添加CRACO。另外,craco仍然没有扩展到CRA 5的支持。测试表明我能够访问变量
。
guykilcj6#
请查看以下内容:#12374 (评论)
w41d8nur7#
看到这个问题,它引起了我的关注,所以我进行了一些调查。请记住,我对webpack一无所知,所以很可能遗漏了一些东西。
在示例仓库@ru-web-designer中,当我删除
console.log(process)
后,项目立即加载。这对我来说似乎很奇怪,所以我查看了webpack配置,看起来像是使用这个in. https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/env.js来加载环境变量的。
所以在我看来,他们使用
DefinePlugin
来加载环境变量,而不是依赖于node内置的。这似乎可以解释为什么process
是未定义的,但具体来说是process.env
。希望这有所帮助。