"vite-svg-loader" resolved to an ESM file. ESM file cannot be loaded by "require" with v4.1.0+
Closed this issue · 2 comments
- 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
},
}),
]
}
}
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
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.