Cannot compile SFC file in another package
When importing the SFC file in another package from the vite application, the following error is output.
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
Also, during vite build
, an error is output that rollup cannot parse the SFC file.
The following is when running it in my local environment.
$ vite build
vite v0.10.2
Building for production...
[vite] Build errored out.
{ Error: Could not load /Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue?vue&type=script&lang=ts (imported by /Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue): /Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue is not parsed it yet
at getDescriptor (/Users/intern/work/scouter_dev/dev/vite-playground/node_modules/rollup-plugin-vue/dist/index.js:202:11)
at Object.load (/Users/intern/work/scouter_dev/dev/vite-playground/node_modules/rollup-plugin-vue/dist/index.js:49:36)
at Promise.resolve.then (/Users/intern/work/scouter_dev/dev/vite-playground/node_modules/rollup/dist/shared/rollup.js:18100:25)
code: 'PLUGIN_ERROR',
plugin: 'vue',
hook: 'load',
watchFiles:
[ '/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/index.html',
'/Users/intern/work/scouter_dev/dev/vite-playground/node_modules/vue/dist/vue.runtime.esm-bundler.js',
'/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/App.vue',
'/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/App.vue?vue&type=script&lang=ts',
'/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/App.vue?vue&type=template&id=d36c9542',
'/Users/intern/work/scouter_dev/dev/vite-playground/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
'/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue',
'/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue?vue&type=script&lang=ts',
'/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue?vue&type=template&id=43a490e4' ] }
Work repository https://github.com/ushironoko/vite-playground
The repository consists of mono repos, and another packages
can be found in packages / vite-components
.
This worked fine when I placed the SFC file in the same workspace. Do you know the cause?
Thank you.
@yyx990803
The log of DEBUG dev
is below.
$ DEBUG=vite* vite
vite v0.10.2
Dev server running at:
> http://localhost:3000
> http://192.168.3.4:3000
vite:server server ready in 130ms. +0ms
vite:hmr ws client connected +0ms
vite:history redirecting / to /index.html +0ms
vite:hmr serving hmr client +101ms
vite:resolve (vue) vue -> /Users/intern/work/scouter_dev/dev/vite-playground/node_modules/vue/dist/vue.runtime.esm-browser.js +0ms
vite:rewrite not rewriting: /@hmr +0ms
vite:sfc /Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/App.vue parsed in 57ms. +0ms
vite:hmr ws client connected +68ms
vite:sfc /Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/App.vue parse cache hit +10ms
vite:sfc /App.vue template compiled in 15ms. +15ms
vite:resolve (node_modules) @vite-playground/components/components/BaseButton.vue -> /Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue +88ms
vite:rewrite not rewriting: /@modules/@vite-playground/components/components/BaseButton.vue +86ms
vite:rewrite /@modules/vue: no imports found. +8ms
DEBUG build
$ DEBUG=vite* vite build
vite v0.10.2
Building for production...
vite:build:resolve /Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue?vue&type=script&lang=ts --> /Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue?vue&type=script&lang=ts +0ms
vite:build:resolve /Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue?vue&type=template&id=43a490e4 --> /Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue?vue&type=template&id=43a490e4 +1ms
[vite] Build errored out.
{ Error: Could not load /Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue?vue&type=script&lang=ts (imported by /Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue): /Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue is not parsed it yet
at getDescriptor (/Users/intern/work/scouter_dev/dev/vite-playground/node_modules/rollup-plugin-vue/dist/index.js:202:11)
at Object.load (/Users/intern/work/scouter_dev/dev/vite-playground/node_modules/rollup-plugin-vue/dist/index.js:49:36)
at Promise.resolve.then (/Users/intern/work/scouter_dev/dev/vite-playground/node_modules/rollup/dist/shared/rollup.js:18100:25)
code: 'PLUGIN_ERROR',
plugin: 'vue',
hook: 'load',
watchFiles:
[ '/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/index.html',
'/Users/intern/work/scouter_dev/dev/vite-playground/node_modules/vue/dist/vue.runtime.esm-bundler.js',
'/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/App.vue',
'/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/App.vue?vue&type=script&lang=ts',
'/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/App.vue?vue&type=template&id=d36c9542',
'/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue',
'/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue?vue&type=script&lang=ts',
'/Users/intern/work/scouter_dev/dev/vite-playground/app/vite-app/Users/intern/work/scouter_dev/dev/vite-playground/packages/vite-components/components/BaseButton.vue?vue&type=template&id=43a490e4' ] }
✨ Done in 0.77s.
@underfin, @ushironoko Is Using Version 0.10.2 Which Is Not Typescript Supported. Typescript Support Added In 0.11.0.
@bekalshenoy @underfin
Thank you for the review.
I raised vite to a TypeScript compatible version and rebuilt it, but the error was not resolved.
Also, even if you delete the lang =" ts "
and defineComponent
of the component to be imported, the build was not successful...
This issue seems to be similar to #74 . When I started the development server with vite
, the same console error was output in the browser.