javascript - Vite Build Command Hangs at 'modules transformed.' in Vue 3.3.4, Vite 4.3.8 Environment - Stack Ove

admin管理员组

文章数量:1289910

"Hello, I'm currently working on a project using Vue 3.3.4, Vuetify 3.2.5, and Vite 4.3.8. When I run the vite build mand, the process seems to hang and doesn't plete. The last output I see is:

✓ 679 modules transformed.

After this line, nothing else happens, and the build process doesn't finish. I've tried to look for solutions online, but I haven't found anything that addresses this specific issue.

Here are some additional details about my environment:

• Operating System: macOS 13.3.1 (a)(22E772610a)
• Node.js Version: 18.15.0

Additionally, all the packages in my package.json file are up-to-date:

  "dependencies": {
    "@casl/ability": "^6.2.0",
    "@casl/vue": "^2.2.0",
    "@floating-ui/dom": "^1.2.7",
    "@mdi/font": "^7.0.96",
    "@vueuse/core": "^10.1.2",
    "@vueuse/math": "^10.1.2",
    "axios": "^1.4.0",
    "axios-mock-adapter": "^1.21.2",
    "firebase": "^9.19.1",
    "jwt-decode": "^3.1.2",
    "pinia": "^2.0.24",
    "postcss": "^8",
    "postcss-sorting": "^8.0.2",
    "prismjs": "^1.29.0",
    "sass": "^1.56.1",
    "stylelint-order": "^6.0.3",
    "vue": "^3.2.45",
    "vue-flatpickr-ponent": "^11.0.3",
    "vue-i18n": "^9.2.2",
    "vue-prism-ponent": "^2.0.0",
    "vue-router": "^4.1.5",
    "vue3-perfect-scrollbar": "^1.6.0",
    "vuetify": "^3.0.3",
    "webfontloader": "^1.6.28"
  },
  "devDependencies": {
    "@antfu/eslint-config-vue": "^0.38.5",
    "@fullcalendar/core": "^6.1.6",
    "@fullcalendar/daygrid": "^6.1.6",
    "@fullcalendar/interaction": "^6.1.6",
    "@fullcalendar/list": "^6.1.6",
    "@fullcalendar/timegrid": "^6.1.6",
    "@fullcalendar/vue3": "^6.1.6",
    "@iconify-json/mdi": "^1.1.35",
    "@iconify/tools": "^2.1.2",
    "@iconify/vue": "^4.1.1",
    "@intlify/unplugin-vue-i18n": "^0.10.0",
    "@types/node": "^18.7.18",
    "@types/webfontloader": "^1.6.34",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "@vitejs/plugin-vue": "^4.2.1",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "eslint": "^8.38.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-import-resolver-typescript": "^3.5.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-promise": "^6.0.1",
    "eslint-plugin-sonarjs": "^0.19.0",
    "eslint-plugin-unicorn": "^46.0.0",
    "eslint-plugin-vue": "^9.10.0",
    "firebase-tools": "^12.0.0",
    "postcss-html": "^1.5.0",
    "prettier": "^2.8.7",
    "stylelint": "^15.6.1",
    "stylelint-config-idiomatic-order": "^9.0.0",
    "stylelint-config-standard-scss": "^9.0.0",
    "stylelint-use-logical-spec": "^5.0.0",
    "type-fest": "^3.2.0",
    "typescript": "^5.0.4",
    "unplugin-auto-import": "^0.15.3",
    "unplugin-vue-ponents": "^0.24.1",
    "vite": "^4.3.4",
    "vite-plugin-pages": "^0.29.0",
    "vite-plugin-vue-layouts": "^0.8.0",
    "vite-plugin-vuetify": "^1.0.2",
    "vue-tsc": "^1.0.9"
  }

If anyone has encountered a similar issue with any of these packages, or if there's something that stands out as a potential issue, I would really appreciate your insights. Thank you again!"

• Before updating all packages to their latest versions, I didn't encounter this issue.
• I've tried deleting node_modules and reinstalling the packages.
• The vite --host mand works as expected.

"Hello, I'm currently working on a project using Vue 3.3.4, Vuetify 3.2.5, and Vite 4.3.8. When I run the vite build mand, the process seems to hang and doesn't plete. The last output I see is:

✓ 679 modules transformed.

After this line, nothing else happens, and the build process doesn't finish. I've tried to look for solutions online, but I haven't found anything that addresses this specific issue.

Here are some additional details about my environment:

• Operating System: macOS 13.3.1 (a)(22E772610a)
• Node.js Version: 18.15.0

Additionally, all the packages in my package.json file are up-to-date:

  "dependencies": {
    "@casl/ability": "^6.2.0",
    "@casl/vue": "^2.2.0",
    "@floating-ui/dom": "^1.2.7",
    "@mdi/font": "^7.0.96",
    "@vueuse/core": "^10.1.2",
    "@vueuse/math": "^10.1.2",
    "axios": "^1.4.0",
    "axios-mock-adapter": "^1.21.2",
    "firebase": "^9.19.1",
    "jwt-decode": "^3.1.2",
    "pinia": "^2.0.24",
    "postcss": "^8",
    "postcss-sorting": "^8.0.2",
    "prismjs": "^1.29.0",
    "sass": "^1.56.1",
    "stylelint-order": "^6.0.3",
    "vue": "^3.2.45",
    "vue-flatpickr-ponent": "^11.0.3",
    "vue-i18n": "^9.2.2",
    "vue-prism-ponent": "^2.0.0",
    "vue-router": "^4.1.5",
    "vue3-perfect-scrollbar": "^1.6.0",
    "vuetify": "^3.0.3",
    "webfontloader": "^1.6.28"
  },
  "devDependencies": {
    "@antfu/eslint-config-vue": "^0.38.5",
    "@fullcalendar/core": "^6.1.6",
    "@fullcalendar/daygrid": "^6.1.6",
    "@fullcalendar/interaction": "^6.1.6",
    "@fullcalendar/list": "^6.1.6",
    "@fullcalendar/timegrid": "^6.1.6",
    "@fullcalendar/vue3": "^6.1.6",
    "@iconify-json/mdi": "^1.1.35",
    "@iconify/tools": "^2.1.2",
    "@iconify/vue": "^4.1.1",
    "@intlify/unplugin-vue-i18n": "^0.10.0",
    "@types/node": "^18.7.18",
    "@types/webfontloader": "^1.6.34",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "@vitejs/plugin-vue": "^4.2.1",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "eslint": "^8.38.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-import-resolver-typescript": "^3.5.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-promise": "^6.0.1",
    "eslint-plugin-sonarjs": "^0.19.0",
    "eslint-plugin-unicorn": "^46.0.0",
    "eslint-plugin-vue": "^9.10.0",
    "firebase-tools": "^12.0.0",
    "postcss-html": "^1.5.0",
    "prettier": "^2.8.7",
    "stylelint": "^15.6.1",
    "stylelint-config-idiomatic-order": "^9.0.0",
    "stylelint-config-standard-scss": "^9.0.0",
    "stylelint-use-logical-spec": "^5.0.0",
    "type-fest": "^3.2.0",
    "typescript": "^5.0.4",
    "unplugin-auto-import": "^0.15.3",
    "unplugin-vue-ponents": "^0.24.1",
    "vite": "^4.3.4",
    "vite-plugin-pages": "^0.29.0",
    "vite-plugin-vue-layouts": "^0.8.0",
    "vite-plugin-vuetify": "^1.0.2",
    "vue-tsc": "^1.0.9"
  }

If anyone has encountered a similar issue with any of these packages, or if there's something that stands out as a potential issue, I would really appreciate your insights. Thank you again!"

• Before updating all packages to their latest versions, I didn't encounter this issue.
• I've tried deleting node_modules and reinstalling the packages.
• The vite --host mand works as expected.

• javascript
• typescript
• vuejs3
• vuetify.js
• vite

Share Improve this question Follow asked May 18, 2023 at 14:24 Hayato YOKOTAHayato YOKOTA 7111 silver badge22 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

If you really are using a template from vuexy, the error lies in their default.vue layout.

In my case it looked like this:

<script lang="ts" setup>
import { useSkins } from '@/app/posable/useSkins'
import { useThemeConfig } from '@/app/posable/useThemeConfig'

// @layouts plugin
import { AppContentLayoutNav } from '@/modules/navigation/enums'

const DefaultLayoutWithVerticalNav = defineAsyncComponent(() => import('./ponents/DefaultLayoutWithVerticalNav.vue'))

const { appContentLayoutNav } = useThemeConfig()

const { layoutAttrs, injectSkinClasses } = useSkins()

injectSkinClasses()
</script>

<template>
  <template v-if="appContentLayoutNav === AppContentLayoutNav.Vertical">
    <DefaultLayoutWithVerticalNav v-bind="layoutAttrs" />
  </template>
</template>

<style lang="scss">
// As we are using `layouts` plugin we need its styles to be imported
@use "@layouts/styles/_default-layout";
</style>

You should change the import of the DefaultLayoutWithVerticalNav ponent from

const DefaultLayoutWithVerticalNav = defineAsyncComponent(() => import('./ponents/DefaultLayoutWithVerticalNav.vue'))

to (in your case path may be different)

import DefaultLayoutWithVerticalNav from '@/layouts/ponents/DefaultLayoutWithVerticalNav.vue'

For me this solves the problem and the build mand no longer hangs.

Simply downgrade vue to vue@^3.2 and pinia to pinia@^2.0

According to your dependencies, I recognized your template (vuexy or similar?) and because I use it too I had the same problem for so long and I finally solved it.

After update to Vue 3.3 you should refactor your File system based routing from vite-plugin-pages and vue-router to unplugin-vue-router including AutoImport setting in Vite config.

So, I'll try to explain with an example:

router/index.ts

import routes from '~pages'

...

const router = createRouter({
...
  routes: [
    ...setupLayouts(routes),
  ],
})

vite.config.ts

import Pages from 'vite-plugin-pages'

...

      AutoImport({
        imports: [..., 'vue-router', ... ]

These lines are the cause, even though the vite debug logs won't tell about it.

So, finally you can try like this:

router/index.ts

import { setupLayouts } from 'virtual:generated-layouts'
import { createRouter, createWebHistory } from 'vue-router/auto'

function recursiveLayouts(route) {
  if (route.children) {
    for (let i = 0; i < route.children.length; i++)
      route.children[i] = recursiveLayouts(route.children[i])

    return route
  }

  return setupLayouts([route])[0]
}

...

const router = createRouter({
  ...

  extendRoutes: pages => [
    ...pages.map(route => recursiveLayouts(route)),
  ],
})

vite.config.ts

import { VueRouterAutoImports, getPascalCaseRouteName } from 'unplugin-vue-router'
import VueRouter from 'unplugin-vue-router/vite'

...
// plugins: 

    VueRouter({
      getRouteName: routeNode => {
        // Convert pascal case to kebab case
        return getPascalCaseRouteName(routeNode)
          .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
          .toLowerCase()
      },
    }),

...

 AutoImport({
      imports: [..., VueRouterAutoImports, ...]

本文标签：