6

I'm trying to use Vite with dynamic-import Vue SFCs, but it does not work on production build.

There is stackblitz example:

https://stackblitz.com/edit/vitejs-vite-ant1g2?file=src/main.ts

Test command and localhost:3000 shows good.

vite

However preview and localhost:4173 shows blank.

vite build && vite preview

What is wrong? Do you have any solutions?

Peter Matisko
  • 2,113
  • 1
  • 24
  • 47
tamaina
  • 79
  • 1
  • 7
  • JS apps usually do not just "show blank" without any error in console. Check the dev tools.... – Michal Levý Apr 26 '22 at 07:44
  • I can confirm this behaviour and there is no error message on the console. I guess it is about the path `./App.vue`. It is not resolved as an asset, which is needed for production. Did you check out `https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling? – Nechoj Apr 26 '22 at 07:48
  • I forgot to mention that there are no clues in the console. I am not very familiar with Vite and Rollup so I don't know how to apply @Nechoj 's link. – tamaina Apr 26 '22 at 10:02
  • Why do you want dynamic loading of `App.vue` and not standard import? – Nechoj Apr 26 '22 at 10:05
  • More info: I added console.log and found that create cycle of App.vue does't run. – tamaina Apr 26 '22 at 10:11
  • @Nechoj Guys on stackoverflow say so all the time. I am asking why it fails in such a simple use case. And in my product, almost all of dynamic import of SFCs fails--that is, if dynamic import really doesn't work, then I need to give up using dynamic import in the whole product. – tamaina Apr 26 '22 at 10:25
  • I do not recommend using dynamic component import. See also docs: https://vuejs.org/guide/essentials/application.html#the-root-component – Nechoj Apr 26 '22 at 10:29
  • So there is no way to make the rollup understand dynamic imports? – ii iml0sto1 Aug 15 '22 at 20:35

2 Answers2

1

Use defineAsyncComponent.

https://stackblitz.com/edit/vitejs-vite-pmqny3?file=src/main.ts

import { createApp, defineAsyncComponent } from 'vue';

console.log('start app');
createApp(defineAsyncComponent(() => import('./App.vue'))).mount('#app');

Thanks for https://misskey.dev/notes/8zjl4hnyz5

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
tamaina
  • 79
  • 1
  • 7
  • This does not seem to work with dynamic imports – ii iml0sto1 Aug 15 '22 at 20:32
  • This would not work If we don't know what we exactly have to import (for e.g. App.vue) What If the App.vue part is dynamic? – Shakil Alam Aug 23 '22 at 10:56
  • @ShakilAlam Exactly. I am facing the same issue. Please check my question: https://stackoverflow.com/questions/75988909/vue-3-dynamic-import-issue/75988945 – Jayesh Apr 12 '23 at 09:28
1

I was recently doing a PoC and was surprised to know that dynamic imports feature works fine in dev mode but fails in production build without a special configuration. Reason behind this (probably) is that vite uses esbuild as bundler for dev mode while using rollup as bundler for production build.

Due to this discrepancy in the behavior between two modes, I am making sure that I always test a new concept in both dev and production modes to make sure it works in production build too otherwise you will end up developing a feature in dev mode only to realize at a later stage that it is not working in production mode.

You will need to list all the dynamic imports under rollupOptions of vite.configs.ts file in order to make it work in production mode -

import { defineConfig } from 'vite'

export default defineConfig({
    build: {
        rollupOptions: {
            external: [
                "/path/to/external/module.es.js"
            ]
        }
    }
})
Shailendra
  • 319
  • 4
  • 14