javascript - Correct way to use dynamic imports in Vite + Vue - Stack Overflow

admin管理员组

文章数量:1292170

We have an app where we've been using a dynamic import syntax in our route definitions, like so:

  ...
  ponent: () => import('./ponents/SomeComponent'),

We recently transitioned to vite, and since the switch, we've been catching TypeError: Failed to fetch dynamically imported module whenever we deploy a new version of the app.

According to this SO post, this is happening because the hash for the files are invalidated on new deploys, but why are the files still being referenced with the previous hashes, when we are shipping a new build altogether?

I also found a previous issue that ran into the same error, and found this link in its thread that talked about how rollup expects a specific syntax for dynamic imports:

// current
ponent: () => import('./ponents/SomeComponent')

// expected?
ponent: () => import('./ponents/SomeComponent.vue')

Could this be why we are getting that Failed to fetch dynamically... error? Because my dynamic imports are missing the file extensions? I am a little confused, because the dynamic imports seem to still work even without the file extensions, it's just that we are catching errors on fresh deploys.

We have an app where we've been using a dynamic import syntax in our route definitions, like so:

  ...
  ponent: () => import('./ponents/SomeComponent'),

We recently transitioned to vite, and since the switch, we've been catching TypeError: Failed to fetch dynamically imported module whenever we deploy a new version of the app.

According to this SO post, this is happening because the hash for the files are invalidated on new deploys, but why are the files still being referenced with the previous hashes, when we are shipping a new build altogether?

I also found a previous issue that ran into the same error, and found this link in its thread that talked about how rollup expects a specific syntax for dynamic imports:

// current
ponent: () => import('./ponents/SomeComponent')

// expected?
ponent: () => import('./ponents/SomeComponent.vue')

Could this be why we are getting that Failed to fetch dynamically... error? Because my dynamic imports are missing the file extensions? I am a little confused, because the dynamic imports seem to still work even without the file extensions, it's just that we are catching errors on fresh deploys.

• javascript
• vue.js
• vite
• rollupjs

Share Improve this question Follow asked Jan 17, 2023 at 15:03 mikemkleemikemklee 48311 gold badge88 silver badges1818 bronze badges 1

• It's unlikely that the question can be certainly answered because the problem with build tool is plex and depends on many factors. But it causes less problems to explicitly specify .vue ext in imports in general – Estus Flask Commented Jan 17, 2023 at 15:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

but why are the files still being referenced with the previous hashes, when we are shipping a new build altogether?

The point of dynamic modules is that not all of the code is loaded to the browser. Let's take the following case, you have a website with 1 Dynamic module that is loaded with a button click.

When you build it, your files should look like this:

index.html
assets/
-- index-abc123.js
-- dynamicModule-aaa111.js

• 'index-abc123.js' will have a reference to 'dynamicModule-aaa111.js'

So when a user will open your website, he should get the following

index.html
assets/
-- index-abc123.js

note that the user didn't load the dynamic module yet.

Now u will make a deployment with a slight change to the DynamicModule file and your file names will change to:

index.html
assets/
-- index-xxx345.js
-- dynamicModule-bbb222.js

Now the user who didn't refresh its browser will click on the button that should import the dynamic module. What will happen is that his browser will try to download 'dynamicModule-aaa111.js' and this file does not exist anymore and is replaced by 'dynamicModule-bbb222.js'. Now you will get the Error(Failed to fetch dynamically imported module)

The correct way to dynamically import ponents with Vue 3 is to use defineAsyncComponent() like described here: https://vuejs/guide/ponents/async.html#basic-usage

<template>
  <some-ponent></some-ponent>

  <ponent :is="varComp"></ponent>
</template>

<script>
import { defineAsyncComponent } from 'vue'

export default {
  ponents: { /* Directly in ponents */
    SomeComponent: defineAsyncComponent(() => import('./ponents/SomeComponent.vue'))
  },
  puted: { /* or as puted property, e.g. with variable */
    varComp() {
      return defineAsyncComponent(() => import(`./ponents/SomeComponent${this.px}.vue`))
    }
  }
}
</script>

本文标签： javascriptCorrect way to use dynamic imports in ViteVueStack Overflow