Currently no loaders are configured to process

[zvitek]

Hi, I have integrated a web interface into my react-native application according to the following tutorial (https://javascript.plainenglish.io/how-to-integrate-react-native-web-existing-react-native-apps-8e4964ad2f0b).

Everything works correctly, but I am unable to process the SVG files. No matter which webpack configuration I use, I always get the same error.

ERROR in ./assets/icons/colored/16/pen.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
| <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7448 0.419129C12.3095 -0.145485 13.2158 -0.136305 13.7785 0.426422L15.58 2.22789C16.14 2.78792 16.14 3.69423 15.58 4.25427L13.9296 5.90337L13.7732 6.06099C13.7637 6.07063 13.7539 6.07996 13.7438 6.08897L6.23238 13.5946C6.17039 13.6572 6.09641 13.7085 6.01337 13.7448L0.988236 15.9401C0.722156 16.0563 0.412034 15.9977 0.206716 15.7924C0.0717742 15.6575 0.000207425 15.4772 4.61787e-07 15.294C-0.000108864 15.1985 0.0191926 15.1021 0.0590378 15.0109L2.25434 9.98573C2.28959 9.90506 2.33961 9.8317 2.40183 9.76943L9.90977 2.25563C9.91824 2.24621 9.92701 2.23695 9.93608 2.22788L11.7375 0.426417C11.7386 0.425335 11.7397 0.424256 11.7408 0.423179L11.7448 0.419129ZM10.436 3.7258L3.89884 10.2681L5.73105 12.1003L12.2733 5.56311L10.436 3.7258ZM12.736 1.42396L12.7356 1.42443L11.4336 2.7274L13.2702 4.56397L14.5654 3.25827L14.5674 3.25625C14.5762 3.2474 14.5762 3.23474 14.5674 3.22589L12.7659 1.42443C12.7572 1.41574 12.7449 1.41558 12.736 1.42396ZM2.07325 13.9259L3.13355 11.4988L4.50032 12.8656L2.07325 13.9259Z" fill="#0B4793"/>
| <path d="M3.13355 11.4988L2.07325 13.9259L4.50032 12.8656L3.13355 11.4988Z" fill="#DDEDFF"/>
 @ ./src/App2.tsx 1:690-735
 @ ./index.web.js 3:0-29 7:49-52

I have the following configuration:

declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

import PenIcon from '../assets/icons/colored/16/pen.svg'; // Path is correct

const App = (): JSX.Element => {
  return (
    <>
      <PenIcon />
    </>
  );
};

module: {
    rules: [
      {
        test: /\\\\.ts$|tsx?$/,
        // Add every directory that needs to be compiled by Babel during the build.
        include: [
          path.resolve(__dirname, 'index.web.js'), // Entry to your application
          path.resolve(__dirname, '/src/App.tsx'), // Change this to your main App file
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'component'),
          ...compileNodeModules,
        ],
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets,
            plugins,
          },
        },
      },
      {
        test: /\\\\.(gif|jpe?g|png)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name].[ext]',
          },
        },
      },
      {
        test: /\\\\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',
          },
        ],
      },
    ],
  }

"webpack": "^5.75.0",
"@svgr/webpack": "^6.5.1",
"react": "18.2.0",

node v16.19.0
npm 8.19.3

Anyone have any idea where the problem might be? Thank you!

[abaracedo]

I'm having the same issue using Next JS when I build the application for production. Running in development mode works fine.

That's what I have on next.config.js, I adapted it from the sample (https://react-svgr.com/docs/next/#usage)

webpack: (config) => {
    // Grab the existing rule that handles SVG imports
    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));

    config.module.rules.push(
      // Convert *.svg imports to React components
      {
        test: /\.svg$/i,
        issuer: /\.tsx$/,
        resourceQuery: { not: /url/ }, // exclude if *.svg?url
        use: ['@svgr/webpack'],
      },
    );

    // Modify the file loader rule to ignore *.svg, since we have it handled now.
    fileLoaderRule.exclude = /\.svg$/i;

    return config;
  }

[abaracedo]

I solved it changing issuer and resourceQuery for these:

issuer: fileLoaderRule.issuer,
resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },

I took it from this comment in a PR