tsconfig paths not working

Question

I'm trying to do something very similar to the jquery path example in the documentation, but TS keeps throwing TS2307 (webpack compiles fine):

"compilerOptions": {     "baseUrl": "./src",     "paths": {         "@client": [             "client",         ],         "@suir": [             "../node_modules/semantic-ui-react/dist/commonjs", // not working         ],     },     // … }, "include": [     "*.d.ts",     "client/**/*",     "../node_modules/semantic-ui-react", // is this necessary? ], 

Changing baseUrl to "." and updating includes and paths makes no difference (@client continues to work and @suir continues to not work).

Changing "@suir" to "@suir/" or "@suir/*" (and appending /* to its value) also makes no difference.

---

The reason I'm doing this is to simplify my imports (I'm specifying them explicitly instead of pulling named exports from the bundle in order to reduce my vendor bundle size—saves about 1 MB):

import Button from 'semantic-ui-react/dist/commonjs/elements/Button'; // works  import Button from '@suir/elements/Button'; // not found 

Answer 1

I have no idea why this is now working on the eleventh time I tried (yet didn't the first 10), but the /* seems to be the secret sauce, and the example in the docs is apparently pointing to a specific file (and the file extension is omitted).

{     "compilerOptions": {         "baseUrl": "./src", // setting a value for baseUrl is required         "moduleResolution": "node", // was not set before, but is the default         "paths": {             "@client/*": [                 "client/*",             ],             "@suir/*": [ // notice the `/*` at the end                 "../node_modules/semantic-ui-react/dist/commonjs/*", // notice the `/*`             ],         },         // …     },     "include": [         "./src/client/**/*",     ], }