No warning about Node globals being used
Created by: Andrewmat
Describe the bug
In Webpack 5, there is no automatic polyfills for Node globals. This means an CRA application cannot use them, since it will break in runtime
Despite this, in a CRA app there is no warning in code analysis in using Node globals, like Buffer
, both in Typescript and ESLint
In my tests, I configured ESLint with env: { node: false }
. This fixes plain JS files, but it does not work for TS files, since it uses @types/node
that is dependency of react-scripts
itself.
I tried modifying tsconfig.json
fields types
and typeRoots
, with no success. The only way to warn against using Node globals here is to use ESLint no-restricted-globals
rule
Considering this, what I suggest is to
- disable node environment in eslint config
- Ignore
@types/node
for application code
Related to https://github.com/facebook/create-react-app/issues/12072. But this issue considers to prevent usage of Node globals.
In my use case, I have an medium-sized application in React Scripts 4, I upgraded it to React Scripts 5, fixed all the warnings, tested the app and thought it was safe to deploy. But a component broke in production, it used Buffer
to transform an ArrayBuffer into b64 using Buffer.from(arrayBuffer).toString('base64')
Did you try recovering your dependencies?
I reproduced with an project bootstraped right now
Which terms did you search for in User Guide?
I looked out for Node
and Buffer
in docs and github issues
Environment
Environment Info:
current version of create-react-app: 5.0.1
running from /home/andrematulionis/.config/yarn/global/node_modules/create-react-app
System:
OS: Linux 5.14 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
Binaries:
Node: 14.21.3 - /tmp/yarn--1677178365353-0.24095538447135056/node
Yarn: 1.22.18 - /tmp/yarn--1677178365353-0.24095538447135056/yarn
npm: 6.14.18 - ~/.nvm/versions/node/v14.21.3/bin/npm
Browsers:
Chrome: 109.0.5414.74
Firefox: Not Found
npmPackages:
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
react-scripts: 5.0.1 => 5.0.1
npmGlobalPackages:
create-react-app: Not Found
Steps to reproduce
The steps are simple
- bootstrap an application with typescript
yarn create react-app --template=typescript
- Add
console.log(Buffer)
toApp.tsx
- Add
"env": { "node": false }
inpackage.json
fieldeslintConfig
Expected behavior
I think a static analysis tool that CRA uses should by default warn that a Node global should not be accessed. Typescript or ESLint, either way, it should not build if the runtime breaks
Actual behavior
The only warning emitted was in Chrome console, after breaking the app runtime
Reproducible demo
I have a reproduction repo in here: https://github.com/Andrewmat/cra-issue-lint-node-types