Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Issues
  • #13032
Closed
Open
Issue created Feb 23, 2023 by Administrator@rootContributor

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

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 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

  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

Assignee
Assign to
Time tracking