"vite-svg-loader" resolved to an ESM file. ESM file cannot be loaded by "require" with v4.1.0+

[horans]

• env: vite4.5 + vue3 + node20

v4.0.0 works fine (for a long time). v4.1.0+ (including latest v5.0.1/Vite5) is giving "vite-svg-loader" resolved to an ESM file. ESM file cannot be loaded by "require" error on dev.

It's weird since I am not using "require" at all.

More details of the error:

✘ [ERROR] "vite-svg-loader" resolved to an ESM file. ESM file cannot be loaded by `require`. See http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]

    node_modules/esbuild/lib/main.js:1373:27:
      1373 │         let result = await callback({
           ╵                            ^

  This error came from the "onResolve" callback registered here:

    node_modules/esbuild/lib/main.js:1292:20:
      1292 │       let promise = setup({
           ╵                     ^

  The plugin "externalize-deps" was triggered by this import

    vite.config.ts:8:22:
      8 │ import svgLoader from 'vite-svg-loader'
        ╵                       ~~~~~~~~~~~~~~~~~

my vite.config.ts is as follows:

import svgLoader from 'vite-svg-loader'

export default defineConfig(({ command, mode }) => {
  // handle modes
  return {
    plugins: [
      // more plugins
      svgLoader({
        svgoConfig: {
          // svgo configs
        },
      }),
    ]
  }
}

[jpkleemans]

Yes, i've updated the module to use ESM, because Vite 5 deprecated the CJS Node API, see https://vitejs.dev/guide/migration#deprecate-cjs-node-api You can fix it for now by setting "type": "module" in your package.json file, or use the .mjs extension, e.g. vite.config.mjs.

I'll look if I can create a hybrid version, so that CJS also will work for all users of Vite v4

[jpkleemans]

I did some testing and it looks like it's really not needed to update to ESM, because Vite 5 still works with the CommonJS version of the package. I reverted this in release 5.1.0 so now the error should be gone.