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.

[AleeFarook]

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 [email protected] instead of the latest one, and worked fine with [email protected], see if it will help you

[shengl711]

@StepToTop - Thanks a lot! I think it works as I ran npm uninstall and npm install [email protected] and re-build the app, and I don't even see src/logoSVG folder in node_modules\react-native-qrcode-svg

Btw, are you by any chance also using react-native-vision-camera to scan qrcode in your project? I am facing even more dire errors similar to below reported issue where the latest version is no longer compatible with SDK 33 which is what I have right now. I am trying to find an older version that is compatible but the documentation is so limited. I wish they have better documentation on which specific version is compatible with which SDK/Gradle.

mrousavy/react-native-vision-camera#2864

[StepToTop]

@shengl711 how about trying to use version 2.15.6

[Kicu]

Few points from me:

There is an Example App in this package, under the directory /Example. Unfortunately there are some config problems there at the moment, but in general it should work.
I was able to run Example App locally and it works, there are no problems with the newest version.
How it looks on ios emulator:

I'm not getting the error about importing, and I don't think the import problem is a bug in react-native-qrcode-svg.

---

@DyerMaker42
The export of LocalSvg from react-native-svg was done via /css on purpose and has been done like that for a while. The reason is that the files inside /css are quite big and may be not needed for everyone, so they are not re-rexported through main index.js.
The last change to exports was done over a year ago in this PR: software-mansion/react-native-svg#2168

so if anyone is getting Unable to resolve "react-native-svg/css" from "node_modules/react-native-qrcode-svg/src/LogoSVG/index.native.js" maybe you should upgrade react-native-svg to the newest version, and retry with clean install?

Otherwise please reproduce this inside an Example App and then if I see the actual error I can try to help some more.

[shengl711]

@StepToTop - thank you for sharing version 2.15.6 of react-native-vision-camera being compatible with SDK33. I tried it and am now facing this issue reported in 'kotlin-android-extensions' Gradle plugin is deprecated #504 and trying to find ways to disable the extension in react-native-vision-camera since this isn't used anywhere else in the project. I am trying to work through that and in parallel I did try to upgrade to SDK35 but then I was facing other build issues.

@DyerMaker42 - thank you for the info. That helps. I am not quite ready to use the latest version of react-native-svg since it's used in other parts of the project that I am not familiar with. I will keep that in mind and try that locally when the qr code feature I am building is making progress.

[TahaAlTamimi]

I have faced this issue with the following packages
"react-native-qrcode-svg": "^6.2.0",
react-native-svg version is: "^13.14.0"

I have solved this by editing the following package to the react-native-svg: "^14.0.0"
@AleeFarook