search

ElMassimo / iles

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

`useDocuments` paths are incorrectly resolved in Windows #71

Closed kecrily closed 2 years ago

kecrily commented 2 years ago

Description 📖

<script setup lang="ts">
const posts = useDocuments("~/posts")
</script>

<template>
  <a v-for="post of posts" :key="post.href" :href="post.href">
    {{ post.title }}
   <component :is="post" excerpt />
  </a>
</template>

Similar code appears differently in different components (specifically, Header.vue and List.vue). Header.vue is fine, while List.vue has a problem, the prompt tells me that HelloWorld.md cannot be found, the file actually exists and according to the error it links to an incorrect directory(C:\src\posts\HelloWorld.md).

Possible useful information: I am using Windows 11 and pnpm

Reproduction 🐞

Please provide a link to a repo that can reproduce the problem you ran into.

https://github.com/kecrily/iles-bug-reproduction

Dependencies Info _Run `npx iles info` and `pnpm list` (or `npm list`) and provide the output:_ ``` iles v0.7.21 vite v2.7.10 devDependencies: iles 0.7.21 typescript 4.5.4 vite 2.7.10 vue-tsc 0.29.8 ```

Logs 📜

If not providing a reproduction:

Output _Run `DEBUG=iles:* npm run dev` or `DEBUG=iles:* npm run build` and provide the output:_ ``` ```

Screenshots 📷

Provide console or browser screenshots of the problem.

image

ElMassimo commented 2 years ago

Thanks for reporting!

Definitely Windows-specific, as the path is incorrectly resolved against the drive root, instead of the src dir.

PRs are welcome, but I'll take a look during the week.

innocenzi commented 2 years ago

This can probably help mitigate Windows issues: https://github.com/unjs/pathe

kecrily commented 2 years ago

The strange thing is that one component has no problem and the other has a problem. You can try deleting <List /> from index.mdx and everything works fine again. It's so weird.

ElMassimo commented 2 years ago

The second error seems to be happening because meta is empty here, causing filename to be undefined, which results in the invalid import('/undefined').

The cause is probably the first file not found error above, just taking note because I'd like to bubble up errors in frontmatterFromFile instead of simply logging them.

ElMassimo commented 2 years ago

Adding resolve(root, file) here might do the trick.

Already using pathe in all internal packages.

ElMassimo commented 2 years ago

@kecrily Please upgrade @islands/pages to 0.7.6, which includes a patch that might fix this issue, and let me know how it goes.

kecrily commented 2 years ago

@ElMassimo It doesn't seem to fix the bug, the errors are still the same.

https://github.com/kecrily/iles-bug-reproduction/commit/f49d593326a36df5a7baa441369d4bc9739dbbfa#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbR1226

ElMassimo commented 2 years ago

@kecrily Added more debug information in iles@0.7.22-0 and @islands/pages@0.7.7-0.

Would appreciate it if you can run DEBUG=iles* iles and provide the logs, as in:

  iles:pages:frontmatter reading: {
  iles:pages:frontmatter   root: '/Users/maximomussini/Projects/iles/playground/the-vue-point',
  iles:pages:frontmatter   filename: '/Users/maximomussini/Projects/iles/playground/the-vue-point/src/pages/posts/vue-3-2.mdx',
  iles:pages:frontmatter   resolved: '/Users/maximomussini/Projects/iles/playground/the-vue-point/src/pages/posts/vue-3-2.mdx'
  iles:pages:frontmatter } +0ms
  iles:documents ~/pages/posts {
  iles:documents   path: 'src/pages/posts',
  iles:documents   pattern: 'src/pages/posts/**/*.{md,mdx}',
  iles:documents   files: [
  iles:documents     'src/pages/posts/hello-2021.mdx',
  iles:documents     'src/pages/posts/vue-3-2.mdx',
  iles:documents     'src/pages/posts/vue-3-one-piece.mdx'
  iles:documents   ]
  iles:documents } +0ms
kecrily commented 2 years ago

@ElMassimo

I updated and tried. But the log output has nothing related to iles:pages:frontmatter or iles:documents.

Details > @powershell Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope Process && @powershell -Command $env:DEBUG='iles*';iles iles:config loaded config at C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/iles.config.ts +0ms iles:config { iles:config root: 'C:\\Users\\kecrily\\Desktop\\dev\\iles-bug-reproduction', iles:config modules: [ iles:config { iles:config name: 'iles:base-config', iles:config debug: true, iles:config turbo: false, iles:config jsx: undefined, iles:config root: 'C:\\Users\\kecrily\\Desktop\\dev\\iles-bug-reproduction', iles:config base: '/', iles:config siteUrl: '', iles:config prettyUrls: true, iles:config ssg: [Object], iles:config configPath: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/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 configPath: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/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 turbo: false, iles:config base: '/', iles:config siteUrl: '', iles:config prettyUrls: true, iles:config ssg: { sitemap: true }, iles:config configPath: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/iles.config.ts', iles:config assetsDir: 'assets', iles:config pagesDir: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/pages', iles:config srcDir: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src', iles:config outDir: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/dist', iles:config layoutsDir: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/layouts', iles:config tempDir: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/.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 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 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: [Function: configureServer], 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: '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: [Function: configureServer], 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: 'C:\\Users\\kecrily\\Desktop\\dev\\iles-bug-reproduction', iles:config resolve: { alias: [Array], dedupe: [Array] }, iles:config server: { fs: [Object] }, iles:config build: { brotliSize: false, cssCodeSplit: false, assetsDir: 'assets' }, iles:config define: { 'import.meta.env.DISPOSE_ISLANDS': true }, 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] ] 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 resolvers: [ [Function: IlesComponentResolver], [Function (anonymous)] ], iles:config transformer: 'vue3' iles:config } iles:config }

https://github.com/kecrily/iles-bug-reproduction/commit/9f5b88999eac8c870bda95bf706f8215a58fdaee

ElMassimo commented 2 years ago

It seems like the DEBUG expression didn't match all of the possible logs, or the page with the error was not requested.

Please try using npx cross-env "DEBUG=iles:*" npx iles, and visit the page that has the error.

Visiting the page is important, because all processing happens on demand.

kecrily commented 2 years ago

The logs returned by this command are still the same, but the logs that are needed after visiting the page appear. I think the original command worked too, I just didn't visit the page

Details ``` iles:pages:gen routes: [ iles:pages:gen { iles:pages:gen name: 'index', iles:pages:gen path: '/', iles:pages:gen frontmatter: { layout: undefined, meta: [Object], route: {} }, iles:pages:gen componentFilename: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/pages/index.mdx' iles:pages:gen }, iles:pages:gen { iles:pages:gen name: 'about', iles:pages:gen path: '/about', iles:pages:gen frontmatter: { layout: undefined, meta: [Object], route: {}, title: 'About' }, iles:pages:gen componentFilename: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/pages/about.md' iles:pages:gen }, iles:pages:gen { iles:pages:gen path: '/:zzz(.*)*', iles:pages:gen name: 'NotFoundInDev', iles:pages:gen componentFilename: '@islands/components/NotFound' iles:pages:gen } iles:pages:gen ] +0ms 8:57:01 [vite] ENOENT: no such file or directory, stat 'C:\src\posts\HelloWorld.md' iles:documents ~/posts { iles:documents path: 'src/posts', iles:documents pattern: 'src/posts/**/*.{md,mdx}', iles:documents files: [ 'src/posts/HelloWorld.md' ] iles:documents } +0ms 8:57:02 [vite] ENOENT: no such file or directory, stat 'C:\src\posts\HelloWorld.md' (x2) iles:documents ~/posts { iles:documents path: 'src/posts', iles:documents pattern: 'src/posts/**/*.{md,mdx}', iles:documents files: [ 'src/posts/HelloWorld.md' ] iles:documents } +662ms ```
ElMassimo commented 2 years ago

Alright, getting closer, the path and glob pattern look good.

Would you update @islands/pages as well to 0.7.7-0?

The iles:pages:frontmatter log should pinpoint why the error is happening.

kecrily commented 2 years ago

I checked pnpm-lock.yaml again and @islands/pages does not seem to have been upgraded with the pnpm upgrade command.

What should I do now?

ElMassimo commented 2 years ago

Run pnpm i -D @islands/pages@0.7.7-0, or add it to package.json and install.

kecrily commented 2 years ago

Now it's here

Details ``` iles:pages:frontmatter reading: { iles:pages:frontmatter root: 'C:\\Users\\kecrily\\Desktop\\dev\\iles-bug-reproduction', iles:pages:frontmatter filename: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/pages/about.md', iles:pages:frontmatter resolved: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/pages/about.md' iles:pages:frontmatter } +1s iles:pages:frontmatter reading: { iles:pages:frontmatter root: 'C:\\Users\\kecrily\\Desktop\\dev\\iles-bug-reproduction', iles:pages:frontmatter filename: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/pages/index.mdx', iles:pages:frontmatter resolved: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/pages/index.mdx' iles:pages:frontmatter } +1ms iles:pages:gen routes: [ iles:pages:gen { iles:pages:gen name: 'index', iles:pages:gen path: '/', iles:pages:gen frontmatter: { layout: undefined, meta: [Object], route: {} }, iles:pages:gen componentFilename: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/pages/index.mdx' iles:pages:gen }, iles:pages:gen { iles:pages:gen name: 'about', iles:pages:gen path: '/about', iles:pages:gen frontmatter: { layout: undefined, meta: [Object], route: {}, title: 'About' }, iles:pages:gen componentFilename: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/pages/about.md' iles:pages:gen }, iles:pages:gen { iles:pages:gen path: '/:zzz(.*)*', iles:pages:gen name: 'NotFoundInDev', iles:pages:gen componentFilename: '@islands/components/NotFound' iles:pages:gen } iles:pages:gen ] +0ms iles:pages:frontmatter reading: { iles:pages:frontmatter root: 'C:\\Users\\kecrily\\Desktop\\dev\\iles-bug-reproduction', iles:pages:frontmatter filename: 'src/posts/HelloWorld.md', iles:pages:frontmatter resolved: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/posts/HelloWorld.md' iles:pages:frontmatter } +2s 9:26:30 [vite] ENOENT: no such file or directory, stat 'C:\src\posts\HelloWorld.md' iles:documents ~/posts { iles:documents path: 'src/posts', iles:documents pattern: 'src/posts/**/*.{md,mdx}', iles:documents files: [ 'src/posts/HelloWorld.md' ] iles:documents } +0ms iles:pages:frontmatter reading: { iles:pages:frontmatter root: 'C:\\Users\\kecrily\\Desktop\\dev\\iles-bug-reproduction', iles:pages:frontmatter filename: 'src/posts/HelloWorld.md', iles:pages:frontmatter resolved: 'C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/posts/HelloWorld.md' iles:pages:frontmatter } +117ms 9:26:30 [vite] ENOENT: no such file or directory, stat 'C:\src\posts\HelloWorld.md' (x2) iles:documents ~/posts { iles:documents path: 'src/posts', iles:documents pattern: 'src/posts/**/*.{md,mdx}', iles:documents files: [ 'src/posts/HelloWorld.md' ] iles:documents } +103ms ```

https://github.com/kecrily/iles-bug-reproduction/commit/18d18ade29454eca38c2fc3f9d8fd6bda06331e9

ElMassimo commented 2 years ago

Thanks for providing the logs!

The error seems to still be happening on this line, which is using the resolved path.

The strange thing is that the error message mentions C:\src\posts\HelloWorld.md, which is not the resolved path.

If you open node, and then run:

require('fs').existsSync('C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/posts/HelloWorld.md')

does it return true? What if you use readFileSync or fs.promises.readFile?

kecrily commented 2 years ago 
> node
Welcome to Node.js v16.13.1.
Type ".help" for more information.
> require('fs').existsSync('C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/posts/HelloWorld.md')
true
> require('fs').readFileSync('C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/posts/HelloWorld.md')
<Buffer 2d 2d 2d 0d 0a 74 69 74 6c 65 3a 20 48 65 6c 6c 6f 20 57 6f 72 6c 64 0d 0a 2d 2d 2d 0d 0a 0d 0a>
> require('fs').promises.readFile('C:/Users/kecrily/Desktop/dev/iles-bug-reproduction/src/posts/HelloWorld.md')
Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 41,
  [Symbol(trigger_async_id_symbol)]: 5,
  [Symbol(destroyed)]: { destroyed: false }
}

image

ElMassimo commented 2 years ago

Alright, the path is correct, and node is able to read the file.

I'm open to ideas here. Perhaps doing npm edit @islands/pages and adding more logs manually, like inside the catch and verify the error is happening there, and restarting iles.

ElMassimo commented 2 years ago

Fixed in @islands/pages 0.7.8.

Thanks again @kecrily for providing detailed error information! Try running pnpm upgrade, and it should bump the versions automatically.