Migrate from Babel to Nextjs SWC encountering Minified React error

Question

When I removed my current .babelrc in order to force NextJS 13 using SWC instead. It's showing the error: Error: Minified React error #130. But when I add the .babelrc file again everything worked normally

.babelrc file

{
  "presets": ["next/babel"],
  "plugins": [
    ["babel-plugin-styled-components", { "ssr": true, "displayName": true, "preprocess": false }],
    "inline-react-svg"
  ]
}

I suspect it happens because the library styled-components but not sure how to fix. Has anyone encountered this situation?

Answer 1

I found the reason, it's inline-react-svg cause this issue. Remove .babelrc file and add this config to webpack inside next.config.js and it will work

webpack: (config, options) => {
      config.module.rules.push({
      test: /\.svg$/,
      use: [
        options.defaultLoaders.babel,
        {
          loader: "@svgr/webpack",
          options: { babel: false },
        },
      ],
    });

    return config;
  },

Thank you !