Auto-install issues

Question

Auto-install issues

TechAkayy opened this issue 2 years ago · 2 comments

I have read the troubleshooting section before opening an issue.
I have tried upgrading iles and vite.

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 🐞

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

The below error is thrown.

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 <FrameworkLink client:none> +0ms
  iles:detect <FrameworkLink client:none> +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.

Answer 1 · 2023-04-10T12:17:45.000Z

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".

Answer 2 · 2023-04-10T12:57:35.000Z

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