[BUG] Unable to resolve reference $react

[Bow2Jesus]

Is there an existing issue for this?

• [X] I have searched the existing issues

This issue exists in the latest npm version

• [X] 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

1. In this environment: Windows 10
2. 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"
}

3. Run 'npm install'
4. 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.

[wraithgar]

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

[Bow2Jesus]

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

[lukekarrys]

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]

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]

This is still a problem on v9.2.0 :(

[edtbl76]

I see the same problem w/ 8.19.3

[mon-jai]

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]

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]

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]

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]

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]

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]

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

[McFoggy]

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]

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]

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

[waqastariqkhan]

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.

[in-in]

... 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 https://github.com/raineorshine/npm-check-updates/issues/1332#issuecomment-1717862332 it updates overrides as well.

[THETCR]

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

[joelspadin]

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]

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

[vasa-chi]

Is there any solution to this? Removing node_modules and package-lock.json didn't help.

[Farley-Chen]

Is there any solution to this? Removing node_modules and package-lock.json didn't help.有解决办法吗？删除node_modules和package-lock.json没有帮助。

I manually copy the version to replace '$xxxxx'

[Lyserie]

Is there any solution to this? Removing node_modules and package-lock.json didn't help.有解决办法吗？删除node_modules和package-lock.json没有帮助。

I manually copy the version to replace '$xxxxx'

Thanks! This solved my issue

[maksnester]

why is this closed if NPM audit fix is incompatible with NPM's own overrides syntax?

[iamdey]

Same issue with npm:

• 10.8.2
• 10.9.3

resolved in npm 11.6.1 (node 24.10.0)