search

oliverfindl / vue-svg-inline-plugin

Vue plugin for inline replacement of SVG images with actual content of SVG files.
MIT License
33 stars 3 forks source link

Support for Nuxt 3? #15

Open f3yisayo opened 2 years ago

f3yisayo commented 2 years ago

Hi, thanks for this plugin.

On nuxt 3, I setup the loader as a plugin this way in the nuxt plugins folder:

import VueSvgInlinePlugin from "vue-svg-inline-plugin"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueSvgInlinePlugin)
})

But I get this error in my console:

(node:13568) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

oliverfindl commented 2 years ago

Hello,

while proposed fix seems trivial, I'm not sure if this won't cause any breaking changes for other workflows. Therefore it should be released as new major version of this plugin, which I kinda don't like (new major version due to 1 line changed).

I'm not familiar with Nuxt, but I created new Nuxt\@3 project and fiddled with this plugin. After adding "type": "module", to package.json it failed with another error:

TypeError [ERR_IMPORT_ASSERTION_TYPE_MISSING]: Module ["file:///.../nuxt-app/node_modules/vue-svg-inline-plugin/package.json"](file:///.../nuxt-app/node_modules/vue-svg-inline-plugin/package.json) needs an import assertion of type "json"
    at new NodeError (node:internal/errors:372:5)
    at validateAssertions (node:internal/modules/esm/assert:82:15)
    at defaultLoad (node:internal/modules/esm/load:24:3)
    at ESMLoader.load (node:internal/modules/esm/loader:431:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:350:22)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:369:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:328:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:82:21)
    at async Promise.all (index 0) {
  code: 'ERR_IMPORT_ASSERTION_TYPE_MISSING'

And after fixing that, it failed with another error:

[nuxt] [request error] [unhandled] [500] window is not defined
  at Object.install (./node_modules/vue-svg-inline-plugin/src/index.js:173:30)  
  at Object.use (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4305:28)  
  at ./.nuxt/dist/server/server.mjs:2755:18  
  at fn (./.nuxt/dist/server/server.mjs:430:27)  
  at Object.callAsync (./node_modules/unctx/dist/index.mjs:49:19)  
  at callWithNuxt (./.nuxt/dist/server/server.mjs:432:23)  
  at applyPlugin (./.nuxt/dist/server/server.mjs:376:29)  
  at Module.applyPlugins (./.nuxt/dist/server/server.mjs:386:11)  
  at async createNuxtAppServer (./.nuxt/dist/server/server.mjs:46:7)  
  at async Object.renderToString (./node_modules/vue-bundle-renderer/dist/runtime.mjs:172:19)
(node:8535) ExperimentalWarning: Importing JSON modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

This is most probably due to error on my end, by not being familiar with Nuxt, but unfortunately I don't plan to invest my time into this rabbit hole right now. If I understand correctly, this initial error is due to changes in Node\@17 (version 16 is LTS), so I will have to fix it someday.

I will let this issue open to see, if more people are encountering this issue - as for now, you are only one.

Thanks.