Getting create-nuxt-app + vuetify out of the box to work with nuxt-vite
andrewspy opened this issue · comments
Versions
nuxt-vite: v0.0.36
nuxt: v2.15.3
Reproduction
https://github.com/andrewspy/nuxt-app-vuetify-vite
Description
Trying to get create-nuxt-app + vuetify out of the box to work with nuxt-vite. and encounter the following error:
� Vite mode is experimental and many nuxt modules are still incompatible 01:11:53
If found a bug, please report via https://github.com/nuxt/vite/issues with a minimal reproduction
╭───────────────────────────────────────╮
│ │
│ Nuxt @ v2.15.3 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: server-side │
│ ▸ Target: server │
│ │
│ Listening: http://localhost:3000/ │
│ │
│ ⚡ Vite Mode Enabled (v0.0.36) │
│ │
╰───────────────────────────────────────╯
i Preparing project for development 01:11:55
i Initial build may take a while 01:11:55
i Discovered Components: .nuxt/components/readme.md 01:11:55
√ Builder initialized 01:11:55
√ Nuxt files generated 01:11:55
i Waiting for file changes 01:11:57
i Memory usage: 91 MB (RSS: 158 MB) 01:11:57
i Listening on: http://localhost:3000/ 01:11:57
ERROR Failed to resolve import "/v.png" from "pages\inspire.vue?vue&type=template&lang.js". Does the file exist? 01:11:57
at formatError (node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:43442:46)
at TransformContext.error (node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:43438:19)
at normalizeUrl (node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:44950:26)
at async TransformContext.transform (node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:45079:57)
at async Object.transform (node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:43640:30)
at async transformRequest (node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:59299:29)
at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:356:5)
at async Promise.all (index 0)
at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:358:5)
at async Promise.all (index 5)
at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:358:5)
at async Promise.all (index 4)
at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:358:5)
at async Promise.all (index 4)
at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:358:5)
at async Promise.all (index 0)
WARN [vite:css] @charset must precede all other statements 01:12:08
328| border-radius: 24px 0;
329| }
330| @charset "UTF-8";
| ^
331| @-webkit-keyframes v-shake {
332| 59% {
ERROR [vite]: Rollup failed to resolve import "/vuetify-logo.svg" from "components\VuetifyLogo.vue?vue&type=template&lang.js". 01:12:22
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
ERROR [vite]: Rollup failed to resolve import "/vuetify-logo.svg" from "components\VuetifyLogo.vue?vue&type=template&lang.js". 01:12:22
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
at onRollupWarning (node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:44283:19)
at Object.onwarn (node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:44133:17)
at Object.onwarn (node_modules\rollup\dist\shared\rollup.js:19693:20)
at ModuleLoader.handleResolveId (node_modules\rollup\dist\shared\rollup.js:18442:26)
at node_modules\rollup\dist\shared\rollup.js:18409:22
at async Promise.all (index 0)
at async ModuleLoader.fetchStaticDependencies (node_modules\rollup\dist\shared\rollup.js:18407:34)
at async Promise.all (index 0)
at async ModuleLoader.fetchModule (node_modules\rollup\dist\shared\rollup.js:18384:9)
at async Promise.all (index 0)
at async ModuleLoader.fetchStaticDependencies (node_modules\rollup\dist\shared\rollup.js:18407:34)
at async Promise.all (index 0)
at async ModuleLoader.fetchModule (node_modules\rollup\dist\shared\rollup.js:18384:9)
at async node_modules\rollup\dist\shared\rollup.js:18357:48
at async Promise.all (index 1)
at async ModuleLoader.fetchDynamicDependencies (node_modules\rollup\dist\shared\rollup.js:18347:30)
WARN [vite:css] @charset must precede all other statements 01:12:23
328| border-radius: 24px 0;
329| }
330| @charset "UTF-8";
| ^
331| @-webkit-keyframes v-shake {
332| 59% {I'm not familiar with rollup, any help would be appreciated.
i have same problem
after add vuetify to a vite nuxt app
just change the file path and then it's working
from '/v.png' to '../static/v.png' in the inspire.vue and also change the svg file path in the VuetifyLog.vue
from '/vuetify-logo.svg' to '../static/vuetify-logo.svg'
just change the file path and then it's working
from '/v.png' to '../static/v.png' in the inspire.vue and also change the svg file path in the VuetifyLog.vue
from '/vuetify-logo.svg' to '../static/vuetify-logo.svg'
This worked great! Is there any explanation of why this fixes it and why it's a current issue?
This should work by default with v0.2.x
Still not working with the latest create-nuxt-app and nuxt-vite:
🧪 Vite mode is experimental and some nuxt modules might be incompatible 11:27:17
If found a bug, please report via https://github.com/nuxt/vite/issues with a minimal reproduction.
You can enable unstable server-side rendering using `vite: { ssr: true }` in `nuxt.config`
╭───────────────────────────────────────╮
│ │
│ Nuxt @ v2.15.8 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: client-side │
│ ▸ Target: server │
│ │
│ Listening: http://localhost:3000/ │
│ │
│ ⚡ Vite Mode Enabled (v0.2.2) │
│ │
╰───────────────────────────────────────╯
i Preparing project for development 11:27:19
i Initial build may take a while 11:27:19
i Discovered Components: .nuxt/components/readme.md 11:27:19
√ Builder initialized 11:27:19
√ Nuxt files generated 11:27:20
WARN [vite:css] @charset must precede all other statements 11:27:23
326| border-radius: 24px 0;
327| }
328| @charset "UTF-8";
| ^
329| @-webkit-keyframes v-shake {
330| 59% {
i Vite warmed up in 1802ms 11:27:23
i Waiting for file changes 11:27:23
i Memory usage: 147 MB (RSS: 227 MB) 11:27:23
i Listening on: http://localhost:3000/ 11:27:23
WARN [vite:css] @charset must precede all other statements 11:27:24
326| border-radius: 24px 0;
327| }
328| @charset "UTF-8";
| ^
329| @-webkit-keyframes v-shake {
330| 59% { (x2)
i Server rebuilt in 1607ms
Chrome console log shows:
[vite] connecting...
client.ts:52 [vite] connected.
vuetify-logo.svg:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/svg+xml". Strict MIME type checking is enforced for module scripts per HTML spec.
localhost/:1 The resource http://localhost:3000/_nuxt/empty.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
Trying to set vite.publicDir to "static", but it does not work as well.
have you solved this problem? please help me