Skip to content

No warning about Node globals being used #13032

@Andrewmat

Description

@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

image

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

  1. disable node environment in eslint config
  2. Ignore @types/node for application code

Related to #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

  1. bootstrap an application with typescript yarn create react-app --template=typescript
  2. Add console.log(Buffer) to App.tsx
  3. Add "env": { "node": false } in package.json field eslintConfig

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

image

Reproducible demo

I have a reproduction repo in here: https://github.com/Andrewmat/cra-issue-lint-node-types

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions