.jsx imports do not resolve to .tsx files

[karlhorky]

When creating a new file by duplicating the default slides.re.mdx, VS Code + the MDX extension changed my imports from .tsx to .jsx automatically:

import sights from './sights.jsx';

export { Components } from './Components.jsx';
export { Themes } from './Themes.jsx';

--
image: tokyo.jpg
--

# Welcome to ReMDX

---

# Slide 2

The actual file on disk is ./sights.tsx

This caused ReMDX / Vite to crash, unable to find the source .tsx files:

$ pnpm dev slides2

> slides@0.0.1 dev /Users/k/p/courses/packages/lectures/lectures/rest-apis/slides
> vite dev -- "slides2"


  VITE v4.5.2  ready in 701 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
3:33:25 PM [vite] Internal server error: Failed to resolve import "./sights.jsx" from "slides2.re.mdx". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/k/p/courses/packages/lectures/lectures/rest-apis/slides/slides2.re.mdx:5:27
  3  |        import { Fragment as _Fragment, jsxDEV as _jsxDEV } from 'react/jsx-dev-runtime';
  4  |        import { useMDXComponents as _provideComponents } from "@nkzw/remdx";
  5  |        import sights from './sights.jsx';
     |                            ^
  6  |  export { Components } from './Components.jsx';
  7  |  export { Themes } from './Themes.jsx';
      at formatError (file:///Users/k/p/courses/packages/lectures/lectures/rest-apis/slides/node_modules/.pnpm/vite@4.5.2/node_modules/vite/dist/node/chunks/dep-52909643.js:44062:46)
      at TransformContext.error (file:///Users/k/p/courses/packages/lectures/lectures/rest-apis/slides/node_modules/.pnpm/vite@4.5.2/node_modules/vite/dist/node/chunks/dep-52909643.js:44058:19)
      at normalizeUrl (file:///Users/k/p/courses/packages/lectures/lectures/rest-apis/slides/node_modules/.pnpm/vite@4.5.2/node_modules/vite/dist/node/chunks/dep-52909643.js:41844:33)
      at async file:///Users/k/p/courses/packages/lectures/lectures/rest-apis/slides/node_modules/.pnpm/vite@4.5.2/node_modules/vite/dist/node/chunks/dep-52909643.js:41998:47
      at async Promise.all (index 3)
      at async TransformContext.transform (file:///Users/k/p/courses/packages/lectures/lectures/rest-apis/slides/node_modules/.pnpm/vite@4.5.2/node_modules/vite/dist/node/chunks/dep-52909643.js:41914:13)
      at async Object.transform (file:///Users/k/p/courses/packages/lectures/lectures/rest-apis/slides/node_modules/.pnpm/vite@4.5.2/node_modules/vite/dist/node/chunks/dep-52909643.js:44352:30)
      at async loadAndTransform (file:///Users/k/p/courses/packages/lectures/lectures/rest-apis/slides/node_modules/.pnpm/vite@4.5.2/node_modules/vite/dist/node/chunks/dep-52909643.js:55026:29)
      at async viteTransformMiddleware (file:///Users/k/p/courses/packages/lectures/lectures/rest-apis/slides/node_modules/.pnpm/vite@4.5.2/node_modules/vite/dist/node/chunks/dep-52909643.js:64430:32)

This is normal behavior of TypeScript, to resolve .ts or .tsx files from fully-specified .js and .jsx imports:

• Auto-imports / renames of .tsx files use extension .jsx, leading to Next.js module resolution error microsoft/TypeScript#55502
• Resolve .tsx + other extensions when importing .js / .jsx files privatenumber/tsx#112

It seems that Vite itself does support this .jsx -> .tsx resolution behavior:

• PR by @patak-dev perf(resolve): avoid isWorkerRequest and clean up .ts imported a .js vitejs/vite#12571
• PR by @leebeydoun (approved by @aleclarson and @bluwy) fix(resolve): try .tsx extension for .js import from typescript module vitejs/vite#7005

But maybe somehow in ReMDX that support is being disabled? (eg. maybe because the import is in an MDX file?)

[cpojer]

I feel like that's a bug/incompatibility with VSCode, TypeScript and the MDX extension. They should not change your imports if the files on disk are matching the import module specifier.

[karlhorky]

Yeah it seemed like it to me too, which is why I filed the TypeScript / VS Code bug - but it's their opinion that it is working as intended.

Regardless of whether it's right or not, if Vite/webpack/tsx/etc supports it, maybe ReMDX can too? Or are there complications in adding this support?

[cpojer]

I don't know exactly what you are running into tbh, this is not the case in my setup and I'm always using fully qualified filenames. Any tool changing the extension to something that does not reflect the filesystem makes resolution slower and is just completely wrong.

All that ReMDX does is transform Markdown into TypeScript/JS, which will then be processed through the regular JS build pipeline in Vite together with all your plugins. It does not touch imports at all, which you can verify in this test: https://github.com/nkzw-tech/remdx/blob/main/packages/vite-plugin-remdx/__tests__/plugin.test.ts#L35

Unless there is something I'm missing, this is both a tooling/IDE or bundler/Vite concern, and not something related to ReMDX. I'm happy to reopen and consider a PR if it does indeed turn out to be something that ReMDX can help with.