"Unknown file extension ".css" after" message after configuring auto imports

[mekedron]

It's impossible to configure auto import using unplugin-auto-import and unplugin-vue-components for vite bundler.

When I add these lines to nuxt.config.ts:

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import { defineNuxtConfig } from 'nuxt';
// ...
export default defineNuxtConfig({
  // ...other options

  // bundling
  vite: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [
          ElementPlusResolver(),
        ],
      }),
    ],
  },
})

When I'm trying to load the index page I get the following output in a server console:

n1k1tk@n1k1tk:~/PhpstormProjects/element-plus-nuxt-starter$ yarn dev
yarn run v1.22.18
$ nuxi dev
Nuxt CLI v3.0.0-rc.3                                                                                                                                                                                                   12:36:16
                                                                                                                                                                                                                       12:36:16
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.100.105:3000/
  > Network:  http://172.18.0.1:3000/
  > Network:  http://172.19.0.1:3000/
  > Network:  http://172.20.0.1:3000/

ℹ Vite server warmed up in 689ms                                                                                                                                                                                       12:36:23
ℹ Vite client warmed up in 6649ms                                                                                                                                                                                      12:36:26
✔ Vite server built in 4431ms                                                                                                                                                                                          12:36:27
✔ Nitro built in 393 ms                                                                                                                                                                                          nitro 12:36:27
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /home/n1k1tk/PhpstormProjects/element-plus-nuxt-starter/node_modules/element-plus/theme-chalk/el-date-picker.css
    at new NodeError (node:internal/errors:372:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
    at defaultLoad (node:internal/modules/esm/load:21:20)
    at ESMLoader.load (node:internal/modules/esm/loader:407:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:326:22)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:345:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:304:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:82:21) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

[mynameisjeffe]

I have the same issue as above

[jeffrey-dot-li]

Same issue, any fix?

[NexZhu]

Adding this made it work:

  build: {
    transpile: [
      // https://github.com/element-plus/element-plus-nuxt-starter/blob/44644788ee0d2a2580769769f9885b5cd9f7c0ab/nuxt.config.ts#L27
      ...(lifecycle === 'build' || lifecycle === 'generate'
        ? ['element-plus']
        : []),
      // For importing 'element-plus/es/components/xxx/style/css' to work
      'element-plus/es',
    ],
  },

See: https://github.com/daotl/nuxt-starter/blob/master/nuxt.config.ts

[NexZhu]

Or alternatively, you can set ssr: true for ElementPlusResolver

ElementPlusResolver({ ssr: true })

See: https://github.com/antfu/vite-ssg/issues/171#issuecomment-1151963829

[maicWorkGithub]

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import IconsResolver from "unplugin-icons/resolver"

const lifecycle = process.env.npm_lifecycle_event

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  meta: {
    title: 'Element Plus + Nuxt 3',
    meta: [
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'ElementPlus + Nuxt3',
      },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },
  build: {
    transpile: [
      lifecycle === 'build' || lifecycle === 'generate' ? 'element-plus' : '',
      'element-plus/es'
    ],
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
  vite: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        dts: true,
        resolvers: [ElementPlusResolver({ ssr: true }), IconsResolver({})],
      }),
    ],
  },
  modules: [
    '@nuxt/content', '@vueuse/nuxt',
  ],
  nitro: {
    plugins: [
      // "~/database/index.ts",
    ]
  },
  css: [
    '~/styles/index.scss'
  ]
})

Got error:

ElementPlusError: [IdInjection] Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
usage: app.provide(ID_INJECTION_KEY, {
  prefix: number,
  current: number,
})
    at Object.debugWarn
...