Changes to svg doesn't seem to re-transpile when using with NextJS

[nullhook]

Whenever I make changes to an svg file it doesn't seem to re-transpile.

I have to put empty spaces in a component file where the svg sits for the changes to occur. I'm not sure if this is a cache issue?

[ljharb]

I'm not sure what you mean by "re-transpile". When you run babel via the CLI, it should update the output.

If it doesn't, it's a babel bug; if something else is running babel for you, it's a bug with that thing.

[nullhook]

I guess it's webpack that's running babel and isn't updating with changes

[ljharb]

If you run babel by yourself, do you see the updates? If so, then it seems like a webpack bug.

[tremby]

Same issue here. And in Storybook too.

@nullhook, can you explain more about your workaround?

@ljharb, I don't even know how to run Babel by myself within the context of NextJS or Storybook.

[tremby]

Ah, my temporary workaround is to delete node_modules/.cache/storybook. I imagine deleting .next would fix it for next too. I'll have to do this every time I edit the SVG of course.

[ljharb]

Seems like that's something to file on storybook, and possibly nextjs, then?

[tremby]

I don't know enough about how Babel plugins work to be confident of that, and don't have time to dig in. I'm just going to take the workaround and move on in this case.

[nullhook]

The issue is certainly related to webpack on NextJS.

I have solved this by using the svgr webpack plugin.

You should have the following rule inside your next.config.js for it to work.

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: { test: /\.(js|ts)x?$/ },
      use: ({ resource }) => ({
        loader: '@svgr/webpack',
        options: {
          svgo: false,
        },
      }),
    });
    return config;
  },
};