Subscribe on changes!

Cannot compile SFC file in another package

avatar
May 5th 2020

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.

avatar
May 5th 2020

Can you try DEBUG=vite* vite + DEBUG=vite* vite build and provide the logs?

avatar
May 6th 2020

@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.
avatar
May 6th 2020

Look caused by compiler ts.We can track here.#6

avatar
May 6th 2020

@underfin, @ushironoko Is Using Version 0.10.2 Which Is Not Typescript Supported. Typescript Support Added In 0.11.0.

avatar
May 6th 2020

@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...

avatar
May 7th 2020

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.

avatar
May 7th 2020

Just realized the build part isn't working yet.

avatar
May 8th 2020

Should work both for dev and build in 12.0.0.

avatar
May 8th 2020

@yyx990803 Thank you for the great work.👍