Unable to resolve "react-native-svg/css" Unable to resolve "react-native-svg/css" from "node_modules/react-native-qrcode-svg/src/LogoSVG/index.native.js"

[cay-cospete]

I am getting this error on

"react-native-qrcode-svg": "^6.3.12",

Unable to resolve "react-native-svg/css" from "node_modules/react-native-qrcode-svg/src/LogoSVG/index.native.js"

What is the issue here ?

[cay-cospete]

@kkpo4553 How do i update this in the package itself though ? Why is this fix not a part of the package ?

[Kicu]

hello @cay-cospete we would need to get more info about your setup to help you.

What version of react-native and react-native-svg are you using?
Can you provide extra details of when the error appears?
Can you provide a simple reproduction of this issue inside Example App that is part of this project?
Check: https://github.com/Expensify/react-native-qrcode-svg/blob/main/README.md#development-and-testing

[thangnv1205]

@cay-cospete have you resolve it?

[alexsvt2]

I'm facing the same error; the import is displayed with error in vscode.

[Kicu]

hey @alexsvt2
The original poster said the error they were facing was:
Unable to resolve "react-native-svg/css" from "node_modules/react-native-qrcode-svg/src/LogoSVG/index.native.js"

although it is definitely similar, it is not the same as yours which looks as if in your project the library is not installed.

I can take a look if you answer my questions in this post: #225 (comment)
It is impossible for me to help without any extra details.

[alexsvt2]

hey @alexsvt2
The original poster said the error they were facing was:
Unable to resolve "react-native-svg/css" from "node_modules/react-native-qrcode-svg/src/LogoSVG/index.native.js"

although it is definitely similar, it is not the same as yours which looks as if in your project the library is not installed.

I can take a look if you answer my questions in this post: #225 (comment)
It is impossible for me to help without any extra details.

Yeah my mistake, I used npm i -S and worked, thank you

[shengl711]

I am facing the same issue although I already ran with npm i -S

The version the tool installed:
"react-native-qrcode-svg": "^6.3.12",
"react-native-svg": "^13.14.0",

This is the version of react-native I am using:
"react-native": "0.72.3",

error: Error: Unable to resolve module react-native-svg/css from C:\Users\eliza\StudioProjects\Torus\node_modules\react-native-qrcode-svg\src\LogoSVG\index.native.js: react-native-svg/css could not be found within the project or in these directories:
node_modules
1 | import React from "react";

2 | import { LocalSvg } from "react-native-svg/css";
| ^
3 | import { SvgUri, SvgXml } from "react-native-svg";
4 | import { isString, isUrlString } from "../utils";
5 |
at ModuleResolver.resolveDependency (C:\Users\eliza\StudioProjects\Torus\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:139:15)
at DependencyGraph.resolveDependency (C:\Users\eliza\StudioProjects\Torus\node_modules\metro\src\node-haste\DependencyGraph.js:277:43)
at Object.resolve (C:\Users\eliza\StudioProjects\Torus\node_modules\metro\src\lib\transformHelpers.js:169:21)
at Graph._resolveDependencies (C:\Users\eliza\StudioProjects\Torus\node_modules\metro\src\DeltaBundler\Graph.js:473:35)
at Graph._processModule (C:\Users\eliza\StudioProjects\Torus\node_modules\metro\src\DeltaBundler\Graph.js:261:38)
at async Graph._addDependency (C:\Users\eliza\StudioProjects\Torus\node_modules\metro\src\DeltaBundler\Graph.js:372:20)
at async Promise.all (index 5)
at async Graph._processModule (C:\Users\eliza\StudioProjects\Torus\node_modules\metro\src\DeltaBundler\Graph.js:322:5)
at async Graph._addDependency (C:\Users\eliza\StudioProjects\Torus\node_modules\metro\src\DeltaBundler\Graph.js:372:20)
at async Promise.all (index 1)

[DyerMaker42]

hey man I submitted a patch fix, but if you find node_modules/react-native-qrcode-svg/src/LogoSVG/index.native.js

and change line 2 from import { LocalSvg } from 'react-native-svg/css'; to import { LocalSvg } from 'react-native-svg';

worked for me hope helps

[shengl711]

But that means I need to manually hack node_modules file every single time developers rebuild since we are all actively making changes to the code and will need to run 'npm install'. Can you share which new version will contain this fix and ETA?

[StepToTop]

@shengl711 you can change line 2 from import { LocalSvg } from 'react-native-svg/css'; to import { LocalSvg } from 'react-native-svg';
then, npx patch-package react-native-qrcode-svg, should be a workaround.

I am getting this error on both version of react-native-qrcode-svg

"react-native-qrcode-svg": "^6.3.12",

"react-native-qrcode-svg": "^6.2.0",

my react-native version is: "0.68"
react-native-svg version is: "^13.14.0"

I have try all the above fixes but not worked,

Unable to resolve "react-native-svg/css" from "node_modules/react-native-qrcode-svg/src/LogoSVG/index.native.js"

Appreciate the help.

Also i have try the npm i -S but not worked.

[shengl711]

@StepToTop - let me try that and get back to you.

@AleeFarook - what I tried originally before the feedback I received in this forum is to comment out line 2 that's causing the issue directly in node_modules file and build was able to run successfully. I will try out what StepToTop recommended before npm -i to see if that works.

[putrairawan992]

Hey this solved ?

[shengl711]

No, the issue isn't resolved. When we need to patch or hack node_modules files, the issue is still there.

@StepToTop - thank you for the feedback. I didn't realize I need to install patch-package in order for this to work and unfortunately I am unable to install this package because the code I work on is co-developed with others. So I need to get their approval before adding this. Do you know which version could have the actual fix so we don't need to patch or do any hack in node_modules file?

[StepToTop]

@shengl711 Oh you remind me of what I did before...

I used react-native-qrcode-svg@6.3.2 instead of the latest one, and worked fine with react-native-svg@12.5.1, see if it will help you