How to load svg from node_modules using next.config.js?

Question

I use jsoneditor NPM lib. jsoneditor contains a svg loading via import 'jsoneditor/dist/jsoneditor.css';. But it gives me this error. Looks like next.config.js is not loading the SVG properly.

ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
| <svg
|    xmlns:dc="http://purl.org/dc/elements/1.1/"

Below is my Current nextjs config.

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });
    return config;
  },
  ...withImages(withCSS({
    cssModules: true,
    cssLoaderOptions: {
      importLoaders: 1,
      localIdentName: '[local]___[hash:base64:5]',
    },
    ...withLess(
      withSass({
        lessLoaderOptions: {
          javascriptEnabled: true,
          importScripts: true,
        },
      }),
    )
  }))
}