Build error for WeakRef Class

[jamesgjt]

Hi,

I use create-react-app to create the app for me, and I have create some js file that use the WeakRef class in my react app.
When I run npm start command, it is running fine and able to compile.
However, when I run npm run build for the project. the eslint compiler failed to compile with error message WeakRef is not defined

Anyone encounter this behavior?

[NourMoftah]

WeakRef is a built-in JavaScript global (ES2021), so the error is usually caused by ESLint not recognizing it rather than React itself.

A few things to check:

1. Make sure your environment supports WeakRef (Node.js 14.6+ and modern browsers).
2. Update your ESLint configuration to use a modern ECMAScript version, for example:

{
  "parserOptions": {
    "ecmaVersion": 2021
  },
  "env": {
    "es2021": true
  }
}

3.If you're using create-react-app, ensure you're on the latest react-scripts version, as older ESLint configurations may not recognize newer globals.

If the problem only occurs during npm run build, please share:

Your react-scripts version
Your Node.js version
Any custom ESLint configuration (.eslintrc or eslintConfig in package.json)

[Tanx-1811]

This is most likely an ESLint configuration issue rather than a React or JavaScript runtime issue.

WeakRef is a relatively new JavaScript global. npm start can work because the code is executed by the browser, while npm run build runs ESLint as part of the production build and ESLint may not recognize WeakRef as a predefined global.

You can try adding the appropriate ECMAScript environment to your ESLint configuration.

For example, in .eslintrc:

{
  "env": {
    "es2021": true,
    "browser": true
  }
}

Or, if you're using an ESLint configuration where globals is supported, explicitly define it:

{
  "globals": {
    "WeakRef": "readonly"
  }
}

Also make sure your ESLint version/parser supports the ECMAScript version that introduced WeakRef.

If you're using Create React App's default ESLint configuration and cannot modify the config directly, you may need to update the relevant react-scripts/ESLint version or use the supported ESLint configuration override.

WeakRef itself is supported by modern browsers, so the fact that npm start works does not necessarily mean the production build's ESLint configuration will recognize it.