search

ElMassimo / iles

🏝 The joyful site generator
https://iles.pages.dev
MIT License
1.07k stars 31 forks source link

Cannot hydrate kebab-case components #151

Closed ouuan closed 2 years ago

ouuan commented 2 years ago

Description 📖

If I use kebab-case <component-name client:load /> instead of PascalCase <ComponentName client:load />, iles will throw an error.

The component is saved in a file named ComponentName.vue.

kebab-case works if client:load is not added.

Reproduction 🐞

Dependencies Info ``` iles v0.7.40 vite v2.9.14 dependencies: @napi-rs/simple-git 0.1.8 @unocss/reset 0.44.0 @vueuse/core 8.9.1 iles 0.7.40 plausible-tracker 0.3.8 prism-themes 1.9.0 unocss 0.44.0 vue 3.2.37 devDependencies: @iconify-json/fluent 1.1.13 @islands/excerpt 0.1.3 @islands/feed 0.1.2 @islands/headings 0.1.2 @islands/images 0.3.2 @islands/prism 0.1.1 @typescript-eslint/eslint-plugin 5.30.5 @typescript-eslint/parser 5.30.5 @unocss/transformer-directives 0.44.0 @vue/eslint-config-typescript 11.0.0 eslint 8.19.0 eslint-config-airbnb-base 15.0.0 eslint-plugin-import 2.26.0 eslint-plugin-vue 9.2.0 remark-gfm 3.0.1 sass 1.53.0 typescript 4.7.4 vite 2.9.14 vite-plugin-compression 0.5.1 vue-tsc 0.38.4 ```

Logs 📜

Output ``` Could not resolve theme-switcher in /home/ouuan/GitHub/iles-blog/src/components/NavBar.vue. Make sure to import it explicitly, or add a component resolver. 03:07:22 [vite] Internal server error: Could not resolve theme-switcher in /home/ouuan/GitHub/iles-blog/src/components/NavBar.vue. Make sure to import it explicitly, or add a component resolver. Plugin: iles:detect-islands-in-vue File: /home/ouuan/GitHub/iles-blog/src/components/NavBar.vue at resolveComponent (/home/ouuan/GitHub/iles-blog/node_modules/.pnpm/iles@0.7.40_sass@1.53.0/node_modules/iles/dist/node/chunk-NPSNYBZP.js:108:11) at async resolveComponentImport (/home/ouuan/GitHub/iles-blog/node_modules/.pnpm/iles@0.7.40_sass@1.53.0/node_modules/iles/dist/node/chunk-NPSNYBZP.js:68:18) at async visitSFCNode (/home/ouuan/GitHub/iles-blog/node_modules/.pnpm/iles@0.7.40_sass@1.53.0/node_modules/iles/dist/node/chunk-NPSNYBZP.js:89:24) at async visitSFCNode (/home/ouuan/GitHub/iles-blog/node_modules/.pnpm/iles@0.7.40_sass@1.53.0/node_modules/iles/dist/node/chunk-NPSNYBZP.js:102:7) at async visitSFCNode (/home/ouuan/GitHub/iles-blog/node_modules/.pnpm/iles@0.7.40_sass@1.53.0/node_modules/iles/dist/node/chunk-NPSNYBZP.js:102:7) at async visitSFCNode (/home/ouuan/GitHub/iles-blog/node_modules/.pnpm/iles@0.7.40_sass@1.53.0/node_modules/iles/dist/node/chunk-NPSNYBZP.js:102:7) at async visitSFCNode (/home/ouuan/GitHub/iles-blog/node_modules/.pnpm/iles@0.7.40_sass@1.53.0/node_modules/iles/dist/node/chunk-NPSNYBZP.js:102:7) at async wrapIslandsInSFC (/home/ouuan/GitHub/iles-blog/node_modules/.pnpm/iles@0.7.40_sass@1.53.0/node_modules/iles/dist/node/chunk-NPSNYBZP.js:60:3) at async Object.transform (/home/ouuan/GitHub/iles-blog/node_modules/.pnpm/vite@2.9.14_sass@1.53.0/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:39317:30) at async doTransform (/home/ouuan/GitHub/iles-blog/node_modules/.pnpm/vite@2.9.14_sass@1.53.0/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:50037:29) ```
ElMassimo commented 2 years ago

Hi Yufan, thanks for reporting.

Internally, we are using unplugin-vue-components to detect components, and it seems like it will work both ways if applying pascalCase before calling findComponent.