Skip to content

Support for Nuxt 3? #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
f3yisayo opened this issue Aug 28, 2022 · 1 comment
Open

Support for Nuxt 3? #15

f3yisayo opened this issue Aug 28, 2022 · 1 comment

Comments

@f3yisayo
Copy link

f3yisayo commented Aug 28, 2022

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
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants