@svgr/webpack Not working with svg's from shared package inside monorepo

[svenlombaert]

🐛 Bug Report

Inside my monorepo I have a NextJS project and a shared 'icons' package which is just a folder full of svg files.
Whenever I want to use @svgr/webpack with the below next.config.js, I get an error during building

/** @type {import('next').NextConfig} */
const nextConfig = {
  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(
      // Reapply the existing rule, but only for svg imports ending in ?url
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/, // *.svg?url
      },
      // Convert all other *.svg imports to React components
      {
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.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;
  },
  reactStrictMode: true,
};

module.exports = nextConfig;

The error is this:

Import trace for requested module:
./src/app/page.tsx

../../packages/icons/dist/close.svg
Module not found: Can't resolve 'react'

I can actually resolve this error by adding react as a dependency of my icons package. That is completely wrong though as my icons package only contains svg files and no other code whatsover.

The project I'm including my svg's in is a NextJS project, so react is available there

To Reproduce

Steps to reproduce the behavior:

• Have a monorepo
• Have a web project
• Have a shared package which contains only .svg files
• Try to import that svg file inside the webproject, with above webpack/nextjs config.

Expected behavior

It should import the svg and build without a problem

Note: I got svgr/webpack perfectly working when I moved those svgs inside my nextJS project

Link to repl or repo (highly encouraged)

Paste the results here:

## System:
 - OS: macOS 14.0
 - CPU: (10) arm64 Apple M1 Pro
 - Memory: 317.88 MB / 32.00 GB
 - Shell: 5.9 - /bin/zsh
## Binaries:
 - Node: 18.18.0 - /usr/local/bin/node
 - Yarn: 1.22.19 - /usr/local/bin/yarn
 - npm: 10.2.0 - /usr/local/bin/npm
 - Watchman: 2023.08.14.00 - /opt/homebrew/bin/watchman

[svenlombaert]

I think I just got it working by adding this resolve to the rule:

{
  test: /\.svg$/i,
  issuer: fileLoaderRule.issuer,
  resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
  use: ['@svgr/webpack'],
  resolve: {
    alias: {
      react: require.resolve('react'),
    }
  }
}

Gonna keep this issue open as I'm not sure if this is the recommended way + would be good to state this somewhere in the docs when including svg's from outside your project.