CODEWITHSUNDEEP
vuejs3vite
Vinicius Andrade
Vinicius Andrade

Reputation: 586

Vite - Adding auto-imports.d.ts to gitignore, generates error building for production

I've installed the following packages in my vue3 with vite project:

unplugin-auto-import

unplugin-vue-components

I noticed that if I don't debug the app before, the auto import files are not generated.

Is it a miss configuration?

Here is my vite.config

import VueI18n from '@intlify/vite-plugin-vue-i18n'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import DefineOptions from 'unplugin-vue-define-options/vite'
import { fileURLToPath } from 'url'
import { defineConfig } from 'vite'
import Pages from 'vite-plugin-pages'
import Layouts from 'vite-plugin-vue-layouts'
import vuetify from 'vite-plugin-vuetify'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),

    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({ 
      styles: {
        configFile: 'src/styles/variables/_vuetify.scss',
      },
    }),
    Pages({
      resolver:'vue'
    }),
    Layouts({}),
    Components({
      dirs: ['src/@core/components', 'src/views/demos'],
      dts: true,
    }),
    AutoImport({
      imports: ['vue', 'vue-router', '@vueuse/core', 'vue-i18n', 'pinia'],
      dirs: [
        'src/store',
        'src/plugins/utils',
        'src/enums',
        'src/composables'
      ],
      vueTemplate: true,
    }),
    VueI18n({
      runtimeOnly: true,
      compositionOnly: true,
      include: [
        fileURLToPath(new URL('./src/plugins/i18n/locales/**', import.meta.url)),
      ],
    }),
    DefineOptions(),
  ],
  define: { 'process.env': {} },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@themeConfig': fileURLToPath(new URL('./themeConfig.ts', import.meta.url)),
      '@core': fileURLToPath(new URL('./src/@core', import.meta.url)),
      '@layouts': fileURLToPath(new URL('./src/@layouts', import.meta.url)),
      '@configured-variables': fileURLToPath(new URL('./src/styles/variables/_template.scss', import.meta.url)),
      '@axios': fileURLToPath(new URL('./src/plugins/axios', import.meta.url)),
      '@validators': fileURLToPath(new URL('./src/@core/utils/validators', import.meta.url)),
      'apexcharts': fileURLToPath(new URL('node_modules/apexcharts-clevision', import.meta.url)),
      '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
      '@enums': fileURLToPath(new URL('./src/enums', import.meta.url)),
      '@router': fileURLToPath(new URL('./src/router', import.meta.url)),
      '@locales': fileURLToPath(new URL('./src/locales', import.meta.url)),
      '@styles': fileURLToPath(new URL('./src/styles', import.meta.url)),
      '@mixins': fileURLToPath(new URL('./src/mixins', import.meta.url)),
      '@types': fileURLToPath(new URL('./src/types', import.meta.url)),
      '@navigation': fileURLToPath(new URL('./src/navigation', import.meta.url)),
      '@views': fileURLToPath(new URL('./src/views', import.meta.url)),
      '@plugins': fileURLToPath(new URL('./src/plugins', import.meta.url)),
      '@store': fileURLToPath(new URL('./src/store', import.meta.url)),
      '@models': fileURLToPath(new URL('./src/models', import.meta.url)),
      '@interfaces': fileURLToPath(new URL('./src/interfaces', import.meta.url)),
      '@composables': fileURLToPath(new URL('./src/composables', import.meta.url)),
    },
  },
  build: {
    chunkSizeWarningLimit: 5000,
    emptyOutDir: true,
    minify: process.env.NODE_ENV === 'production',
  },
  optimizeDeps: {
    exclude: ['vuetify'],
    entries: [
      './src/**/*.vue',
    ],
  },
})

It would be nice if those plugins run also during build process. This needs came, because we have a large team working in this Ui project, and everytime we had to resolve conflicts of auto import files

Upvotes: 0

Views: 3780

Answers (1)

Vinicius Andrade
Vinicius Andrade

Reputation: 586

I've found out a work around to generate the auto-imports.d.ts.

Basically I changed my build script:

FROM

  "build":"vue-tsc --noEmit && vite build"

TO

  "build":"vite build && vue-tsc --noEmit"

This way vite firstly will generate the auto imports,then generate the dist assets and after it will do the typechecks..

An issue was opened regarding this topic and after I posted my workaround the owner commented:

It's recommended to commit the file. Otherwise, you should run the build before typechecking. Comment

Upvotes: 1

Related Questions