[BUG] Unable to resolve reference $react

Bow2Jesus commented 1 year ago

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

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.

wraithgar commented 1 year ago

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

Bow2Jesus commented 1 year ago

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

lukekarrys commented 1 year ago

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 commented 1 year ago

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 npm@8.19.3 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 commented 1 year ago

This is still a problem on v9.2.0 :(

edtbl76 commented 1 year ago

I see the same problem w/ 8.19.3

mon-jai commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

McFoggy commented 1 year ago

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 commented 1 year ago

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 commented 7 months ago

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

waqastariqkhan commented 6 months ago

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 commented 1 month ago

... 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 commented 2 weeks ago

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

npm / cli