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:
#156 (comment)

[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/element-plus@2.2.2_vue@3.2.36/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!!!