Typescript module resolution fails despite “main” property set in package.json

Question

Within below folder structure, I would like to import my component into App.tsx this way:

import MyComponent from \'./MyComponent\';


        

Answer 1

The main field only supports resolving modules with the .js extension and the types field (the TypeScript analog to main) supports .d.ts fields. The TypeScript module resolution docs only describe usages with those extensions.

The reason behind this is that these are fields intended for use with published packages. .ts (or .tsx in your case) files are development files intended to be transpiled into production-ready JavaScript (and helper metadata files). If a published package even included .ts files (instead of their resulting .d.ts, .js, and .js.map outputs), attempting to require those files would be very undesirable.

Your TypeScript is always transpiled into JS before it is executed. Support for streamlined includes of TypeScript files by the compiler assumes that these includes are also being transpiled before run-time.

As long as your tsconfig.json is configured to output the declaration (and source map) files:

"compilerOptions": {
    "declaration": true,
    "sourceMap": true,
    ...

You can point your main and types fields to the output files:

"main": "myComponent.js",
"types: "myComponent.d.ts",

And once those files are created, they will resolve correctly. Note this means if you're using any coding assistance it usually means you have to re-compile to get updated hints.

If you want the automatic code assist, the index.tsx might be a better route. If you really want to avoid continously editing multiple index.tsx files, you can just have them re-export the module:

export * from '/MyComponent';

EDIT: Include actual solution...