Ggtcf

I cannot seem to solve a module import issue with Visual Studio Code:

I've a setup a sample repo to illustrate this problem, with a directory structure like this:

➜ tree -I node_modules
.
├── README.md
├── packages
│   ├── jsx
│   │   └── jsx.jsx
│   ├── tjs
│   │   └── tjs.js
│   ├── tscript
│   │   └── tscript.js
│   └── tsx
│   └── tsx.tsx
├── src
│   ├── entry.ts
│   └── localjs.js
└── tsconfig.json

I'd like to have this setup work with babel-typescript, but my investigation indicates that the problem seems to be intrinsic to VSCode, so I've left it out of the sample.

I've tried all the permutations of the paths for tsconfig.json that I've seen i.e.

 "paths": 
 "*": [
 "*",
 "packages/*",
 "packages/*/index.tsx",
 "packages/*/index.jsx",
 "packages/*/index.js"
 ],
 "$1": [
 "packages/$1/$1"
 ],
 "~/*": [
 "packages/*"
 ],
 "~/$1": [
 "packages/$1/$1"
 ],
 "*/$1": [
 "*/$1/$1",
 "packages/$1/$1",
 "*/packages/$1/$1"
 ]
 

The handbook doesn't offer much insight.

You already got an answer from Wex suggesting that you rename your files to have the basename index plus the appropriate extension and use the mapping "*"*: ["*", "packages/*"]. You mentioned in a comment that you'd rather avoid renaming the files. Besides avoiding renames, I'm not a fan of having a lot of files be named index.<some_extension>. When working, my eyes are naturally drawn to the basename of the files I'm working on or getting reports about. Having to distinguish files that have near-identical basenames by directory is possible but requires more cognitive work on my part to look away from the basename and at the path, or more work at the keyboard for completion. (It takes longer to type. There's only so much help the IDE can provide.) It is enough to be annoying.

First, let's deal with the dead ends. I see no evidence that ~ and $1 are treated specially in paths. I went to check tsc's code and see nothing there that handles such patterns. It could be that I missed it, but I think they are just not special. Also, ignoring extensions for the moment, your desired mapping is something packages/<package_name>/<package_name>.ext The package name appears twice. So it would be tempting to set a mapping like "*": ["packages/*/*.ext"] but that's explicitly not allowed by TypesScript: tsc will give you an error about the two asterisks appearing in the desired mapping. So that's not an option either.

Use package.json

You could dodge the renaming issue by adding a package.json to each package with a "main" field that points to the file you want to be considered the entry point of your package. For instance, packages/jsx/package.json could contain this:

 "main": "jsx.jsx"

By providing similar files for all other packages, you can reduce the relevant configuration to:

"baseUrl": "",
"paths": 
 "*": ["packages/*", "*"]
,

Or you can use "baseUrl" to point to your packages and omit "paths" entirely:

"baseUrl": "packages/",

Make sure that you lint the package.json files because tsc will simply ignore them silently if there's any syntactic mistake in these files.

Add index Files that Reexport your Entry Module

Another method would be to use index files that simply reexport all of the file you'd otherwise want to be the entry point of your package. The files you currently have would remain there but would be referenced by appropriately designed index files. For instance, packages/tsx/index.ts could be:

export default from "./tsx";

If all your packages just provide a default export, they could all follow the pattern above. Otherwise, if a package exports multiple symbols and just want to reexport everything, you can do:

export * from "./myModule"; 

If you do this for all your packages, you don't need to rename anything but you'd have additional index files to satisfy the "*": ["*", "packages/*"] mapping.

In a comment, you mentioned using a tool like Barrelsby to generate index files. I'd be concerned about the impact on development. I can see generating an index file acting as a facade as part of publishing your project. So people consuming the published project deal with a file generated by Barrelsby or some other tool. However, your index files appear to me to be internal to your project. So in order to get proper IDE support while developing the index files will have to already exist before contributors start contributing. So contributors would have to run something that generates the index files before they start contributing. You would also have generated files that live side by side with files that are authored directly by developers. I try to avoid this in my projects.

If it were my project and I decided to add index files to satisfy the tsconfig.json mapping, I'd aim to structure my project so that the index files boil down to one of the two cases above, and skip using a code generator. (Actually, I'd aim for the 2nd of the two cases above, because I prefer to avoid default exports. See here for a discussion of the issues with default exports.)

Individually Map The Packages

If the other solutions are problematic for your specific project, you can provide one mapping per package:

"paths": 
 "jsx": ["packages/jsx/jsx.jsx"],
 "tjs": ["packages/tjs/tjs.js"],
 "tscript": ["packages/tscript/tscript.js"],
 "tsx": ["packages/tsx/tsx.tsx"],
,

This means adding a mapping each time you add a new package. Whether or not this is viable depends on your specific project. You could also use a baseUrl set to "packages/" and remove packages/ from all the paths above:

"baseUrl": "packages/",
"paths": 
 "jsx": ["jsx/jsx.jsx"],
 "tjs": ["tjs/tjs.js"],
 "tscript": ["tscript/tscript.js"],
 "tsx": ["tsx/tsx.tsx"],
,

This makes the whole thing less verbose though you still have to provide one mapping per package.

Part of the issue with your current tsconfig.json is that you are using include: [], so no code will actually be matched by your config!

I couldn't find any examples of using the $1 pattern the way you have it in your sample config, nor do I think what you are trying to do is possible based on some research (see also: #5039). Are you able to rename package/package.jsx to package/index.jsx? Then your paths config could trivially be changed to:

 "paths": 
 "*": ["*", "packages/*"]
 ,