Installation error | React version 18

[josefdclxvi]

Hi got this error when im trying to install react-qr-reader in version 18 of React

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: residencia@0.1.0 npm ERR! Found: react@18.0.0 npm ERR! node_modules/react npm ERR! react@"^18.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.8.0 || ^17.0.0" from react-qr-reader@3.0.0-beta-1 npm ERR! node_modules/react-qr-reader npm ERR! react-qr-reader@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR!

[josefdclxvi]

it works when i install it with --legacy-peer-deps npm add react-qr-reader --legacy-peer-deps

is it ok if i ignore the required version of react for this package? will there be conflicts in the future?

[josefdclxvi]

i found the problem regarding in this lib with React 18

there is an error message from react that

this react dom render inside index.js is now deprecated in React 18

instead, use createRoot

when i tried to change this to createRoot, this lib starts to malfunction. it gets infinite loop after qr code capture the looping happen in onResult

so i switch back to render (ReactDOM.render)

[iMiebaka]

This solution still presents issues

[nandyx]

any update?

[JanettaH]

This error still appears to be valid. Any updates on this? 👀

[Jasperhino]

Same issue here

[leho-dev]

me too

[unllamas]

Has anyone been able to solve it?

[kazem3d]

it is not solved yet you can use html5-qbarcode , with less dependancy this is an exapmle https://minhazav.medium.com/qr-and-barcode-scanner-in-react-b8e09102b805

[mateusz-pocztowski]

Try npm overrides in your package.json:

"overrides": {
  "react-qr-reader": {
    "react": "$react",
    "react-dom": "$react-dom"
  }
}

See https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

[pdtran3k6]

Try npm overrides in your package.json:

"overrides": {
  "react-qr-reader": {
    "react": "$react",
    "react-dom": "$react-dom"
  }
}

See https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

This works for me, thanks!

[otito12]

Try npm overrides in your package.json:

"overrides": {
  "react-qr-reader": {
    "react": "$react",
    "react-dom": "$react-dom"
  }
}

See https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

Thank you!

[whiskacz]

Try npm overrides in your package.json:

"overrides": {
  "react-qr-reader": {
    "react": "$react",
    "react-dom": "$react-dom"
  }
}

See https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

it works, thanks 👍

[mh-jsx]

if you have react > 17 Use this instead https://www.npmjs.com/package/react-zxing

Both the libraries are using @zxing/library under the hood.