import element-plus css.

[rzp1]

SSG building produce an issue, when use button of element-plus. CSS importing has some problem.

[vite-ssg] Build for server...
vite v2.7.6 building SSR bundle for production...
✓ 52 modules transformed.
.vite-ssg-temp/manifest.webmanifest        0.38 KiB
.vite-ssg-temp/main.mjs                    61.38 KiB
.vite-ssg-temp/assets/style.52c8292a.css   21.69 KiB

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/rzp/Code/github/vitesee/node_modules/element-plus/es/components/button/style/css' imported from /Users/rzp/Code/github/vitesee/.vite-ssg-temp/main.mjs
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:391:11)
    at moduleResolve (node:internal/modules/esm/resolve:893:10)
    at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:1004:11)
    at Loader.resolve (node:internal/modules/esm/loader:89:40)
    at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

[leosin]

+1

[ztxone]

Looks like same problem with SSG build:

---

[vite-ssg] Build for server... vite v2.8.6 building SSR bundle for production... ✓ 22 modules transformed. .vite-ssg-temp/main.mjs .vite-ssg-temp/assets/style.f6a3540b.css 56.96 KiB

[vite-ssg] An internal error occurred. [vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues

(node:50456) UnhandledPromiseRejectionWarning: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /Users/ztxone/Downloads/domain/vue3_vite_tw3/node_modules/swiper/swiper.min.css at new NodeError (internal/errors.js:322:7) at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:71:15) at Loader.getFormat (internal/modules/esm/loader.js:105:42) at Loader.getModuleJob (internal/modules/esm/loader.js:243:31) at async ModuleWrap. (internal/modules/esm/module_job.js:78:21) at async Promise.all (index 6) at async link (internal/modules/esm/module_job.js:83:9) (Use node --trace-warnings ... to show where the warning was created)

(node:50456) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)

(node:50456) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

---

package.json { "scripts": { "dev": "vite --host", "build": "vite build", "build-ssg": "vite-ssg build", "serve": "vite preview" }, "dependencies": { "swiper": "^8.0.7", "vue": "^3.2.20", "vue-router": "^4.0.12" }, "devDependencies": { "@headlessui/vue": "^1.4.1", "@tailwindcss/aspect-ratio": "^0.3.0", "@tailwindcss/forms": "^0.4.1", "@tailwindcss/line-clamp": "^0.2.2", "@tailwindcss/typography": "^0.5.2", "@types/tailwindcss": "^2.2.1", "@vitejs/plugin-vue": "^1.9.3", "@vueuse/head": "^0.7.5", "autoprefixer": "^10.3.7", "tailwindcss": "^3.0.23", "vite": "^2.6.7", "vite-plugin-pages": "^0.21.4", "vite-ssg": "^0.17.11" } }

[ztxone]

Looks like same problem with SSG build:

Here has a hack of this problem: https://github.com/antfu/vite-ssg/issues/156#issuecomment-1047341987

[AxelConceicao]

ztxone

No it's not working, it's a fix for people using swiper not element...

[sohaha]

Is there no solution until now?

[mrzdevcore]

I have the same issue with element-plus

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
node:internal/errors:465
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /Users/mrzdecore/Projects/oomcs/node_modules/.pnpm/[email protected][email protected]/node_modules/element-plus/theme-chalk/el-row.css
    at new NodeError (node:internal/errors:372:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:80:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:122: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'
}

is there any work arround ?

[xingzichen]

try this in vite.config Components({ ... resolvers: [ ElementPlusResolver({ importStyle: 'css', ssr: true }), ... ] })

[Grawl]

@xingzichen thank you, this worked for me

[Grawl]

Another option is to move code that imports .css out of node_modules

[morty0824]

any solution?

[shazhou2015]

I add the ssr options in vite.config.js, it works for me.

ssr: {
    noExternal: ['element-plus']
}

[fhk255a]

try this in vite.config Components({ ... resolvers: [ ElementPlusResolver({ importStyle: 'css', ssr: true }), ... ] })

thk! it works!!!