Vite-SSG cannot build element-plus CSS

[8bu]

Description

Vite-SSG cannot build element-plus CSS

Reproduce

• Example source: https://github.com/8bu/vite-ssg-error-element-plus
• Step to reproduce: Run pnpm build
• Error:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for \\vite-ssg-error-element-plus\node_modules\.pnpm\element-plus@2.1.10_vue@3.2.33\node_modules\element-plus\theme-chalk\el-footer.css
    at new NodeError (node:internal/errors:371:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:87:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:102:38)
    at defaultLoad (node:internal/modules/esm/load:21:14)
    at ESMLoader.load (node:internal/modules/esm/loader:359:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:280:58)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:297:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:261:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:81:21) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
 ELIFECYCLE  Command failed with exit code 1.

[sadeghbarati]

your repository is private ? 404

[8bu]

sorry my mistake, changed it to public

[ztxone]

Same with Swiper:

[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);
^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /my-path/node_modules/.pnpm/swiper@8.1.3/node_modules/swiper/swiper.min.css
at new NodeError (node:internal/errors:371:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:87:11)
at defaultGetFormat (node:internal/modules/esm/get_format:102:38)
at defaultLoad (node:internal/modules/esm/load:21:14)
at ESMLoader.load (node:internal/modules/esm/loader:359:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:280:58)
at new ModuleJob (node:internal/modules/esm/module_job:66:26)
at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:297:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:261:34)
at async ModuleWrap. (node:internal/modules/esm/module_job:81:21) {
code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

[userquin]

@ztxone check this #191 (comment)

[userquin]

@8bu I have it working removing ElementPlusResolver from unplugin-vue-components plugin options (requires importing element-plus components manually), but then we get this error:

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
file:///F:/work/projects/quini/GitHub/issue-repro/vite-ssg-error-element-plus/node_modules/.pnpm/element-plus@2.1.10_vue@3.2.33/node_modules/element-plus/es/components/popper/src/content.mjs:1
import { placements } from '@popperjs/core';
         ^^^^^^^^^^
SyntaxError: Named export 'placements' not found. The requested module '@popperjs/core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@popperjs/core';
const { placements } = pkg;

[8bu]

@8bu I have it working removing ElementPlusResolver from unplugin-vue-components plugin options (requires importing element-plus components manually), but then we get this error:

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
file:///F:/work/projects/quini/GitHub/issue-repro/vite-ssg-error-element-plus/node_modules/.pnpm/element-plus@2.1.10_vue@3.2.33/node_modules/element-plus/es/components/popper/src/content.mjs:1
import { placements } from '@popperjs/core';
         ^^^^^^^^^^
SyntaxError: Named export 'placements' not found. The requested module '@popperjs/core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@popperjs/core';
const { placements } = pkg;

Have u try to change vite/ssg build mode to cjs?
Btw I wanna use the element-plus resolver then so need to wait for a better implementation or vite-ssg fix this issue

[userquin]

@8bu patching node_modules/element-plus/es/components/popper/src/content.mjs seems to work, removing also ElementPlusResolver from unplugin-vue-components plugin option on your repo:

//import { placements } from '@popperjs/core';
import * as pkg from '@popperjs/core';
const { placements } = pkg;

[userquin]

Have u try to change vite/ssg build mode to cjs?

Yes, the same error

Btw I wanna use the element-plus resolver then so need to wait for a better implementation or vite-ssg fix this issue

We cannot fix it here

[8bu]

I guess I will not use SSG then since the resolver make things easier

[userquin]

@8bu running the https-preview script:

[8bu]

it looks broken (the aside is placed on top). Probably no css was imported at all

[userquin]

adding the resolver and running the dev script the layout is the same

[userquin]

you're right: I forget to remove the static imports

[matiboy]

element-plus@2.1.11 fixes the popperjs import issue (element-plus/element-plus#7321)
Unplugin resolver not working atm but manually importing the components allows to build successfully.
Need to import the css as well, per the documentation import 'element-plus/dist/index.css' in main.ts

[akil-rails]

Unplugin resolver still not working, have to import the components & css manually .

[brc-dd]

You probably need to pass { ssr: true } to ElementPlusResolver. Here is the output on your repo (with updated deps):

But quite large chunks are being generated:

Is tree-shaking not working properly? I can count over 150 components in that file.

[socketbear]

#171 (comment)

solution, here!