Cannot resolve `tsx` components ?

[Lukas]

Hey there,

Awesome project, we're currently moving away from contentlayer and exploring multiple options, mdxts is quite simple and this is why we love it!

However, we're struggling a bit resolving tsx file like mentioned in the docs.

I spent around ~3 hours debugging it, cloned your repo and everything works fine when running the "site" folder, I tried to copy the dependencies & the pnpm-lock.yaml file but no luck with a fresh create-next-app

Here's a repro
https://codesandbox.io/p/devbox/elegant-bhaskara-2fhqgd?file=%2Fapp%2Fcomponents%2F%5Bslug%5D%2Fpage.tsx%3A14%2C47

// data.ts
import { createSource } from "mdxts";

export const allDocs = createSource("docs/**/*.mdx");
export const allComponents = createSource("components/**/*.tsx");

// app/components/[slug]/page.tsx
...

const component = await allComponents.get(`components/${params.slug}`);

console.log({ empty: await allComponents.all() });
// ^? {}

What am I doing wrong? 😕

[Travis Arnold]

Hey, glad you're finding MDXTS simple so far, besides this issue 😄

My guess is this has to do with how "public" files are being calculated right now based on package.json exports here. This is why site is able to analyze the outside library's package exports, but assuming something broke with local package analysis.

I won't be able to take a closer look at this until the weekend, but I'll work on a fix as well as adding docs around this since it isn't mentioned anywhere. I appreciate you putting together a repro and filing an issue!

[Travis Arnold]

Alright, got a chance to take a look at this! I was heading out of town right when I responded and wasn't exactly sure what was going on. So a few issues here that were causing your sandbox not to work:

• Currently an index.(ts|tsx) file is required to pick up the component exports as this heuristic is used to determine public exports. Adding an index file correctly picks up the Button component metadata.
• The link to the component was using an uppercase Button when it should be lowercase button since it currently converts the pathname to kebab casing

Here's a working example.

Again, I'll work on docs here so it's more clear how this currently works. As for how it could work, would you prefer an option to preserve or change the casing for the generated routes so components/Button would work? And for the index file heuristic I think it'd make sense to fallback to reading the entire directory's exports if no index file is present so in your case here it would have been picked up, does that make sense?

[Lukas]

Makes sense, thank you for having a look at it!

I'm not too sure what's the best option here for preserving / changing the case, maybe introducing a formatter is probably too overkill?

Our use case is the following:

1. Define docs/button.mdx to write Button documentation – picked up by createSource("docs/**/*.mdx", {});
2. Define Button.tsx & Button.examples.tsx – picked up by createSource("components/**/*.tsx", {});
3. Render both in one page using mergeSources OR streaming the component route.

Ideally, if the createSource options could provide a way to format the component name:

import { createSource } from 'mdxts'

export const allDocs = createSource('docs/**/*.mdx', {
  baseDirectory: 'docs',
})


export const allComponents = createSource('components/**/*.tsx', {
  format: (componentName) => changeCase.camelCase(componentName), // ==> 'button'
})

But we can handle this logic somewhere else when mergingSources, don't worry ✌️

[Travis Arnold]

Ok, the missing tsx files are now fixed in #76 and released in version 0.10.0! I've also updated the documentation to detail how public metadata is calculated for JavaScript and TypeScript files. Please let me know if you run into any other troubles with that and I can take a look, thank you again for raising this issue!

Pertaining to the casing of the generated routes, I'd like to wait before adding an option too preemptively. If you can't work around it, I'd be happy to discuss an option there for custom formatting in a follow-up issue. I have some ideas to make mergeSources work better with external MDX docs that aren't colocated with the source code file so you don't need to stitch them together yourself.

[Lukas]

Amazing @souporserious , thank you so much 🙏