Storybook main.ts config:

import type { StorybookConfig } from '@storybook/nextjs'
import { RuleSetRule } from 'webpack';

import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  staticDirs: ['../public'],
  webpackFinal: async (config) => {
    // TSConfig Paths
    if (config.resolve) {
      config.resolve.plugins = [
        ...(config.resolve.plugins || []),
        new TsconfigPathsPlugin({
          extensions: config.resolve.extensions,
        }),
      ]
    }
    config.module = config.module || {};
    config.module.rules = config.module.rules || [];

    // This modifies the existing image rule to exclude .svg files
    // since you want to handle those files with @svgr/webpack
    const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
    if (imageRule) {
      imageRule['exclude'] = /.svg$/;
    }

    // Add rule for SVG files
    config.module.rules.push({
      test: /.svg$/,
      issuer: /.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });

    return config
  },

}

export default config

as soon as I add:

    // This modifies the existing image rule to exclude .svg files
    // since you want to handle those files with @svgr/webpack
    const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
    if (imageRule) {
      imageRule['exclude'] = /.svg$/;
    }

the imports are working, as in, react tries to render the plain <svg tag, so at least it loaded the file (but it cant render that)

so now, we want to transform them to JSX with:

    config.module.rules.push({
      test: /.svg$/,
      issuer: /.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });

as soon as this is added, the import is now undefined