[Storybook] @svgr/webpack Error

Problem 🚨

To use SVG React components in Storybook, I installed @svgr/webpack and configured webpack in .storybook/main.js as follows:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-addon-next-router',
  ],
  webpackFinal: async (config) => {
    config.resolve.plugins.push(new TsconfigPathsPlugin({}))

    config.module.rules.unshift({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
}

When I ran Storybook, the following error occurred:

TypeError: this.getOptions is not a function

I found only issues related to sass/loader errors in Vue, but not for Storybook. After trying all the solutions from the Storybook GitHub issues without success, I discovered the same error on the @svgr/webpack GitHub issues page: https://github.com/gregberge/svgr/issues/631.

Solution 🔨

The issue is with @svgr/webpack v6. Downgrade to v5.5.0 and then rerun Storybook to fix the issue.

I confirmed that the SVG React components were displayed correctly.