Next.js: Automatically configure webpack to handle `tsconfig.json`'s `baseUrl` and `paths`

[liamdanielduffy]

Bug report

Describe the bug

Reproduction here: https://github.com/liamdanielduffy/next-9-baseurl-reproduction

I've setup a simple Next.js project using v 9.0.0, with a tsconfig.json generated by Next

I've added the 'baseUrl' compiler option to 'tsconfig.json' in the root of my repository. The baseUrl is ./ since I want paths in my Next app to resolve relative to the root of my repository.

I've created a test import in pages/index.tsx which imports a string constant.

When I run this locally with now dev, I get the following error:

ModuleNotFoundError: Module not found: Error: Can't resolve 'constants/test'

I've also deployed this to Now under this project: /liamdanielduffy/app-workflow/6ijvjnt5c

I get the same error during build:

./pages/index.tsx
Module not found: Can't resolve 'constants/test' in '/tmp/28475d91/pages'

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone the provided repository
2. Run now dev in the root to see the local build error
3. Run now to deploy and see the build error in the Now environment

Expected behavior

Next should be able to resolve modules imported within .ts or .tsx files relative to the "baseUrl" set in "compilerOptions" of tsconfig.json

[Timer]

Hey @liamdanielduffy! Next.js currently doesn't translate baseUrl nor paths to webpack configuration.

For now, please customize your webpack configuration using next.config.js. We'll get this implemented soon!

[liamdanielduffy]

Awesome :) thanks @Timer!

[JerryGreen]

Holy moly this will be incredible to seeing this! I mean, I love you guys, the NextJS team. For removing all these unnecessary configs, etc. - that's cool

[timneutkens]

Feel free to implement this! I think we should also support jsconfig.json in a similar way.

[ghost]

+1

[Timer]

This is now supported in the latest Next.js canary version: next@^9.3.2-canary.2.

You'll need to enable the feature flag as explained in https://github.com/zeit/next.js/pull/11293.