Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Not Working with ERROR in ./node_modules/react-native-svg/lib/module/LocalSvg.js

See original GitHub issue

ERROR 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)$/,
          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: [
                plugins: [
            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:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:5

github_iconTop GitHub Comments

almirfilhocommented, Jan 12, 2022

Thank you @renatoalencar, that did it! In the webpack.config.js file, adding the following fixed it for me:

module.exports = ({config}) => {
  // ...
  config.resolve.extensions.unshift('.web.js'); // added this line
  // ...
  return config;

renatoalencarcommented, Mar 22, 2021

I had the same issue using Storybook, Metro has a config to import files with .android.js and .ios.js extensions and react-native-web adds up with the .web.js extension, which Webpack is not configured to handle. When resolving this file ReactNativeSVG.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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found