Automatically configure webpack to handle `baseUrl` and `paths` #9513

luciorubeens · 2019-11-25T17:37:50Z

This PR implements the package tsconfig-paths-webpack-plugin (same as used by Storybook) to handle baseURL and paths from the tsconfig.json or jsconfig.json file.

Fixes #7779.

ijjk · 2019-11-25T17:43:04Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
buildDuration	13.3s	13.3s	⚠️ +37ms
nodeModulesSize	48.3 MB	48.6 MB	⚠️ +294 kB

Client Bundles (main, webpack, commons)

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
main-HASH.js	17.9 kB	17.9 kB	✓
main-HASH.js gzip	6.33 kB	6.33 kB	✓
webpack-HASH.js	1.53 kB	1.53 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
16b1a7225520..ebc17c08d.js	19.8 kB	19.8 kB	✓
16b1a7225520..c08d.js gzip	7.35 kB	7.35 kB	✓
4952ddcd88e7..49d7903c2.js	9.6 kB	9.6 kB	✓
4952ddcd88e7..03c2.js gzip	3.76 kB	3.76 kB	✓
commons.HASH.js	10.4 kB	10.4 kB	✓
commons.HASH.js gzip	3.91 kB	3.91 kB	✓
de003c3a9d30..a824c82eb.js	28.3 kB	28.3 kB	✓
de003c3a9d30..82eb.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js	125 kB	125 kB	✓
framework.HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	213 kB	213 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
main-HASH.module.js	14.1 kB	14.1 kB	✓
main-HASH.module.js gzip	5.3 kB	5.3 kB	✓
webpack-HASH.module.js	1.53 kB	1.53 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
16b1a7225520..9a.module.js	21.3 kB	21.3 kB	✓
16b1a7225520..dule.js gzip	8.14 kB	8.14 kB	✓
4952ddcd88e7..cc.module.js	11.9 kB	11.9 kB	✓
4952ddcd88e7..dule.js gzip	4.43 kB	4.43 kB	✓
de003c3a9d30..36.module.js	22.2 kB	22.2 kB	✓
de003c3a9d30..dule.js gzip	8.71 kB	8.71 kB	✓
framework.HASH.module.js	125 kB	125 kB	✓
framework.HA..dule.js gzip	39.4 kB	39.4 kB	✓
Overall change	196 kB	196 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
polyfills-HASH.js	9.11 kB	9.11 kB	✓
polyfills-HASH.js gzip	3.11 kB	3.11 kB	✓
Overall change	9.11 kB	9.11 kB	✓

Client Pages

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
_app.js	2.92 kB	2.92 kB	✓
_app.js gzip	1.32 kB	1.32 kB	✓
_error.js	13.2 kB	13.2 kB	✓
_error.js gzip	5.1 kB	5.1 kB	✓
hooks.js	1.92 kB	1.92 kB	✓
hooks.js gzip	941 B	941 B	✓
index.js	318 B	318 B	✓
index.js gzip	222 B	222 B	✓
link.js	6.76 kB	6.76 kB	✓
link.js gzip	2.88 kB	2.88 kB	✓
routerDirect.js	413 B	413 B	✓
routerDirect.js gzip	285 B	285 B	✓
withRouter.js	423 B	423 B	✓
withRouter.js gzip	284 B	284 B	✓
Overall change	26 kB	26 kB	✓

Client Pages Modern

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
_app.module.js	1.54 kB	1.54 kB	✓
_app.module.js gzip	759 B	759 B	✓
_error.module.js	10.5 kB	10.5 kB	✓
_error.module.js gzip	4.26 kB	4.26 kB	✓
hooks.module.js	677 B	677 B	✓
hooks.module.js gzip	384 B	384 B	✓
index.module.js	292 B	292 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js	5.49 kB	5.49 kB	✓
link.module.js gzip	2.47 kB	2.47 kB	✓
routerDirect.module.js	399 B	399 B	✓
routerDirect..dule.js gzip	285 B	285 B	✓
withRouter.module.js	409 B	409 B	✓
withRouter.m..dule.js gzip	282 B	282 B	✓
Overall change	19.3 kB	19.3 kB	✓

Client Build Manifests

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
_buildManifest.js	244 B	244 B	✓
_buildManifest.js gzip	201 B	201 B	✓
_buildManifest.module.js	251 B	251 B	✓
_buildManife..dule.js gzip	208 B	208 B	✓
Overall change	495 B	495 B	✓

Rendered Page Sizes

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
index.html	4.06 kB	4.06 kB	✓
index.html gzip	1.04 kB	1.04 kB	⚠️ +2 B
link.html	4.58 kB	4.58 kB	✓
link.html gzip	1.12 kB	1.12 kB	✓
withRouter.html	4.59 kB	4.59 kB	✓
withRouter.html gzip	1.1 kB	1.1 kB	⚠️ +1 B
Overall change	13.2 kB	13.2 kB	✓

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
buildDuration	13.4s	13.7s	⚠️ +232ms
nodeModulesSize	48.3 MB	48.6 MB	⚠️ +294 kB

Client Bundles (main, webpack, commons)

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
main-HASH.js	17.9 kB	17.9 kB	✓
main-HASH.js gzip	6.33 kB	6.33 kB	✓
webpack-HASH.js	1.53 kB	1.53 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
16b1a7225520..ebc17c08d.js	19.8 kB	19.8 kB	✓
16b1a7225520..c08d.js gzip	7.35 kB	7.35 kB	✓
4952ddcd88e7..49d7903c2.js	9.6 kB	9.6 kB	✓
4952ddcd88e7..03c2.js gzip	3.76 kB	3.76 kB	✓
commons.HASH.js	10.4 kB	10.4 kB	✓
commons.HASH.js gzip	3.91 kB	3.91 kB	✓
de003c3a9d30..a824c82eb.js	28.3 kB	28.3 kB	✓
de003c3a9d30..82eb.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js	125 kB	125 kB	✓
framework.HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	213 kB	213 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
main-HASH.module.js	14.1 kB	14.1 kB	✓
main-HASH.module.js gzip	5.3 kB	5.3 kB	✓
webpack-HASH.module.js	1.53 kB	1.53 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
16b1a7225520..9a.module.js	21.3 kB	21.3 kB	✓
16b1a7225520..dule.js gzip	8.14 kB	8.14 kB	✓
4952ddcd88e7..cc.module.js	11.9 kB	11.9 kB	✓
4952ddcd88e7..dule.js gzip	4.43 kB	4.43 kB	✓
de003c3a9d30..36.module.js	22.2 kB	22.2 kB	✓
de003c3a9d30..dule.js gzip	8.71 kB	8.71 kB	✓
framework.HASH.module.js	125 kB	125 kB	✓
framework.HA..dule.js gzip	39.4 kB	39.4 kB	✓
Overall change	196 kB	196 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
polyfills-HASH.js	9.11 kB	9.11 kB	✓
polyfills-HASH.js gzip	3.11 kB	3.11 kB	✓
Overall change	9.11 kB	9.11 kB	✓

Client Pages

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
_app.js	2.92 kB	2.92 kB	✓
_app.js gzip	1.32 kB	1.32 kB	✓
_error.js	13.2 kB	13.2 kB	✓
_error.js gzip	5.1 kB	5.1 kB	✓
hooks.js	1.92 kB	1.92 kB	✓
hooks.js gzip	941 B	941 B	✓
index.js	318 B	318 B	✓
index.js gzip	222 B	222 B	✓
link.js	6.76 kB	6.76 kB	✓
link.js gzip	2.88 kB	2.88 kB	✓
routerDirect.js	413 B	413 B	✓
routerDirect.js gzip	285 B	285 B	✓
withRouter.js	423 B	423 B	✓
withRouter.js gzip	284 B	284 B	✓
Overall change	26 kB	26 kB	✓

Client Pages Modern

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
_app.module.js	1.54 kB	1.54 kB	✓
_app.module.js gzip	759 B	759 B	✓
_error.module.js	10.5 kB	10.5 kB	✓
_error.module.js gzip	4.26 kB	4.26 kB	✓
hooks.module.js	677 B	677 B	✓
hooks.module.js gzip	384 B	384 B	✓
index.module.js	292 B	292 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js	5.49 kB	5.49 kB	✓
link.module.js gzip	2.47 kB	2.47 kB	✓
routerDirect.module.js	399 B	399 B	✓
routerDirect..dule.js gzip	285 B	285 B	✓
withRouter.module.js	409 B	409 B	✓
withRouter.m..dule.js gzip	282 B	282 B	✓
Overall change	19.3 kB	19.3 kB	✓

Client Build Manifests

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
_buildManifest.js	244 B	244 B	✓
_buildManifest.js gzip	201 B	201 B	✓
_buildManifest.module.js	251 B	251 B	✓
_buildManife..dule.js gzip	208 B	208 B	✓
Overall change	495 B	495 B	✓

Serverless bundles

	zeit/next.js canary	luciorubeens/next.js refactor/parse-config-file	Change
_error.js	255 kB	255 kB	✓
_error.js gzip	67.9 kB	67.9 kB	⚠️ +1 B
hooks.html	4.19 kB	4.19 kB	✓
hooks.html gzip	1.07 kB	1.07 kB	⚠️ +1 B
index.js	256 kB	256 kB	✓
index.js gzip	68 kB	68 kB	-1 B
link.js	288 kB	288 kB	✓
link.js gzip	77.1 kB	77.1 kB	⚠️ +1 B
routerDirect.js	281 kB	281 kB	✓
routerDirect.js gzip	75.1 kB	75.1 kB	⚠️ +1 B
withRouter.js	281 kB	281 kB	✓
withRouter.js gzip	75.2 kB	75.2 kB	⚠️ +1 B
Overall change	1.37 MB	1.37 MB	✓

Commit: 75ccd2d

lfades · 2019-11-25T17:51:59Z

We want this, but does it need to be tsconfig-paths-webpack-plugin?, I think the same can be achieved using e.g babel-plugin-root-import (which is considerably lower in size), with the added bonus that using babel makes it easily to use for other tools that may use next/babel, like Jest.

timneutkens · 2019-11-26T10:24:34Z

That webpack plugin looks far too complex for what it's trying to do and will probably significantly slow down resolving. You can achieve the same with very minimal configuration 🤔

luciorubeens · 2019-11-26T12:34:08Z

@lfades @timneutkens Ok, agreed. Then I think we should use babel-plugin-module-resolver since root-import requires a prefix and the demo in #7779 won't work. Let me know what you think.

sakulstra · 2019-11-28T17:27:52Z

@luciorubeens while i'm currently using the webpack plugin I'd support your choice of module-resolver over root import due to the reasons you provided 👍

timneutkens · 2019-12-24T15:23:43Z

You don't need a webpack plugin nor a babel plugin to make this work though. The webpack alias feature should be enough right 🤔

sakulstra · 2019-12-24T15:59:56Z

@timneutkens I think that's more or less what this plugin does:

Using this plugin means that you should no longer need to add alias entries in your webpack.config.js which correspond to the paths entries in your tsconfig.json. This plugin creates those alias entries for you, so you don't have to!

The advantage is that you don't have to co-maintain webpack aliases and tsconfig paths, but only the tsconfig paths.

timneutkens · 2019-12-24T16:01:36Z

@sakulstra I'd highly recommend looking at the source code though, it's doing much more than adding a simple configuration (which you probably don't want).

What I meant is that Next.js doesn't need the extra plugins to make it work. with tsconfig.

sakulstra · 2019-12-24T16:10:24Z

I did, and agreed in one of the comments above. My previous message was meant as an answer to:

You don't need a webpack plugin nor a babel plugin to make this work though. The webpack alias feature should be enough right

Yes it is enough, but it's more comfortable if you don't have to set anything up and if you don't have to co-maintain configs.

When I first started of using typescript I thought sth in next was broken as vscode autocompletion and typechecking worked with only paths in tsconfig. I later realized that I had to reconfigure things with the build system (in next that's webpack).
While that's just me being stupid I think providing a solution for this out of the box is not the worst idea.

timneutkens · 2019-12-24T17:37:20Z

I think you’re misunderstanding what I mean. I’m saying we should support it out of the box but not using the mentioned plugins.

Adding it as a feature has already been discussed and approved by us in #7779. Hence why I was giving feedback on the code.

wceolin · 2019-12-24T21:10:30Z

I think doing something like this should do the trick without any external plugins.

Janpot · 2020-03-31T13:25:49Z

I guess since #11293 landed, this PR can be closed now?

timneutkens · 2020-03-31T14:10:46Z

Correct! Thanks for the contribution

luciorubeens added 3 commits November 25, 2019 07:49

Implement tsconfig-paths-webpack-plugin

ae06153

Handle jsconfig.json

479838c

Add integration tests

75ccd2d

luciorubeens requested review from ijjk, lfades, Timer and timneutkens as code owners November 25, 2019 17:37

timneutkens closed this Mar 31, 2020

vercel locked as resolved and limited conversation to collaborators Jan 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Automatically configure webpack to handle `baseUrl` and `paths` #9513

Automatically configure webpack to handle `baseUrl` and `paths` #9513

luciorubeens commented Nov 25, 2019

ijjk commented Nov 25, 2019

lfades commented Nov 25, 2019 •

edited

timneutkens commented Nov 26, 2019 •

edited

luciorubeens commented Nov 26, 2019

sakulstra commented Nov 28, 2019 •

edited

timneutkens commented Dec 24, 2019

sakulstra commented Dec 24, 2019

timneutkens commented Dec 24, 2019 •

edited

sakulstra commented Dec 24, 2019

timneutkens commented Dec 24, 2019 •

edited

wceolin commented Dec 24, 2019

Janpot commented Mar 31, 2020

timneutkens commented Mar 31, 2020

Automatically configure webpack to handle baseUrl and paths #9513

Automatically configure webpack to handle baseUrl and paths #9513

Conversation

luciorubeens commented Nov 25, 2019

ijjk commented Nov 25, 2019

Stats from current PR

lfades commented Nov 25, 2019 • edited

timneutkens commented Nov 26, 2019 • edited

luciorubeens commented Nov 26, 2019

sakulstra commented Nov 28, 2019 • edited

timneutkens commented Dec 24, 2019

sakulstra commented Dec 24, 2019

timneutkens commented Dec 24, 2019 • edited

sakulstra commented Dec 24, 2019

timneutkens commented Dec 24, 2019 • edited

wceolin commented Dec 24, 2019

Janpot commented Mar 31, 2020

timneutkens commented Mar 31, 2020

Automatically configure webpack to handle `baseUrl` and `paths` #9513

Automatically configure webpack to handle `baseUrl` and `paths` #9513

lfades commented Nov 25, 2019 •

edited

timneutkens commented Nov 26, 2019 •

edited

sakulstra commented Nov 28, 2019 •

edited

timneutkens commented Dec 24, 2019 •

edited

timneutkens commented Dec 24, 2019 •

edited