'BigInt' is not defined

[scibuff]

Describe the bug

The JavaScript/ES2020 native BigInt is not available in the latest create-react-app on Node 20, but

node -e 'console.log(BigInt(42))'

correctly outputs 42n

but npm start or yarn start fail with an error

'BigInt' is not defined  no-undef 

Did you try recovering your dependencies?

There are no dependencies other than the originally added/installed by create-react-app

Which terms did you search for in User Guide?

• BigInt
• BigInt react is not defined
• BigInt yarn v1 is not defined
• BigInt npm yarn node 20
• react-scripts BigInt is not defined
• create-react-app bigint support
• BigInt browser compatibility
• BigInt node requirements
• BigInt ES2020
• jsconfig es2020

Environment

Environment Info:

  current version of create-react-app: 5.0.1
  running from /usr/local/lib/node_modules/create-react-app

  System:
    OS: Linux 5.10 Alpine Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
  Binaries:
    Node: 20.4.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.8.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 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: 5.0.1

Steps to reproduce

1. Create a new node 20 docker container docker run --rm -it --entrypoint sh node:20-alpine

2. Install git, nano, and create-react-app in the container (I dislike using vim)

# apk add git nano
# npm install -g create-react-app

3. Create a new react app npx create-react-app bigint

4. Add BigInt into the index.js code

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

console.log(BigInt(42));
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

5. Save index.js
6. Run npm start or yarn start

Failed to compile.

[eslint]
src/index.js
  Line 7:13:  'BigInt' is not defined  no-undef        

Search for the keywords to learn more about each error.
ERROR in [eslint]
src/index.js
  Line 7:13:  'BigInt' is not defined  no-undef        

Search for the keywords to learn more about each error.

webpack compiled with 1 error

Expected behavior

The compilation should not failed and the development server should start. Upon loading http://localhost:3000 (by default) the browser console should have an etry for 42n

Actual behavior

Reproducible demo

https://codesandbox.io/s/react-bigint-undefined-3mmh66?file=/src/App.js

[codecventer]

Try installing Node.js with the experimental flag:

node --experimental-bigint app.js

[scibuff]

Try installing Node.js with the experimental flag:

node --experimental-bigint app.js

Thank you for such a quick response. Unfortunately, unless I misunderstand something I don't think this is relevalt. There's no issue with node ... as I mentioned, node -e 'console.log(BigInt(42))' works perfectly fine (same result if I put it into a file and run node myfile.js). The issue is with npm start and yarn start running the react-scripts

So I assume the issue is with react-scripts start doing something which breaks the ES2020's BigInt

[jorniks]

Hi @scibuff, were you able to find a solution for this issue? I am facing a similar issue running react: 18.2.0 cra-template: 1.2.0 on NodeJS 18.17.0

[scibuff]

I did get it to work but right now Im not 100% what the key was. Trying creating .eslintrc.js in the main folder (same as package.json) with the following

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["eslint:recommended", "plugin:react/recommended"],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
  ],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {},
};

I have the following lint dev dependencies:

• "eslint": "^8.46.0",
• "eslint-plugin-react": "^7.33.0"