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

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)$/,
        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',
    },
  },
};

[almirfilho]

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;
};

[renatoalencar]

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.