vite-plugin-vue icon indicating copy to clipboard operation
vite-plugin-vue copied to clipboard

vite build打包以后报错Failed to fetch dynamically imported module

Open miiiku opened this issue 3 years ago • 2 comments

Describe the bug

这是我的demo目录结构:

.
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── components
│   │   └── ElStyle.css
│   ├── main.ts
│   ├── pages
│   │   ├── index
│   │   │   └── index.vue
│   │   ├── pagea
│   │   │   └── index.vue
│   │   └── pageb
│   │       └── index.vue
│   ├── route.ts
│   ├── style.css
│   └── vite-env.d.ts
└── vite.config.ts

pageapageb都导入了ElStyle.css文件并在控制台打印出来(模拟例如打印时注入css等场景)。

在dev下没有任何问题,但是打包以后执行会报错Failed to fetch dynamically imported module

自己经过反复测试以后,得到如下结果(a页面和b页面代码相同):

  1. 报错Failed to fetch dynamically imported module
import ElStyle from "../../components/ElStyle.css

export default {
  async mounted() {
    console.log(ElStyle)
  }
}
  1. 报错Failed to fetch dynamically imported module
const ElStyle = import.meta.glob("../../components/ElStyle.css", { eager: true })

export default {
  async mounted() {
    console.log(ElStyle)

    const keys = Object.keys(ElStyle)
    console.log((ElStyle[keys[0]] as any).default)
  }
}
  1. 不报错,但是在then中返回{}
const ElStyle = import.meta.glob("../../components/ElStyle.css")

export default {
  async mounted() {
    console.log("b page....")
    console.log(ElStyle)

    const keys = Object.keys(ElStyle)
    console.log(ElStyle[keys[0]])
    ElStyle[keys[0]]().then((data: any) => {
      console.log(data)
    })
  }
}

image

最后:

1.如果只在a文件或者b文件只执行一次这种操作,打包后可以正常运行,如果出现两个地方在导入同一个资源,则会出现报错。

2.在route.ts中不使用异步导入则可以正常运行,比如:

import PageA from "./pages/pagea/index.vue"
import PageB from "./pages/pageb/index.vue"

const routes = [
  {
    path: "/",
    component: () => import("./pages/index/index.vue")
  },
  {
    path: "/a",
    component: PageA
  },
  {
    path: "/b",
    component: PageB
  }
]

Reproduction

https://github.com/miiiku/vite-build-demo

Steps to reproduce

Run npm i, npm build

本地启动一个http服务,访问并点击pagea或者pageb查看控制台

System Info

npx: installed 1 in 2.779s

  System:
    OS: macOS 13.0.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Memory: 56.61 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.19.3 - /usr/local/opt/node@14/bin/node
    npm: 6.14.17 - /usr/local/opt/node@14/bin/npm
  Browsers:
    Safari: 16.1
  npmPackages:
    @vitejs/plugin-vue: ^3.2.0 => 3.2.0
    vite: ^3.2.3 => 3.2.4

Used Package Manager

npm

Logs

No response

Validations

miiiku avatar Dec 01 '22 07:12 miiiku

我也遇到了,我是提示TypeError: Failed to fetch dynamically imported module:https://www.xxxx.js找不到,但是我直接访问https://www.xxxx.js,可以访问到这个js

YuFengjie97 avatar Apr 09 '24 03:04 YuFengjie97

我解决了,我的router里除了/home路径外,都是懒加载,然后随便选一个页面组件改为正常组件加载(非懒加载),然后其他路由全都ok了。不知道原理

YuFengjie97 avatar Apr 09 '24 05:04 YuFengjie97

这应该是 vite 的问题,但 vite 5 中已经移除了这种用法。 image 我试了改为 ElStyle.module.css 打包后正常工作。

edison1105 avatar Sep 25 '24 01:09 edison1105