"Blog" example doesn't work with latest release

[dgknca]

./data.ts:15:101
Module not found: Can't resolve '.posts�uild-a-button-component-in-react.mdx'
13 | return b.frontMatter.date.getTime() - a.frontMatter.date.getTime()
14 | },

15 | }, {'C:\Users\dgknc\Desktop\mdxts\examples\blog\posts\build-a-button-component-in-react.mdx': () => import('.\posts\build-a-button-component-in-react.mdx')}, "{ title: string; date: Date; summary?: string; tags?: any; }")
| ^
16 |

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./app/page.tsx

Nodejs v20.11.0

[souporserious]

Thank you for filing an issue! It seems you are on a Windows machine, is that correct? I tried that version of Node.js on a Mac and was able to get the example working correctly. My assumption is the path is being constructed wrong on Windows which leads to the wrong import path from what I can tell in the error.

[dgknca]

yes I use Windows.

[souporserious]

Thanks for confirming! I'll work on getting a VM set up when I get the chance and look into getting a fix out. From a quick look, I'm not sure exactly why the paths aren't being constructed properly (from the error at least) since I'm using sep here.

[dgknca]

thanks for info. I'll try to debug it too.

[lanwin]

Hi, I stumble on the same problem while trying mdxts.

It seems here that the windows file API giving a path like this:

import('.\posts\build-a-button-component-in-react.mdx')

while I expect on linux/mac it should be resolve to this:

import('./posts/build-a-button-component-in-react.mdx')

It seems that import is expecting the later.

I simply put this in between and now I am a step further.

normalizedRelativePath = normalizedRelativePath.replaceAll("\\","/");

But now I get:

 ⨯ ./data.ts
TypeError: Assignment to constant variable.
    at Array.map (<anonymous>)
Import trace for requested module:

[Saeris]

I recently solved a similar file path resolution problem for Windows. The solution is rather simple:

import { join, posix, sep } from 'node:path';
import { pathToFileURL } from 'node:url';
import { globSync } from 'glob';

// Let's say you have a relative filepath, maybe from a glob library
// That filepath might have backslashes on Windows, and forward slashes on Unix

const root = process.cwd();
const path = './posts/*.mdx'

const files = await Promise.all(
  globSync(
    // Using node:path built-ins, we can normalize the filepath string to be Posix compliant
    join(root, path).split(sep).join(posix.sep)
  ).map(
    // Then, we'll use another built-in to convert a path like `C://path/to/file` to a `file://`
    // protocol path that `import()` understands
    (file) => import(pathToFileURL(file).toString())
  )
)

The important bits here are just replacing Windows path separators with Posix style separators, and then converting the resolved absolute path to use the file:// protocol so that import() can load it correctly.

This solution was informed by this Stack Overflow answer

[souporserious]

Thanks for the pointer @Saeris! I tried to interpret it as best I could in #130 and just published the changes so it's available in the latest release if someone in this thread would like to test it.

[Saeris]

@souporserious went and used bun create mdxts to scaffold a starter and this is what I got:

PS C:\Users\drake\GitHub\@saeris\mdxts-debug> bun dev
$ next
  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
   automatically enabled Fast Refresh for 1 custom loader
 ✓ Ready in 8.7s
 ○ Compiling / ...
 ⨯ ./data.ts:15:103
Module not found: Can't resolve './postuild-a-button-component-in-react.mdx'
  13 |   baseDirectory: 'posts',
  14 |   sort: (a, b) => b.frontMatter.date.getTime() - a.frontMatter.date.getTime(),
> 15 | }, {'C:\Users\drake\GitHub\@saeris\mdxts-debug\posts\build-a-button-component-in-react.mdx': () => import('./posts\build-a-button-component-in-react.mdx')}, "{ title: string; date: Date; summary?: string; tags?: any; }")
     |                                                                                                       ^
  16 |

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./app/page.tsx
 ⨯ ./data.ts:15:103
Module not found: Can't resolve './postuild-a-button-component-in-react.mdx'
  13 |   baseDirectory: 'posts',
  14 |   sort: (a, b) => b.frontMatter.date.getTime() - a.frontMatter.date.getTime(),
> 15 | }, {'C:\Users\drake\GitHub\@saeris\mdxts-debug\posts\build-a-button-component-in-react.mdx': () => import('./posts\build-a-button-component-in-react.mdx')}, "{ title: string; date: Date; summary?: string; tags?: any; }")
     |                                                                                                       ^
  16 |

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./app/page.tsx
   automatically enabled Fast Refresh for 1 custom loader
 ⨯ ./data.ts:15:103
Module not found: Can't resolve './postuild-a-button-component-in-react.mdx'
  13 |   baseDirectory: 'posts',
  14 |   sort: (a, b) => b.frontMatter.date.getTime() - a.frontMatter.date.getTime(),
> 15 | }, {'C:\Users\drake\GitHub\@saeris\mdxts-debug\posts\build-a-button-component-in-react.mdx': () => import('./posts\build-a-button-component-in-react.mdx')}, "{ title: string; date: Date; summary?: string; tags?: any; }")
     |                                                                                                       ^
  16 |

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./app/page.tsx
 GET / 500 in 11387ms

Still appears to be an issue with the import() statements having mixed slashes, such as import('./posts\build-a-button-component-in-react.mdx')

As an FYI, you can add an OS matrix in github actions to test on both Windows and Ubuntu. We did this to catch regressions over in Athena Crisis for this same category of issue.

A good smoke test would probably be something close to what I did here, just create a new app using the blog starter and attempt to start the server and navigate to the home page.

[souporserious]

Ah, ok I'll have to dig deeper when I get a chance. I took another stab at it in a83ed0e to hopefully fix that issue and normalize to posix.

Appreciate you taking a look! That's a great idea about setting up an action to test other operating systems.