Vite-SSG cannot build element-plus CSS

Question

Vite-SSG cannot build element-plus CSS

8bu opened this issue 2 years ago · comments

LONG commented 2 years ago

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.

Sadegh Barati · Answer 1 · Wed Apr 20 2022 16:51:32 GMT+0800 (China Standard Time)

your repository is private ? 404

LONG · Answer 2 · Wed Apr 20 2022 17:03:47 GMT+0800 (China Standard Time)

sorry my mistake, changed it to public

Anton ZTXONE · Answer 3 · Thu Apr 21 2022 23:02:00 GMT+0800 (China Standard Time)

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'
}

Joaquín Sánchez · Answer 4 · Thu Apr 21 2022 23:04:43 GMT+0800 (China Standard Time)

@ztxone check this #191 (comment)

Joaquín Sánchez · Answer 5 · Thu Apr 21 2022 23:27:56 GMT+0800 (China Standard Time)

@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;

LONG · Answer 6 · Thu Apr 21 2022 23:31:49 GMT+0800 (China Standard Time)

@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

Joaquín Sánchez · Answer 7 · Thu Apr 21 2022 23:48:39 GMT+0800 (China Standard Time)

@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;

Joaquín Sánchez · Answer 8 · Thu Apr 21 2022 23:50:24 GMT+0800 (China Standard Time)

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

Joaquín Sánchez · Answer 9 · Thu Apr 21 2022 23:54:55 GMT+0800 (China Standard Time)

@8bu running the https-preview script: