Typescript tsconfig paths not working

carlos-algms commented 1 year ago

[x] I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE
[x] I WILL GIVE 10$ TO CHARITY IF MY SOLUTION WAS ACTUALLY IN THE README/FAQ

Are you trying to transpile a local package or an npm package? A Local package

Describe the bug When packages have paths in tsconfig.json, the Apps fail to compile

To Reproduce

Create a new turborepo repository with npx create-turbo@latest

Go to packages/ui and add paths to tsconfig.json:

{
  "extends": "tsconfig/react-library.json",
  "include": ["."],
  "exclude": ["dist", "build", "node_modules"],
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@root/*": ["./*"]
    }
  }
}

Edit /packages/ui/index.ts to use the path:
```
export * from '@root/Button';
```

Try to build yarn build the build will fail with the following error:

web:build: Type error: Module '"ui"' has no exported member 'Button'.
web:build: 
web:build:   1 | import Link from 'next/link';
web:build: > 2 | import { Button } from 'ui';
web:build:     |          ^
web:build:   3 | 
web:build:   4 | export default function Web() {

Expected behavior It should honor the paths set per module

Setup

Next.js version: 12.2.3
next-transpile-modules version: 9.0.0
Node.js version: v16.16.0
yarn version: 1.22.19
Operating System: MacOs
Webpack 4 or 5: included in NextJs

martpie commented 1 year ago

Can you enable thedebug flag and post the logs here?

carlos-algms commented 1 year ago

- const withTM = require('next-transpile-modules')(['ui']);
+ const withTM = require('next-transpile-modules')(['ui'], { debug: true });

Output:

yarn run v1.22.19
$ next build
next-transpile-modules - trying to resolve the following modules:
  - ui
next-transpile-modules - the following paths will get transpiled:
  - /Users/carlos/temp/nextjs-monorepo/packages/ui
info  - Linting and checking validity of types .Failed to compile.

./pages/index.tsx:2:10
Type error: Module '"ui"' has no exported member 'Button'.

  1 | import Link from 'next/link';
> 2 | import { Button } from 'ui';
    |          ^
  3 | 
  4 | export default function Web() {
  5 |   return (

> Build error occurred
Error: Call retries were exceeded
    at ChildProcessWorker.initialize (/Users/carlos/temp/nextjs-monorepo/node_modules/next/dist/compiled/jest-worker/index.js:1:11661)
    at ChildProcessWorker._onExit (/Users/carlos/temp/nextjs-monorepo/node_modules/next/dist/compiled/jest-worker/index.js:1:12599)
    at ChildProcess.emit (node:events:527:28)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) {
  type: 'WorkerError'
}

nathnhughes commented 1 year ago

Would also be keen to know if there's a fix for this as I'm running into the same problem 👍

martpie commented 1 year ago

Yeah, short-story is path is a ts-specific syntax sugar and is not picked by enhanced-resolve, which is used to determine which paths should transpiled or not.

I don't see an easy way out of there, my main issue is that if this lib will always be one step behind the latest convenience features from various tools (webpack, tsconfig, whatever).

I'll try to spend some time to think about it.

martpie / next-transpile-modules

Typescript tsconfig paths not working #272