esm-loader icon indicating copy to clipboard operation
esm-loader copied to clipboard

try to load typescript for specifier with extensions.

Open mshima opened this issue 3 years ago • 7 comments

Closes https://github.com/esbuild-kit/tsx/issues/344.

mshima avatar Oct 04 '22 02:10 mshima

Hey @mshima, I was trying to use your patch to address a downstream issue: https://github.com/esbuild-kit/tsx/issues/112.

From my quick hacking, you can add support for .tsx (mapped from .js) by simply adding it to your mappedExtensions object:

const mappedExtensions = {
	'.js': ['.ts', '.tsx'],
	'.cjs': ['.cts'],
	'.mjs': ['.mts'],
} as const;

Looking forward to seeing your PR merged 😀.

jraoult avatar Oct 09 '22 10:10 jraoult

Right, and as also mentioned in https://github.com/esbuild-kit/tsx/issues/112, in addition to .tsx source files, also would be good to add support for .jsx import paths:

// Should resolve to a.tsx, a.ts, etc 
import a from './a.jsx'

karlhorky avatar Oct 09 '22 10:10 karlhorky

@jraoult from the issue description, you will need to patch cjs-loader instead, so https://github.com/esbuild-kit/cjs-loader/pull/23 may be relevant but I don't think it fixes the issue. You will probably need to patch the resolveTsPath too and related mapper. resolveTsPath will need to return an array so a core-utils breaking change.

tsx command is the same of node --require=@esbuild-kit/cjs-loader --loader=@esbuild-kit/esm-loader.

You can test using the git branch:

npm install mshima/cjs-loader#allowjs
npm install mshima/esm-loader#allowjs

There is already a mapped extension at https://github.com/esbuild-kit/core-utils/blob/a756b7b599cb92ac720c559bee8451f63b1643a1/src/resolve-ts-path.ts#L3-L7. The PR should be change by exposing it to don't duplicate.

mshima avatar Oct 09 '22 11:10 mshima

Just taking this part out of my comment above, to make it visible to anyone here:

See this Replit with tsc: https://replit.com/@karlhorky/TypeScript-tsc-extension-resolution-js-jsx-cjs-mjs#index.ts

All of these extensions work:

Screen Shot 2022-10-09 at 16 51 13

karlhorky avatar Oct 09 '22 16:10 karlhorky

I also made a Replit with [email protected] on its own (no tsx or tsc) to test the resolution of all extensions (using --bundle mode), and it seems that they are all respected:

https://replit.com/@karlhorky/esbuild-extension-resolution-js-jsx-cjs-mjs#index.ts

Screen Shot 2022-10-09 at 18 16 41

karlhorky avatar Oct 09 '22 16:10 karlhorky

@privatenumber would be really nice to have this feature. We are having trouble to import a ts (commonjs) file from a mjs file. mjs files requires the extension, which breaks esm-loader.

mshima avatar Oct 13 '22 23:10 mshima

If I understand correctly, following down the line, merging this PR will allow in turn vite to correctly resolve the following:

// ComponentA.tsx
export const ComponentA = () => <div />

// ComponentB.tsx
import { ComponentA } from './ComponentA.js'

export const ComponentB = () => <ComponentA />

Right? Either way, how can we move this PR forward? I'm willing to help

datner avatar Jun 01 '23 12:06 datner