Could not find component config for native component

[adamlucia]

I'm trying to utilize react-native-svg in the web (react-native-web), using webpack 5 to build but I receive this error that I can't find much information on. Any ideas?

ERROR in ./node_modules/react-native-svg/lib/module/fabric/UseNativeComponent.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: /Users/noobles/Documents/Kanect/app/node_modules/react-native-svg/lib/module/fabric/UseNativeComponent.js: Could not find component config for native component
    at throwIfConfigNotfound (/Users/noobles/Documents/Kanect/app/node_modules/@react-native/babel-plugin-codegen/node_modules/@react-native/codegen/lib/parsers/error-utils.js:327:11)
    at findComponentConfig (/Users/noobles/Documents/Kanect/app/node_modules/@react-native/babel-plugin-codegen/node_modules/@react-native/codegen/lib/parsers/parsers-commons.js:1142:3)
    at buildComponentSchema (/Users/noobles/Documents/Kanect/app/node_modules/@react-native/babel-plugin-codegen/node_modules/@react-native/codegen/lib/parsers/flow/components/index.js:24:32)
    at buildSchemaFromConfigType (/Users/noobles/Documents/Kanect/app/node_modules/@react-native/babel-plugin-codegen/node_modules/@react-native/codegen/lib/parsers/parsers-commons.js:634:34)
    at buildSchema (/Users/noobles/Documents/Kanect/app/node_modules/@react-native/babel-plugin-codegen/node_modules/@react-native/codegen/lib/parsers/parsers-commons.js:698:10)
    at FlowParser.parseString (/Users/noobles/Documents/Kanect/app/node_modules/@react-native/babel-plugin-codegen/node_modules/@react-native/codegen/lib/parsers/flow/parser.js:135:12)
    at parseFile (/Users/noobles/Documents/Kanect/app/node_modules/@react-native/babel-plugin-codegen/index.js:37:23)
    at generateViewConfig (/Users/noobles/Documents/Kanect/app/node_modules/@react-native/babel-plugin-codegen/index.js:50:18)
    at PluginPass.exit (/Users/noobles/Documents/Kanect/app/node_modules/@react-native/babel-plugin-codegen/index.js:171:32)
    at newFn (/Users/noobles/Documents/Kanect/app/node_modules/@babel/traverse/lib/visitors.js:172:14)
    at NodePath._call (/Users/noobles/Documents/Kanect/app/node_modules/@babel/traverse/lib/path/context.js:49:20)
    at NodePath.call (/Users/noobles/Documents/Kanect/app/node_modules/@babel/traverse/lib/path/context.js:39:18)
    at NodePath.visit (/Users/noobles/Documents/Kanect/app/node_modules/@babel/traverse/lib/path/context.js:96:8)
    at TraversalContext.visitQueue (/Users/noobles/Documents/Kanect/app/node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitSingle (/Users/noobles/Documents/Kanect/app/node_modules/@babel/traverse/lib/context.js:66:19)
    at TraversalContext.visit (/Users/noobles/Documents/Kanect/app/node_modules/@babel/traverse/lib/context.js:113:19)
    at traverseNode (/Users/noobles/Documents/Kanect/app/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at traverse (/Users/noobles/Documents/Kanect/app/node_modules/@babel/traverse/lib/index.js:53:34)
    at transformFile (/Users/noobles/Documents/Kanect/app/node_modules/@babel/core/lib/transformation/index.js:80:31)
    at transformFile.next (<anonymous>)
    at run (/Users/noobles/Documents/Kanect/app/node_modules/@babel/core/lib/transformation/index.js:25:12)
    at run.next (<anonymous>)
    at transform (/Users/noobles/Documents/Kanect/app/node_modules/@babel/core/lib/transform.js:22:33)
    at transform.next (<anonymous>)
    at step (/Users/noobles/Documents/Kanect/app/node_modules/gensync/index.js:261:32)
    at /Users/noobles/Documents/Kanect/app/node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/Users/noobles/Documents/Kanect/app/node_modules/gensync/index.js:223:11)
 @ ./node_modules/react-native-svg/lib/module/fabric/index.js 1:5793-5824
 @ ./node_modules/react-native-svg/lib/module/ReactNativeSVG.js 1:6205-6224
 @ ./node_modules/react-native-svg/lib/module/index.js 1:245-272
 @ ./src/components/ui/icon/index.tsx 1:1834-1861
 @ ./src/components/ConverterPricing.js 1:457-488
 @ ./src/views/MainContainer.js 1:652-693
 @ ./src/components/AppBody.js 1:673-706
 @ ./src/App.js 1:988-1019
 @ ./src/index.js 1:174-190

webpack 5.98.0 compiled with 32 errors in 33157 ms

const path = require('path');
const webpack = require('webpack');
// const HtmlWebpackPlugin = require('html-webpack-plugin');

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const { babelPlugins, babelPresets } = require('./babel.config');

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const appDirectory = path.resolve(__dirname, './');

const compileNodeModules = [
  // 'react-native-everywhere-image-picker',
  'react-native-webview',
  '@gluestack-ui',
  '@gluestack-ui/nativewind-utils',
  '@react-native-aria/interactions',
  'tailwind-variants',
  'react-native-css-interop',
  'react-native-highcharts',
  'react-native-web-webview',
  'react-native-vector-icons',
  'expo-modules-core',
  'react-native-paper-dates',
  'react-native-web',
  'react-native', 
  '@react-native/assets-registry/registry' //https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md#web-configuration
  // 'react-native-svg'
].map(moduleName => path.resolve(appDirectory, `node_modules/${moduleName}`));

 console.log("Modules being included: (compileNodeModules) ", compileNodeModules);

// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
  test: /\.js$|\.jsx|\.ts$|\.tsx/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    appDirectory,
    // path.resolve(appDirectory, 'index.web.js'),
    // path.resolve(__dirname, 'App.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
    ...compileNodeModules,
  ],
  use: {
    loader: 'babel-loader',
    options: {
      targets: "defaults",
      cacheDirectory: false,
      babelrc: false,
      rootMode: 'upward',
      // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
      presets: babelPresets,
      // presets: ["module:@react-native/babel-preset"],
      // Re-write paths to import only the modules needed by the app
      plugins: [
        'react-native-web',
        ["module-resolver", {
          root: ["./"],
          extensions: [".js", ".jsx", ".ts", ".tsx" ],
          alias: {
            "@/": "./src/",
            "tailwind.config": "./tailwind.config.js",
            "tailwind-variants/dist/config": "./node_modules/tailwind-variants/dist/config.d.ts",
            // '^react-native$': 'react-native-web',
            'react-native$': require.resolve('react-native-web'),
            // '@react-native-community/async-storage': 'react-native-web'
          }
        }],
        ...(babelPlugins || [])
      ],
    },
  },
};

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false,
    },
  },
};

const reactNativeWebWebViewLoaderConfiguration = {
  test: /postMock.html$/,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
    },
  },
};

module.exports = {
  // mode: 'production',
  mode: 'development',
  cache: false,
  stats: {
    errorDetails: true,
    children: true
  },
  devtool: 'eval-source-map',
  target: 'web',
  optimization: {
    minimize: false
  },
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },
  plugins: [
    new BundleAnalyzerPlugin(),
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser',
    }),
    new NodePolyfillPlugin({
      // additionalAliases: ['require'],
    }),
  ],

  entry: [
    // load any web API polyfills
    // 'regenerator-runtime/runtime',
    // your web-specific entry file
    path.resolve(appDirectory, 'src/index.js'),
  ],

  resolve: {
    mainFields: ['browser', 'module', 'main'], // Prioritize browser-compatible builds
    extensions: ['.js', '.jsx', '.web.js', '.ts', '.tsx' ],
    // // modules: ['node_modules'],
    alias: {
      'react-native$': 'react-native-web',
      '@react-native-async-storage/async-storage': 'react-native-web',// "works" but is it right?
      '@': path.resolve(__dirname, 'src'),
    },
    modules: ['node_modules'],
    plugins: [  
      new TsconfigPathsPlugin({ extensions: ['.js', '.jsx', '.web.js', '.ts', '.tsx'] }), // Ideally this would be the same as the extensions from the webpack config but it seems resolver plug-ins does not have access to this information so you need to specify it again for the plugin.
    ],
    fullySpecified: false,
    fallback: {
      fs: false, // Disable fs module
      path: require.resolve('path-browserify'),
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
      buffer: require.resolve('buffer/'),
      events: require.resolve('events/'), // Add fallback for events
    }
  },
  
  // configures where the build ends up
  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist'),
    publicPath: '',
  },

  // ...the rest of your config

  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration,
      reactNativeWebWebViewLoaderConfiguration,
      {
        test: /\.(js|jsx|ts|tsx)$/,
        include: path.resolve(__dirname, 'src'),
        use: 'babel-loader',
      },
      {
        test: /\.json$/,
        type: 'json',
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              native: true, // Enable React Native compatibility
            },
          },
        ],
      },
      {
        test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
        type: 'asset/resource'
      },
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
    devMiddleware: {
      writeToDisk: true,
    },
    allowedHosts: 'dev.kanectrecycling.com',
    // For local development
    // allowedHosts: 'all',
  }
};