import element-plus css.
rzp1 opened this issue · comments
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'
}
+1
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"
}
}
Looks like same problem with SSG build:
Here has a hack of this problem:
#156 (comment)
ztxone
No it's not working, it's a fix for people using swiper not element...
Is there no solution until now?
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 ?
try this in vite.config
Components({ ... resolvers: [ ElementPlusResolver({ importStyle: 'css', ssr: true }), ... ] })
@xingzichen thank you, this worked for me
Another option is to move code that imports .css out of node_modules
any solution?
I add the ssr options in vite.config.js, it works for me.
ssr: {
noExternal: ['element-plus']
}
try this in vite.config
Components({ ... resolvers: [ ElementPlusResolver({ importStyle: 'css', ssr: true }), ... ] })
thk! it works!!!