WIP Feature/storybook default import #18367

eric-burel · 2020-10-28T08:12:09Z

Update with-storybook example with an example of module path alias as described in https://nextjs.org/docs/advanced-features/module-path-aliases.
Provides a fixed version of the preset, in TypeScript
Converts the Storybook preset into TypeScript to avoid further issues => this is where I am stuck

This completes PR #18364 that provides a quickfix in JavaScript already.

Since the issue would have been caught immediately in TS, switching the package to TS is probably the best solution.
However I did not manage to make it build reliably, nor to import it in the with-storybook example (I get this Cannot find module 'next/lib/find-pages-dir').

Current issues:

I've managed to setup TS build but I have one last issue with import type, they don't work.
I've noticed that yarn why typescript also gives: => Found "microbundle#[email protected]" (in addition to the normal TS install on version 3.8.3). So the local binary tsc is at version 3.7.5, which is not compatible with import type. I don't know how Next itself is built and how it uses the correct version of TypeScript.
getWebpackConfig is clearly overkill. It should be split into pieces, eg adding paths from the jsconfig or tsconfig, adding plugins, and so on, and we should add those helpers one after the other in Storybook. Loading all at once is room for trouble and raise issues in end applications (@next/plugin-storybook issues #19345)

Next steps:

Fix the last issue with TS
Focus on loading the paths from jsconfig/tsconfig to generate the webpack alias so the with-storybook example works ok

ijjk · 2020-10-28T08:23:32Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
buildDuration	14.2s	14.4s	⚠️ +170ms
nodeModulesSize	91.3 MB	91.3 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.813	2.776	-0.04
/ avg req/sec	888.61	900.54	+11.93
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.762	1.847	⚠️ +0.08
/error-in-render avg req/sec	1418.79	1353.25	⚠️ -65.54

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
677f882d2ed8..3aa9.js gzip	11.3 kB	11.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-fc2ed98..cd2b.js gzip	7.33 kB	7.33 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
677f882d2ed8..dule.js gzip	7.03 kB	7.03 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-20f9619..dule.js gzip	6.31 kB	6.31 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
buildDuration	16.6s	16.5s	-148ms
nodeModulesSize	91.3 MB	91.3 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
677f882d2ed8..3aa9.js gzip	11.3 kB	11.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-fc2ed98..cd2b.js gzip	7.33 kB	7.33 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
677f882d2ed8..dule.js gzip	7.03 kB	7.03 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-20f9619..dule.js gzip	6.31 kB	6.31 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.73 kB	4.73 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.11 MB	1.11 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.43 MB	5.43 MB	✓

Commit: 1b04b26

weyert · 2020-11-11T16:16:29Z

Currently it's advised not to use next-plugin-storybook has this now changed?

eric-burel · 2020-11-11T16:36:19Z

@weyert Latest version should work fine (10.0.1), so you can use it.
This PR is meant at stabilizing the package by catching errors on build with TypeScript, but it already works as is in the latest release.

Also we need to wait for the next version of Storybook to stabilize Storybook and Next integration. Currently you may have React version mismatches, but fixing it is Storybook team priority right now so it will be fixed very soon.

I'll finish the PR on Storybook docs and send a PR an update to the README when everything is stable and tested.

lfades

@eric-burel Please let me know when the PR is ready for review 🙏

eric-burel · 2020-11-17T07:11:24Z

@lfades I've just updated on latest canary and fixed the conflicts.

What blocks me is that cd packages/next-plugin-storybook && yarn run build won't work and I don't get why. It doesn't find the imports from other next packages like next/constants and I don't get what is wrong in my TS config.

The code is otherwise fine, it is the same as before except I've changed preset.js to TypeScript + improved the Storybook example to use the preset.

Edit: the build produces a JS file, but then if I try to use the package in with-storybook I get Error: Cannot find module 'next/lib/find-pages-dir' which is a dependency of the preset. Basically I don't get TS right...

ijjk · 2020-11-17T07:17:24Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
buildDuration	13.5s	13.8s	⚠️ +249ms
nodeModulesSize	85 MB	85 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.537	2.447	-0.09
/ avg req/sec	985.4	1021.48	+36.08
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.329	1.414	⚠️ +0.08
/error-in-render avg req/sec	1880.86	1767.9	⚠️ -112.96

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
677f882d2ed8..776c.js gzip	12.7 kB	12.7 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-95c0df2..6c91.js gzip	6.53 kB	6.53 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.9 kB	58.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
677f882d2ed8..dule.js gzip	8.26 kB	8.26 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-8ead8dd..dule.js gzip	5.64 kB	5.64 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.6 kB	53.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_app-3b0cf13..85f8.js gzip	1.28 kB	1.28 kB	✓
_error-6f635..c393.js gzip	3.44 kB	3.44 kB	✓
hooks-d4ffc3..9e0f.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d9a15a0..130a.js gzip	1.57 kB	1.57 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.98 kB	7.98 kB	✓

Client Pages Modern

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-f2fcc..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-973cce3..dule.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.6 kB	5.6 kB	✓

Client Build Manifests

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_buildManifest.js gzip	321 B	321 B	✓
_buildManife..dule.js gzip	330 B	330 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
index.html gzip	968 B	968 B	✓
link.html gzip	974 B	974 B	✓
withRouter.html gzip	961 B	961 B	✓
Overall change	2.9 kB	2.9 kB	✓

Serverless Mode

General

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
buildDuration	15.7s	15.3s	-454ms
nodeModulesSize	85 MB	85 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
677f882d2ed8..776c.js gzip	12.7 kB	12.7 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-95c0df2..6c91.js gzip	6.53 kB	6.53 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.9 kB	58.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
677f882d2ed8..dule.js gzip	8.26 kB	8.26 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-8ead8dd..dule.js gzip	5.64 kB	5.64 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.6 kB	53.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_app-3b0cf13..85f8.js gzip	1.28 kB	1.28 kB	✓
_error-6f635..c393.js gzip	3.44 kB	3.44 kB	✓
hooks-d4ffc3..9e0f.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d9a15a0..130a.js gzip	1.57 kB	1.57 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.98 kB	7.98 kB	✓

Client Pages Modern

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-f2fcc..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-973cce3..dule.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.6 kB	5.6 kB	✓

Client Build Manifests

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_buildManifest.js gzip	321 B	321 B	✓
_buildManife..dule.js gzip	330 B	330 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_error.js	918 kB	918 kB	✓
404.html	4.61 kB	4.61 kB	✓
hooks.html	3.86 kB	3.86 kB	✓
index.js	918 kB	918 kB	✓
link.js	976 kB	976 kB	✓
routerDirect.js	969 kB	969 kB	✓
withRouter.js	969 kB	969 kB	✓
Overall change	4.76 MB	4.76 MB	✓

Commit: 8052b05

ijjk · 2020-12-18T07:54:38Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
buildDuration	9s	8.9s	-13ms
nodeModulesSize	82.4 MB	82.4 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.114	2.126	⚠️ +0.01
/ avg req/sec	1182.43	1176.17	⚠️ -6.26
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.11	1.149	⚠️ +0.04
/error-in-render avg req/sec	2251.85	2176.25	⚠️ -75.6

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
677f882d2ed8..5e70.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-1f21dcf..0011.js gzip	6.56 kB	6.56 kB	✓
webpack-95c2..e870.js gzip	751 B	751 B	✓
Overall change	59 kB	59 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
polyfills-d3..23f6.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_app-0d19cb6..5497.js gzip	1.28 kB	1.28 kB	✓
_error-2cf0e..a0a0.js gzip	3.69 kB	3.69 kB	✓
hooks-42456f..0c06.js gzip	887 B	887 B	✓
index-8081ce..e44f.js gzip	227 B	227 B	✓
link-0ab9f83..fa00.js gzip	1.61 kB	1.61 kB	✓
routerDirect..c3d8.js gzip	303 B	303 B	✓
withRouter-0..a68e.js gzip	302 B	302 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Rendered Page Sizes

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
index.html gzip	612 B	612 B	✓
link.html gzip	619 B	619 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
buildDuration	10.4s	10.9s	⚠️ +454ms
nodeModulesSize	82.4 MB	82.4 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
677f882d2ed8..5e70.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-1f21dcf..0011.js gzip	6.56 kB	6.56 kB	✓
webpack-95c2..e870.js gzip	751 B	751 B	✓
Overall change	59 kB	59 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
polyfills-d3..23f6.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_app-0d19cb6..5497.js gzip	1.28 kB	1.28 kB	✓
_error-2cf0e..a0a0.js gzip	3.69 kB	3.69 kB	✓
hooks-42456f..0c06.js gzip	887 B	887 B	✓
index-8081ce..e44f.js gzip	227 B	227 B	✓
link-0ab9f83..fa00.js gzip	1.61 kB	1.61 kB	✓
routerDirect..c3d8.js gzip	303 B	303 B	✓
withRouter-0..a68e.js gzip	302 B	302 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Serverless bundles

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.16 MB	5.16 MB	✓

Commit: 641e3be

ijjk · 2020-12-18T07:59:30Z

Failing test suites

Commit: 641e3be

test/integration/production-build-dir/test/index.test.js

Production Custom Build Directory > With basic usage > should render the page

Expand output

● Production Custom Build Directory › With basic usage › should render the page

expect(received).toBe(expected) // Object.is equality

Expected: ""
Received: "The postprocess middleware \"Inline-Fonts\" took 20ms(20, 0) to complete. This is longer than the 10 limit.
"

  20 |         stderr: true,
  21 |       })
> 22 |       expect(result.stderr).toBe('')
     |                             ^
  23 | 
  24 |       const app = nextServer({
  25 |         dir: join(__dirname, '../build'),

  at Object.<anonymous> (integration/production-build-dir/test/index.test.js:22:29)

…TS file instead of plugin

ijjk · 2020-12-18T08:52:11Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
buildDuration	9.9s	9.9s	-26ms
nodeModulesSize	82.4 MB	82.4 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.362	2.359	0
/ avg req/sec	1058.41	1059.78	+1.37
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.272	1.196	-0.08
/error-in-render avg req/sec	1964.93	2090.41	+125.48

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
677f882d2ed8..5e70.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-1f21dcf..0011.js gzip	6.56 kB	6.56 kB	✓
webpack-95c2..e870.js gzip	751 B	751 B	✓
Overall change	59 kB	59 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
polyfills-d3..23f6.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_app-0d19cb6..5497.js gzip	1.28 kB	1.28 kB	✓
_error-2cf0e..a0a0.js gzip	3.69 kB	3.69 kB	✓
hooks-42456f..0c06.js gzip	887 B	887 B	✓
index-8081ce..e44f.js gzip	227 B	227 B	✓
link-0ab9f83..fa00.js gzip	1.61 kB	1.61 kB	✓
routerDirect..c3d8.js gzip	303 B	303 B	✓
withRouter-0..a68e.js gzip	302 B	302 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Rendered Page Sizes

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
index.html gzip	612 B	612 B	✓
link.html gzip	619 B	619 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
buildDuration	11.7s	11.6s	-127ms
nodeModulesSize	82.4 MB	82.4 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
677f882d2ed8..5e70.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-1f21dcf..0011.js gzip	6.56 kB	6.56 kB	✓
webpack-95c2..e870.js gzip	751 B	751 B	✓
Overall change	59 kB	59 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
polyfills-d3..23f6.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_app-0d19cb6..5497.js gzip	1.28 kB	1.28 kB	✓
_error-2cf0e..a0a0.js gzip	3.69 kB	3.69 kB	✓
hooks-42456f..0c06.js gzip	887 B	887 B	✓
index-8081ce..e44f.js gzip	227 B	227 B	✓
link-0ab9f83..fa00.js gzip	1.61 kB	1.61 kB	✓
routerDirect..c3d8.js gzip	303 B	303 B	✓
withRouter-0..a68e.js gzip	302 B	302 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_buildManifest.js gzip	323 B	323 B	✓
Overall change	323 B	323 B	✓

Serverless bundles

	vercel/next.js canary	lbke/next.js feature/storybook-default-import	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.16 MB	5.16 MB	✓

Commit: 6d32d2a

chasewalden · 2021-02-05T10:04:04Z

next.js/packages/next-plugin-storybook/preset.js

Lines 28 to 40 in cef4b4b

    
           config.module.rules = { 
        
             ...filterModuleRules(config), 
        
             ...nextWebpackConfig.module.rules.map((rule) => { 
        
               // we need to resolve next-babel-loader since it's not available 
        
               // relative with storybook's config 
        
               if (rule.use && rule.use.loader === 'next-babel-loader') { 
        
                 rule.use.loader = require.resolve( 
        
                   'next/dist/build/webpack/loaders/next-babel-loader' 
        
                 ) 
        
               } 
        
               return rule 
        
             }), 
        
           }

Should be:

    config.module.rules = [
        // ...
    ];

Causes:

ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules should be an array:
ERR!    [object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, realResource?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }]
ERR!    -> An array of rules applied for modules.

eric-burel · 2021-03-11T16:23:36Z

I think the change referenced by @chasewalden is from @ja0n 's PR
This pull request tried to convert the file to TS so it diverges from the current JS code.

I think I might leave the "preset" file as is if I can't figure a solution and only keep the with-storybook part in this PR.

eric-burel · 2021-03-12T16:28:02Z

Closed in favour of #23020

@stefanprobst

This fixes a bug in `@next/plugin-storybook` caused by an update in the rewrite structure, solution was provided by @stefanprobst #19345 (comment) Secondary question: it would be awesome if someone at Next could help translating `preset.js` into TypeScript, this would catch those bugs immediately. I've tried in #18367 but failed to build correctly. ## Bug - [X] Related issues linked using `fixes #number` => parent issue is an umbrella of various small issues: #19345 - [X] Integration tests added => reproduction is implemented in https://github.com/lbke/next-plugin-storybook-demo until the package is more stable

@stefanprobst

This fixes a bug in `@next/plugin-storybook` caused by an update in the rewrite structure, solution was provided by @stefanprobst vercel#19345 (comment) Secondary question: it would be awesome if someone at Next could help translating `preset.js` into TypeScript, this would catch those bugs immediately. I've tried in vercel#18367 but failed to build correctly. ## Bug - [X] Related issues linked using `fixes #number` => parent issue is an umbrella of various small issues: vercel#19345 - [X] Integration tests added => reproduction is implemented in https://github.com/lbke/next-plugin-storybook-demo until the package is more stable

eric-burel added 4 commits October 28, 2020 08:56

demo module path aliases in with-storybook

b7f8a69

add @next/plugin-storybook to storybook example

100c7e2

provide fixed TS version of next-plugin-storybook

6b468de

draft setup of a tsconfig

1b04b26

eric-burel requested review from chibicode, ijjk, lfades, Timer and timneutkens as code owners October 28, 2020 08:12

ijjk added the examples Issue was opened via the examples template. label Oct 28, 2020

eric-burel mentioned this pull request Oct 28, 2020

Storybook is not able to resolve path with Next js absolute import storybookjs/storybook#11639

Closed

eric-burel mentioned this pull request Nov 4, 2020

DRAFT documentation for Next and serve storybookjs/storybook#13008

Closed

styfle mentioned this pull request Nov 4, 2020

Image component does not work with Storybook #18393

Closed

lfades self-assigned this Nov 12, 2020

lfades requested changes Nov 16, 2020

View reviewed changes

Merge branch 'canary' into feature/storybook-default-import

8052b05

eric-burel mentioned this pull request Nov 20, 2020

@next/plugin-storybook issues #19345

Closed

7 tasks

Merge branch 'canary' into feature/storybook-default-import

641e3be

vercel bot temporarily deployed to Preview December 18, 2020 07:46 Inactive

eric-burel mentioned this pull request Dec 18, 2020

Fix and add test filterModuleRules for next-plugin-storybook #17306

Merged

add node typings to storybook packages and load constants from local …

6d32d2a

…TS file instead of plugin

vercel bot temporarily deployed to Preview December 18, 2020 08:43 Inactive

eric-burel mentioned this pull request Mar 12, 2021

Add an example using @next/plugin-storybook + fix webpack rules #23020

Closed

eric-burel closed this Mar 12, 2021

eric-burel mentioned this pull request May 5, 2021

Fix rewrite shape in Storybook #24827

Merged

2 tasks

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP Feature/storybook default import #18367

WIP Feature/storybook default import #18367

eric-burel commented Oct 28, 2020 •

edited

Loading

ijjk commented Oct 28, 2020

weyert commented Nov 11, 2020

eric-burel commented Nov 11, 2020 •

edited

Loading

lfades left a comment •

edited

Loading

eric-burel commented Nov 17, 2020 •

edited

Loading

ijjk commented Nov 17, 2020

ijjk commented Dec 18, 2020

ijjk commented Dec 18, 2020

ijjk commented Dec 18, 2020

chasewalden commented Feb 5, 2021

eric-burel commented Mar 11, 2021

eric-burel commented Mar 12, 2021

WIP Feature/storybook default import #18367

WIP Feature/storybook default import #18367

Conversation

eric-burel commented Oct 28, 2020 • edited Loading

ijjk commented Oct 28, 2020

Stats from current PR

weyert commented Nov 11, 2020

eric-burel commented Nov 11, 2020 • edited Loading

lfades left a comment • edited Loading

Choose a reason for hiding this comment

eric-burel commented Nov 17, 2020 • edited Loading

ijjk commented Nov 17, 2020

Stats from current PR

ijjk commented Dec 18, 2020

Stats from current PR

ijjk commented Dec 18, 2020

Failing test suites

ijjk commented Dec 18, 2020

Stats from current PR

chasewalden commented Feb 5, 2021

eric-burel commented Mar 11, 2021

eric-burel commented Mar 12, 2021

eric-burel commented Oct 28, 2020 •

edited

Loading

eric-burel commented Nov 11, 2020 •

edited

Loading

lfades left a comment •

edited

Loading

eric-burel commented Nov 17, 2020 •

edited

Loading