search

ElMassimo / iles

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

Auto-install issues #247

Open TechAkayy opened 1 year ago

TechAkayy commented 1 year ago

Description 📖

After scaffolding a basic iles app without non-vue frameworks, and later when adding them via iles config, auto-install throws some errors.

Reproduction 🐞

  1. Create a basic iles app npm create iles@next (don't choose any non-vue frameworks in the prompts)
  2. Install dependencies npm install
  3. Update iles.config.ts. Set one of the non-vue frameworks to true, for eg, solid: true
  4. Start dev-server to check auto-install.

The below error is thrown. image

  1. Check node_modules folder, vite-plugin-solid was in fact installed, so not sure if the above thrown error has any impacts.

Run npx iles info and pnpm list (or npm list) and provide the output:

iles v0.8.7 / vite v3.2.5

Also tried - iles v0.9.5 / vite v4.3.0-beta.4

Logs 📜

If not providing a reproduction:

Output _Run `DEBUG=iles:* npm run dev` or `DEBUG=iles:* npm run build` and provide the output:_ ``` techakayy@M1Pro testing-non-vue-auto-installs % DEBUG=iles:* npm run build > iles-app@0.0.0 build > iles build iles v0.9.5 vite v4.3.0-beta.4 iles:config loaded config at /Users/techakayy/Projects/iles/testing-non-vue-auto-installs/iles.config.ts +0ms iles:config { iles:config root: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs', iles:config modules: [ iles:config { iles:config name: 'iles:base-config', iles:config debug: true, iles:config drafts: false, iles:config turbo: false, iles:config jsx: undefined, iles:config root: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs', iles:config base: '/', iles:config siteUrl: '', iles:config prettyUrls: true, iles:config ssg: [Object], iles:config configPath: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/iles.config.ts', iles:config assetsDir: 'assets', iles:config pagesDir: 'pages', iles:config srcDir: 'src', iles:config outDir: 'dist', iles:config layoutsDir: 'layouts', iles:config tempDir: '.iles-ssg-temp', iles:config modules: [], iles:config namedPlugins: [Object], iles:config resolvePath: undefined, iles:config vitePlugins: [Array], iles:config vite: [Object], iles:config vue: [Object], iles:config extendFrontmatter: [AsyncFunction: extendFrontmatter], iles:config extendRoute: [Function: extendRoute], iles:config extendRoutes: [Function: extendRoutes], iles:config markdown: [Object], iles:config components: [Object] iles:config }, iles:config { iles:config name: '@islands/mdx', iles:config markdown: [Object], iles:config configResolved: [Function: configResolved] iles:config }, iles:config { iles:config name: 'user-config', iles:config solid: true, iles:config configPath: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/iles.config.ts' iles:config }, iles:config { iles:config name: '@islands/pages', iles:config configResolved: [Function: configResolved] iles:config } iles:config ], iles:config debug: true, iles:config drafts: false, iles:config turbo: false, iles:config base: '/', iles:config siteUrl: '', iles:config prettyUrls: true, iles:config ssg: { sitemap: true }, iles:config configPath: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/iles.config.ts', iles:config assetsDir: 'assets', iles:config pagesDir: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/src/pages', iles:config srcDir: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/src', iles:config outDir: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/dist', iles:config layoutsDir: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/src/layouts', iles:config tempDir: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/.iles-ssg-temp', iles:config namedPlugins: { iles:config components: { iles:config name: 'unplugin-vue-components', iles:config enforce: 'post', iles:config api: [Object], iles:config transformInclude: [Function: transformInclude], iles:config transform: [Function (anonymous)], iles:config vite: [Object], iles:config webpack: [Function: webpack], iles:config configResolved: [Function: configResolved], iles:config configureServer: [Function: configureServer] iles:config }, iles:config vue: { iles:config name: 'vite:vue', iles:config handleHotUpdate: [Function: handleHotUpdate], iles:config config: [Function: config], iles:config configResolved: [Function: configResolved], iles:config configureServer: [Function: configureServer], iles:config buildStart: [Function: buildStart], iles:config resolveId: [AsyncFunction: resolveId], iles:config load: [Function: load], iles:config transform: [Function: transform] iles:config }, iles:config pages: { iles:config name: 'iles:pages', iles:config enforce: 'pre', iles:config api: [Getter], iles:config configResolved: [AsyncFunction: configResolved], iles:config configureServer: [AsyncFunction: configureServer], iles:config buildStart: [AsyncFunction: buildStart], iles:config resolveId: [AsyncFunction: resolveId], iles:config load: [AsyncFunction: load], iles:config transform: [AsyncFunction: transform] iles:config } iles:config }, iles:config vitePlugins: [ iles:config { iles:config name: 'solid', iles:config enforce: 'pre', iles:config config: [AsyncFunction: config], iles:config configResolved: [Function: configResolved], iles:config resolveId: [Function: resolveId], iles:config load: [Function: load], iles:config transform: [AsyncFunction: transform] iles:config }, iles:config { iles:config name: 'iles:mdx:compile', iles:config configResolved: [AsyncFunction: configResolved], iles:config transform: [AsyncFunction: transform] iles:config }, iles:config { name: 'iles:mdx:sfc', transform: [AsyncFunction: transform] }, iles:config { iles:config name: 'iles:mdx:hmr', iles:config apply: 'serve', iles:config transform: [Function: transform] iles:config }, iles:config { iles:config name: 'iles:pages', iles:config enforce: 'pre', iles:config api: [Getter], iles:config configResolved: [AsyncFunction: configResolved], iles:config configureServer: [AsyncFunction: configureServer], iles:config buildStart: [AsyncFunction: buildStart], iles:config resolveId: [AsyncFunction: resolveId], iles:config load: [AsyncFunction: load], iles:config transform: [AsyncFunction: transform] iles:config } iles:config ], iles:config vite: { iles:config root: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs', iles:config resolve: { alias: [Array], dedupe: [Array] }, iles:config server: { fs: [Object] }, iles:config build: { cssCodeSplit: false, assetsDir: 'assets' }, iles:config define: { 'import.meta.env.DISPOSE_ISLANDS': false }, iles:config optimizeDeps: { include: [Array], exclude: [Array] }, iles:config base: '/' iles:config }, iles:config vue: { iles:config reactivityTransform: true, iles:config template: { compilerOptions: [Object] } iles:config }, iles:config extendFrontmatter: [AsyncFunction (anonymous)], iles:config extendRoute: [AsyncFunction (anonymous)], iles:config extendRoutes: [AsyncFunction (anonymous)], iles:config markdown: { iles:config jsxRuntime: 'automatic', iles:config jsxImportSource: 'iles', iles:config providerImportSource: 'iles', iles:config rehypePlugins: [ [Array] ], iles:config remarkPlugins: [ [Array], [Array], [Array], [Array] ], iles:config recmaPlugins: [ [Function: recmaVueResolveComponents], [Function (anonymous)] ] iles:config }, iles:config components: { iles:config dts: true, iles:config extensions: [ 'vue', 'jsx', 'tsx', 'js', 'ts', 'mdx', 'svelte' ], iles:config include: [ /\.vue$/, /\.vue\?vue/, /\.mdx?/ ], iles:config dirs: 'src/components', iles:config resolvers: [ [Function: IlesComponentResolver], [Function (anonymous)] ], iles:config transformer: 'vue3' iles:config }, iles:config solid: true iles:config } +0ms iles:config { iles:config root: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs', iles:config modules: [ iles:config { iles:config name: 'iles:base-config', iles:config debug: true, iles:config drafts: false, iles:config turbo: false, iles:config jsx: undefined, iles:config root: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs', iles:config base: '/', iles:config siteUrl: '', iles:config prettyUrls: true, iles:config ssg: [Object], iles:config configPath: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/iles.config.ts', iles:config assetsDir: 'assets', iles:config pagesDir: 'pages', iles:config srcDir: 'src', iles:config outDir: 'dist', iles:config layoutsDir: 'layouts', iles:config tempDir: '.iles-ssg-temp', iles:config modules: [], iles:config namedPlugins: [Object], iles:config resolvePath: undefined, iles:config vitePlugins: [Array], iles:config vite: [Object], iles:config vue: [Object], iles:config extendFrontmatter: [AsyncFunction: extendFrontmatter], iles:config extendRoute: [Function: extendRoute], iles:config extendRoutes: [Function: extendRoutes], iles:config markdown: [Object], iles:config components: [Object] iles:config }, iles:config { iles:config name: '@islands/mdx', iles:config markdown: [Object], iles:config configResolved: [Function: configResolved] iles:config }, iles:config { iles:config name: 'user-config', iles:config solid: true, iles:config configPath: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/iles.config.ts' iles:config }, iles:config { iles:config name: '@islands/pages', iles:config configResolved: [Function: configResolved] iles:config } iles:config ], iles:config debug: true, iles:config drafts: false, iles:config turbo: false, iles:config base: '/', iles:config siteUrl: '', iles:config prettyUrls: true, iles:config ssg: { sitemap: true }, iles:config configPath: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/iles.config.ts', iles:config assetsDir: 'assets', iles:config pagesDir: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/src/pages', iles:config srcDir: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/src', iles:config outDir: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/dist', iles:config layoutsDir: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/src/layouts', iles:config tempDir: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs/.iles-ssg-temp', iles:config namedPlugins: { iles:config components: { iles:config name: 'unplugin-vue-components', iles:config enforce: 'post', iles:config api: [Object], iles:config transformInclude: [Function: transformInclude], iles:config transform: [Function (anonymous)], iles:config vite: [Object], iles:config webpack: [Function: webpack], iles:config configResolved: [Function: configResolved], iles:config configureServer: [Function: configureServer] iles:config }, iles:config vue: { iles:config name: 'vite:vue', iles:config handleHotUpdate: [Function: handleHotUpdate], iles:config config: [Function: config], iles:config configResolved: [Function: configResolved], iles:config configureServer: [Function: configureServer], iles:config buildStart: [Function: buildStart], iles:config resolveId: [AsyncFunction: resolveId], iles:config load: [Function: load], iles:config transform: [Function: transform] iles:config }, iles:config pages: { iles:config name: 'iles:pages', iles:config enforce: 'pre', iles:config api: [Getter], iles:config configResolved: [AsyncFunction: configResolved], iles:config configureServer: [AsyncFunction: configureServer], iles:config buildStart: [AsyncFunction: buildStart], iles:config resolveId: [AsyncFunction: resolveId], iles:config load: [AsyncFunction: load], iles:config transform: [AsyncFunction: transform] iles:config } iles:config }, iles:config vitePlugins: [ iles:config { iles:config name: 'solid', iles:config enforce: 'pre', iles:config config: [AsyncFunction: config], iles:config configResolved: [Function: configResolved], iles:config resolveId: [Function: resolveId], iles:config load: [Function: load], iles:config transform: [AsyncFunction: transform] iles:config }, iles:config { iles:config name: 'iles:mdx:compile', iles:config configResolved: [AsyncFunction: configResolved], iles:config transform: [AsyncFunction: transform] iles:config }, iles:config { name: 'iles:mdx:sfc', transform: [AsyncFunction: transform] }, iles:config { iles:config name: 'iles:mdx:hmr', iles:config apply: 'serve', iles:config transform: [Function: transform] iles:config }, iles:config { iles:config name: 'iles:pages', iles:config enforce: 'pre', iles:config api: [Getter], iles:config configResolved: [AsyncFunction: configResolved], iles:config configureServer: [AsyncFunction: configureServer], iles:config buildStart: [AsyncFunction: buildStart], iles:config resolveId: [AsyncFunction: resolveId], iles:config load: [AsyncFunction: load], iles:config transform: [AsyncFunction: transform] iles:config } iles:config ], iles:config vite: { iles:config root: '/Users/techakayy/Projects/iles/testing-non-vue-auto-installs', iles:config resolve: { alias: [Array], dedupe: [Array] }, iles:config server: { fs: [Object] }, iles:config build: { cssCodeSplit: false, assetsDir: 'assets' }, iles:config define: { 'import.meta.env.DISPOSE_ISLANDS': false }, iles:config optimizeDeps: { include: [Array], exclude: [Array] }, iles:config base: '/' iles:config }, iles:config vue: { iles:config reactivityTransform: true, iles:config template: { compilerOptions: [Object] } iles:config }, iles:config extendFrontmatter: [AsyncFunction (anonymous)], iles:config extendRoute: [AsyncFunction (anonymous)], iles:config extendRoutes: [AsyncFunction (anonymous)], iles:config markdown: { iles:config jsxRuntime: 'automatic', iles:config jsxImportSource: 'iles', iles:config providerImportSource: 'iles', iles:config rehypePlugins: [ [Array] ], iles:config remarkPlugins: [ [Array], [Array], [Array], [Array] ], iles:config recmaPlugins: [ [Function: recmaVueResolveComponents], [Function (anonymous)] ] iles:config }, iles:config components: { iles:config dts: true, iles:config extensions: [ 'vue', 'jsx', 'tsx', 'js', 'ts', 'mdx', 'svelte' ], iles:config include: [ /\.vue$/, /\.vue\?vue/, /\.mdx?/ ], iles:config dirs: 'src/components', iles:config resolvers: [ [Function: IlesComponentResolver], [Function (anonymous)] ], iles:config transformer: 'vue3' iles:config }, iles:config solid: true iles:config } +4ms iles:detect +0ms iles:detect +10ms Circular dependency: node_modules/iles/dist/client/app/composables/pageData.js -> node_modules/iles/dist/client/app/props.js -> node_modules/iles/dist/client/app/composables/pageData.js Circular dependency: node_modules/iles/dist/client/app/composables/pageData.js -> node_modules/iles/dist/client/app/props.js -> node_modules/iles/dist/client/app/composables/pageData.js ✔ building client + server bundles done in 0.9s ✔ resolving static paths done in 8ms ✔ rendering pages done in 13ms ⚠ Skipping sitemap. Configure `siteUrl` to enable sitemap generation. ✔ building islands bundle done in 0ms ✔ writing pages done in 2ms build complete in 1.15s. ```
ElMassimo commented 1 year ago

Hi, thanks for reporting!

It's likely that this problem doesn't have a good solution, other than to end the process and ask the user to start it again.

Node.js doesn't provide a way to clear the cache for ESM modules (as it did for commonjs), so after installing a package we might need to throw an error mentioning "this package was installed, please restart the server".

TechAkayy commented 1 year ago

After initial scaffolding (without non-Vue frameworks), activating one of those non-Vue frameworks is a one-off activity for the user, I feel the auto-install feature, if it requires maintenance against these sort of issues, might not be worth it.

If the error can't be avoided, then instead of adding an additional message to restart the server, IMHO, it might be better to add documentation to add the relevant vite plugin.

A nice alternative is to consider the astro way, for eg, npx iles add solid. This way could abstract the scripty vite plugin names (and any additional dependencies/config) behind the non-Vue frameworks, maintaining iles joyful experience ;-)