Not Working with ERROR in ./node_modules/react-native-svg/lib/module/LocalSvg.js
See original GitHub issueERROR in ./node_modules/react-native-svg/lib/module/LocalSvg.js 42:49-107 Module not found: Error: Can’t resolve ‘react-native/Libraries/Image/resolveAssetSource’ in ‘/home/box/dev/web/node_modules/react-native-svg/lib/module’
Inside package.json
“react”: “^17.0.1”, “react-dom”: “^17.0.1”, “react-native-svg”: “^12.1.0”, “react-native-web”: “^0.15.0”,
using webppack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './release'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
}),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
include:[
path.resolve(__dirname, './src'),
path.resolve(__dirname, './node_modules/react-native-vector-icons'),
path.resolve(__dirname, './node_modules/react-native-svg'),
],
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
{
plugins: [
'@babel/plugin-proposal-class-properties'
]
}
],
plugins: ['babel-plugin-react-native-web'],
},
},
},
{
test: /\.ttf$/,
loader: "url-loader", // or directly file-loader
include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
},
{
test: /\.png$/i,
loader: "file-loader", // or directly file-loader
include: path.resolve(__dirname, "node_modules/react-native-svg"),
}
],
},
resolve: {
alias: {
'react-native$': 'react-native-web',
},
},
};
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:5
Top Results From Across the Web
Error - JavaScript - MDN Web Docs - Mozilla
Creates an instance representing an error that occurs when a variable or parameter is not of a valid type. URIError. Creates an instance ......
Read more >JavaScript - throw not working in an error handling situation
In this article, we will try to understand in which case or how does throw statement doesn't work in an error handling situation...
Read more >JavaScript Errors Try Catch Throw - W3Schools
When executing JavaScript code, different errors can occur. ... if(isNaN(x)) throw "not a number"; x = Number(x); ... They will not work in...
Read more >Error Handling in Modular AWS SDK for JavaScript (v3)
In this post, we cover how to use it and how it improves the error handling experience. Why did we do it? Previously,...
Read more >What's a good way to extend Error in JavaScript?
Why extending the Error class using ES6 and Babel is a problem? Because an instance of CustomError is not anymore recognized as such....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thank you @renatoalencar, that did it! In the webpack.config.js file, adding the following fixed it for me:
I had the same issue using Storybook, Metro has a config to import files with
.android.js
and.ios.js
extensions andreact-native-web
adds up with the.web.js
extension, which Webpack is not configured to handle. When resolving this fileReactNativeSVG.web.ts
, Webpack resolves to the Native version instead of the web version, which is causing the bug.Webpack has a config
resolve.extensions
, I was able to solve this by adding.web.js
to the top of the list. It should work for you too.