[BUG] Unable to resolve reference $react #5730

Bow2Jesus · 2022-10-20T22:00:17Z

Is there an existing issue for this?

I have searched the existing issues

This issue exists in the latest npm version

I am using the latest npm

Current Behavior

I am attempting to run npm install to create the node_modules folder with nodes and package-lock.json file from the package.json file. When I run npm install it returns this error message "npm ERR! Unable to resolve reference $react".

Expected Behavior

Since I have react and its version defined in my dependencies, then I expect npm to resolve the reference to react and finish processing my package.json file.

Steps To Reproduce

In this environment: Windows 10
With this config (package.json):

{
  "name": "rover-web-app",
  "version": "0.0.1-SNAPSHOT",
  "dependencies": {
    "@handsontable/react": "^4.0.0",
    "@mui/material": "^5.10.10",
    "@mdi/font": "^4.5.95",
    "@typescript-eslint/eslint-plugin": "^5.40.1",
    "@typescript-eslint/parser": "^5.40.1",
    "@typescript-eslint/visitor-keys": "^5.40.0",
    "acorn": "^8.8.0",
    "ajv": "^8.11.0",
    "ajv-keywords": "^5.1.0",
    "axios": "^1.1.3",
    "axios-mock-adapter": "^1.17.0",
    "bootstrap": "^4.3.1",
    "classnames": "^2.3.2",
    "connected-react-router": "^6.9.3",
    "core-js": "^3.25.5",
    "csv": "^5.1.3",
    "csv-string": "^3.1.6",
    "cypress": "^10.10.0",
    "cypress-localstorage-commands": "^2.2.1",
    "debug": "^4.3.4",
    "ensure-array": "^1.0.0",
    "eslint": "^8.25.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-react-app": "^7.0.1",
    "eslint-webpack-plugin": "^3.2.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-visitor-keys": "^3.3.0",
    "handsontable": "^8.0.0",
    "history": "^4.10.1",
    "jest": "^24.9.0",
    "jquery": "^1.12.4",
    "jwt-decode": "^3.1.1",
    "match-sorter": "^4.1.0",
    "mdi-react": "^5.6.0",
    "moment": "^2.24.0",
    "node": "^16.13.2",
    "node-sass": "^4.14.1",
    "npm": "^8.19.2",
    "popper.js": "^1.16.1",
    "prop-types": "^15.8.1",
    "rc-checkbox": "^2.3.2",
    "rc-steps": "^3.6.0",
    "react": "^18.2.0",
    "react-app-polyfill": "^1.0.6",
    "react-big-calendar": "^1.5.0",
    "react-bootstrap": "^1.6.6",
    "react-circular-progressbar": "^2.1.0",
    "react-cookies": "^0.1.1",
    "react-data-grid": "^6.1.0",
    "react-datepicker": "^4.8.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^10.2.2",
    "react-feather": "^1.1.6",
    "react-highlight-words": "^0.18.0",
    "react-infinite-scroll-component": "^4.5.3",
    "react-input-autosize": "^3.0.0",
    "react-new-window": "^0.2.2",
    "react-perfect-scrollbar": "^1.5.8",
    "react-popout": "^3.0.2",
    "react-redux": "^7.2.9",
    "react-router": "^5.3.4",
    "react-router-dom": "^5.3.4",
    "react-scripts": "^3.1.1",
    "react-select": "^5.4.0",
    "react-splitter-layout": "^4.0.0",
    "react-table": "^7.8.0",
    "react-table-6": "^6.11.0",
    "react-test-renderer": "^18.2.0",
    "react-toastify": "^5.5.0",
    "recharts": "^1.8.5",
    "redux": "^4.2.0",
    "redux-mock-store": "^1.5.3",
    "redux-thunk": "^2.3.0",
    "rsuite": "^4.1.5",
    "sass-loader": "^8.0.0",
    "styled-components": "^4.3.2",
    "tsutils": "^3.21.0",
    "typescript": "^4.8.4"
  },
  "optionalDependencies": {
    "fsevents": "^2.3.2"
  },
  "scripts": {
    "start": "set PORT=3456 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "pre-deploy": "REACT_APP_STAGE=DEV npm run build",
    "test:CI": "CI=true react-scripts test --env=jsdom",
    "server": "node-env-run server --exec nodemon | pino-colada",
    "dev": "run-p server start",
    "eject": "react-scripts eject",
    "coverage": "react-scripts test --env=jsdom --watchAll=false --coverage"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@testing-library/react": "^8.0.1",
    "@testing-library/react-hooks": "^8.0.1",
    "@types/jest": "^24.0.19",
    "body-parser": "^1.19.0",
    "cookie-parser": "^1.4.4",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jest": "^22.19.0",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-standard": "^4.0.1",
    "express": "^4.17.1",
    "express-pino-logger": "^4.0.0",
    "jest-cli": "^24.9.0",
    "jest-enzyme": "^7.1.1",
    "node-env-run": "^3.0.2",
    "nodemon": "^2.0.1",
    "npm-run-all": "^4.1.5",
    "pino": "^5.13.4",
    "pino-colada": "^1.5.0",
    "react-addons-test-utils": "^15.6.2",
    "react-select-event": "^4.1.2",
    "reactstrap": "^8.0.1",
    "request": "^2.88.0"
  },
  "overrides": {
	"react": "$react",
	"react-dom" : "$react-dom",
	"react-test-renderer" : "$react-test-renderer"
  },
  "proxy": "http://localhost:3001"
}

Run 'npm install'
See error: "npm ERR! Unable to resolve reference $react"

Environment

npm: 8.19.2
Node.js: 16.18.0
OS Name: Windows 10
System Model Name: Dell Precision 7560
npm config:
; "builtin" config from C:\Program Files\nodejs\node_modules\npm\npmrc

prefix = "C:\Users\i338909\AppData\Roaming\npm"

; "user" config from C:\Users\i338909.npmrc

http_proxy = "http://bcproxy.hcscint.net:8080"
https_proxy = "http://bcproxy.hcscint.net:8080"
proxy = "http://bcproxy.hcscint.net:8080/"
registry = "http://nexus.fyiblue.com/repository/npm-all/"
scripts-prepend-node-path = true
strict-ssl = true

; node bin location = C:\Program Files\nodejs\node.exe
; node version = v16.18.0
; npm local prefix = C:\NMP_TEST\rover-web-app-test
; npm version = 8.19.2
; cwd = C:\NMP_TEST\rover-web-app-test
; HOME = C:\Users\i338909
; Run npm config ls -l to show all defaults.

The text was updated successfully, but these errors were encountered:

wraithgar · 2022-10-27T14:03:12Z

That appears to be an invalid overrides section. The syntax for overrides requires a proper package spec, not a $ prefixed string.

Bow2Jesus · 2022-10-28T15:25:42Z

The $prefix is right from the NPM package documentation: https://docs.npmjs.com/cli/v8/configuring-npm/package-json/

lukekarrys · 2022-11-10T20:55:36Z

I also ran into this issue on the npm/documentation. Currently the install fails with the same message on 9.1.1 but works on 8.19.3.

{
  "name": "npm-documentation",
  "repository": "npm/documentation",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "develop": "gatsby develop",
    "build": "NODE_OPTIONS=--max-old-space-size=5376 gatsby build",
    "serve": "gatsby serve"
  },
  "workspaces": [
    "cli/",
    "theme/"
  ],
  "dependencies": {
    "gatsby": "^4.24.4",
    "gatsby-plugin-meta-redirect": "^1.1.1",
    "theme": "*",
    "react": "^16.14.0",
    "react-dom": "^16.14.0"
  },
  "overrides": {
    "react": "$react"
  },
  "templateOSS": {
    "rootRepo": false,
    "rootModule": false,
    "workspaces": [
      "cli"
    ],
    "version": "4.6.2"
  }
}

juancarlosjr97 · 2022-11-24T17:24:33Z

I have this bug too and I can reproduce it quickly with node v18.12.0 and npm v9.1.2 with this package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@storybook/csf": "next"
  },
  "overrides": {
    "@storybook/csf": "next"
  }
}

And after downgrading to [email protected] it works as expected.

What I noticed is the problem comes when the version is using a tag instead of a version, for example

This fails ❌

{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@storybook/csf": "next"
    },
    "overrides": {
        "@storybook/csf": "$@storybook/csf"
    }
}

This works ✅

{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@storybook/csf": "^0.0.2-next.7"
    },
    "overrides": {
        "@storybook/csf": "$@storybook/csf"
    }
}

juancarlosjr97 · 2022-12-08T10:15:52Z

This is still a problem on v9.2.0 :(

edtbl76 · 2023-02-05T21:43:13Z

I see the same problem w/ 8.19.3

mon-jai · 2023-02-15T12:15:54Z

Just went into the same bug with 9.3.1.

The following doesn't work,

{
  // ...
  "dependencies": {
    "@babel/core": "^7.20.12"
  },
  "devDependencies": {
    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
  },
  "overrides": {
    "@trivago/prettier-plugin-sort-imports": {
      "@babel/core": "$@babel/core",
      "@babel/parser": "$@babel/core",
      "@babel/traverse": "$@babel/core"
    }
  }
}

But this do work,

{
  // Same as above
  "overrides": {
    "@trivago/prettier-plugin-sort-imports": {
      "@babel/core": "^7.20.12",
      "@babel/parser": "$@babel/core",
      "@babel/traverse": "$@babel/core"
    }
  }
}

callumnewlands · 2023-03-13T17:28:10Z

I had the same issue with npm versions 9.2.0 and 9.6.1 and managed to work around it by changing all self-referencing overrides (like react: "$react") to use the version number specified in "dependencies", running npm i to re-generate the package-lock.json file (after deleting it -- though not sure if that was necessary) and then I could change back to react: "$react" and no longer received the error

e.g. change

...
"overrides": {
        "react-native": {
            "react": "$react"
        },
        "craco-less": {
            "react": "$react",
            "react-dom": "$react",
            "@craco/craco": "$@craco/craco"
        }
    }
...

to

...
"overrides": {
        "react-native": {
            "react": "^17.0.2"
        },
        "craco-less": {
            "react": "^17.0.2",
            "react-dom": "$react",
            "@craco/craco": "$@craco/craco"
        }
    }
...

re-generate the package-lock.json, and then change the package.json back again

Hopefully helps someone debug the issue or at least work around it for now

callumnewlands · 2023-03-13T17:29:34Z

Also, this seems like a re-occurrence of #4395 which is marked as closed but seems to still be present in npm 9.6.1

faustus7 · 2023-03-18T01:17:33Z

We were running into this weird behaviour with certain $<package name> references in overrides being unrecognised under the following circumstances:

--legacy-peer-deps (via the cli or config, or perhaps just NPM version <= 6) had previously been (re)used to touch the package-lock.json
Extra "debug": true were marked on packages that would not have them normally with a plain npm install

The solution to fixing this was:

Stop all repo contributors from using --legacy-peer-deps, or NPM version <= 6, to update package-lock.json
First set the overrides to use explicit version matching to update package-lock.json (this could end up removing "debug": trues)
Then follow up by setting the desired overrides to $<package name> version references and update the package-lock.json – as highlighted by @callumnewlands above

If this issue pops up again in a repo, it is probably because someone used --legacy-peer-deps to update the package-lock.json.

dstaley · 2023-03-21T19:44:41Z

Just as an additional point of reference, I can reproduce this issue without node_modules and package-lock.json, so this might actually be a combination of several different issues.

orgads · 2023-03-23T14:17:06Z

I have an example that fails with npm 9.6.2:

{
  "name": "override",
  "dependencies": {
    "ts-jest": "^29.0.5",
    "typescript": "^5.0.2"
  },
  "overrides": {
    "typescript": "$typescript"
  }
}

Without ts-jest it works.

Might be related - ts-jest has peerDependency: "typescript": ">=4.3"

jensbodal · 2023-06-14T22:22:05Z

Temporary solution I've found is to delete the override, install, then add back the override, then install again.

McFoggy · 2023-07-04T08:43:55Z

If this issue pops up again in a repo, it is probably because someone used --legacy-peer-deps to update the package-lock.json.

We faced this again with correct package-lock.json and only solution for us was to replace references in overrides to use same versions than the ones in dependencies/devDependencies/peerDependencies

using node v18.15.0 (npm v9.5.0)

THETCR · 2023-07-09T13:52:20Z

When another top level dependency requires the overridden dependency and is resolved before the overridden one, the reference has not been created yet.

{
  "name": "example",
  "dependencies": {
    "foo": "^4.2.0",
    "bar": "^1.0.0",
  },
  "overrides": {
    "foo": "$foo"
  }
}

{
  "name": "bar",
  "dependencies": {
    "foo": "^3.2.0",
  }
}

The order in which the packages are resolved determines whether this works or not.

Since npm-update doesn't work on overrides it requires constant manual maintenance and this feature, in its current state, is therefore de facto worthless.

schanjr · 2023-12-14T17:17:26Z

Ran into the same issue. I deleted package-lock.json and node_modules and reinstalled everything via npm install

waqastariqkhan · 2023-12-27T18:23:49Z

I have had the same problem with $react-native

npm ERR! Unable to resolve reference $react-native

I just took the suggestion from above and replaced the $react-native variable with the version defined in the devDependencies and it worked fine.

The variable doesn't seem to work in CI.. npm/cli#5730

in-in · 2024-06-04T18:31:16Z

...
Since npm-update doesn't work on overrides it requires constant manual maintenance and this feature, in its current state, is therefore de facto worthless.

The problem of updating dependencies can be solved using npm-check-updates. In v16.14.2 raineorshine/npm-check-updates#1332 (comment) it updates overrides as well.

THETCR · 2024-06-26T13:44:58Z

@Bow2Jesus
Can you add the tags for NPM 10?
That will make it clear for everybody that the issue is still applicable to the current release.

Migrated to eslint 9. Fixed various linting issues found with the new rule set. Also updated to match the latest Vite react-ts template, except for explicitly setting the eslint version override instead of "$eslint", since I'm running into npm/cli#5730.

joelspadin · 2024-08-04T18:28:25Z

I'm running into the same issue in https://github.com/joelspadin/xivplan. The Vite react-ts template overrides "eslint" to "$eslint", but if I do the same in my project instead of duplicating the version number between devDependencies and overrides, it is unable to resolve the reference to "$eslint".

menocomp · 2025-01-24T14:09:11Z

Same issue in node: v22.13.1 and npm: 10.9.2 only with devDependencies though.

Bow2Jesus added Bug thing that needs fixing Needs Triage needs review for next steps Release 8.x work is associated with a specific npm 8 release labels Oct 20, 2022

wraithgar closed this as completed Oct 27, 2022

Bow2Jesus mentioned this issue Oct 28, 2022

[BUG] <title> #5771

Closed

2 tasks

wraithgar reopened this Oct 28, 2022

wraithgar changed the title ~~[BUG] <title>Unable to resolve reference $react~~ [BUG] Unable to resolve reference $react Oct 28, 2022

wraithgar added Priority 1 high priority issue and removed Needs Triage needs review for next steps labels Oct 28, 2022

fritzy added the config:overrides Issues dealing with the overrides feature label Oct 31, 2022

wraithgar mentioned this issue Nov 2, 2022

[BUG] exec/npx: npm v8.8+/9+ break with a self-reference #5777

Closed

2 tasks

darcyclarke added the Release 9.x work is associated with a specific npm 9 release label Nov 7, 2022

lukekarrys added Priority 0 will get attention right away regression:9.x and removed Release 8.x work is associated with a specific npm 8 release Priority 1 high priority issue labels Nov 10, 2022

darcyclarke assigned nlf Nov 14, 2022

wraithgar unassigned nlf Dec 12, 2022

saquibkhan assigned fritzy Jan 19, 2023

lll000111 mentioned this issue Sep 4, 2023

[BUG] certain combinations of $ref overrides cause "ERR! Unable to resolve reference" from arborist #4395

Closed

2 tasks

fritzy removed their assignment Sep 27, 2023

milaninfy mentioned this issue Mar 13, 2024

[BUG] Unable to install packages because of Unable to resolve reference $@types/react-dom #7154

Closed

2 tasks

Windvis added a commit to appuniversum/ember-appuniversum that referenced this issue May 13, 2024

Use a specific version in th eoverride config

1f24b33

The variable doesn't seem to work in CI.. npm/cli#5730

in-in mentioned this issue Jun 4, 2024

Updating dependencies fails when an override is specified raineorshine/npm-check-updates#1332

Open

3 tasks

bluwy mentioned this issue Aug 7, 2024

npm error Unable to resolve reference $eslint vitejs/vite#17832

Closed

7 tasks

rakleed mentioned this issue Nov 20, 2024

ncu -i: Unable to resolve reference $eslint raineorshine/npm-check-updates#1477

Open

1 task

milaninfy mentioned this issue Dec 30, 2024

Issues related to override npm/statusboard#920

Open

18 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BUG] Unable to resolve reference $react #5730

[BUG] Unable to resolve reference $react #5730

Bow2Jesus commented Oct 20, 2022 •

edited by darcyclarke

Loading

wraithgar commented Oct 27, 2022

Bow2Jesus commented Oct 28, 2022

lukekarrys commented Nov 10, 2022

juancarlosjr97 commented Nov 24, 2022 •

edited

Loading

juancarlosjr97 commented Dec 8, 2022

edtbl76 commented Feb 5, 2023

mon-jai commented Feb 15, 2023

callumnewlands commented Mar 13, 2023

callumnewlands commented Mar 13, 2023

faustus7 commented Mar 18, 2023 •

edited

Loading

dstaley commented Mar 21, 2023

orgads commented Mar 23, 2023 •

edited

Loading

jensbodal commented Jun 14, 2023

McFoggy commented Jul 4, 2023

THETCR commented Jul 9, 2023 •

edited

Loading

schanjr commented Dec 14, 2023

waqastariqkhan commented Dec 27, 2023

in-in commented Jun 4, 2024

THETCR commented Jun 26, 2024

joelspadin commented Aug 4, 2024

menocomp commented Jan 24, 2025

[BUG] Unable to resolve reference $react #5730

[BUG] Unable to resolve reference $react #5730

Comments

Bow2Jesus commented Oct 20, 2022 • edited by darcyclarke Loading

Is there an existing issue for this?

This issue exists in the latest npm version

Current Behavior

Expected Behavior

Steps To Reproduce

Environment

wraithgar commented Oct 27, 2022

Bow2Jesus commented Oct 28, 2022

lukekarrys commented Nov 10, 2022

juancarlosjr97 commented Nov 24, 2022 • edited Loading

juancarlosjr97 commented Dec 8, 2022

edtbl76 commented Feb 5, 2023

mon-jai commented Feb 15, 2023

callumnewlands commented Mar 13, 2023

callumnewlands commented Mar 13, 2023

faustus7 commented Mar 18, 2023 • edited Loading

dstaley commented Mar 21, 2023

orgads commented Mar 23, 2023 • edited Loading

jensbodal commented Jun 14, 2023

McFoggy commented Jul 4, 2023

THETCR commented Jul 9, 2023 • edited Loading

schanjr commented Dec 14, 2023

waqastariqkhan commented Dec 27, 2023

in-in commented Jun 4, 2024

THETCR commented Jun 26, 2024

joelspadin commented Aug 4, 2024

menocomp commented Jan 24, 2025

Bow2Jesus commented Oct 20, 2022 •

edited by darcyclarke

Loading

juancarlosjr97 commented Nov 24, 2022 •

edited

Loading

faustus7 commented Mar 18, 2023 •

edited

Loading

orgads commented Mar 23, 2023 •

edited

Loading

THETCR commented Jul 9, 2023 •

edited

Loading