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

eric-burel · 2021-03-12T16:27:44Z

This PR replaces #18367 , where I tried (but failed) to make a TS version of @next/plugin-storybook.

This PR:

fix an issue in previous change @next/plugin-storybook that broke rules (you may want to merge fix(next-storybook): make rules an array in webpack config #22125 first, it fixes this bug as well)
sets a with-storybook-advanced example, that will serve as a basis of future development of this plugin.
This example strives to include the same level of "magic" in Storybook, and will help investigating remaining issues for @next/plugin-storybook @next/plugin-storybook issues #19345

Closes storybookjs/storybook#11639

ijjk · 2021-03-12T16:39:17Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
buildDuration	12.5s	12.3s	-177ms
nodeModulesSize	42.8 MB	42.8 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.308	2.258	-0.05
/ avg req/sec	1083.12	1107.22	+24.1
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.548	1.563	⚠️ +0.01
/error-in-render avg req/sec	1615.46	1599.21	⚠️ -16.25

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
677f882d2ed8..a2e7.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	6.65 kB	6.65 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	59.8 kB	59.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
_app-fde3324..9dd1.js gzip	1.28 kB	1.28 kB	✓
_error-af59f..582f.js gzip	3.46 kB	3.46 kB	✓
amp-9716187d..0aa8.js gzip	536 B	536 B	✓
hooks-107e90..74c7.js gzip	888 B	888 B	✓
index-ac435c..ecf2.js gzip	227 B	227 B	✓
link-c0d2c96..de48.js gzip	1.67 kB	1.67 kB	✓
routerDirect..dc9d.js gzip	303 B	303 B	✓
withRouter-6..0e02.js gzip	302 B	302 B	✓
Overall change	8.66 kB	8.66 kB	✓

Client Build Manifests

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
_buildManifest.js gzip	347 B	347 B	✓
Overall change	347 B	347 B	✓

Rendered Page Sizes

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
index.html gzip	612 B	612 B	✓
link.html gzip	620 B	620 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 storybook-alias-example	Change
buildDuration	14.2s	13.8s	-334ms
nodeModulesSize	42.8 MB	42.8 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
677f882d2ed8..a2e7.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	6.65 kB	6.65 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	59.8 kB	59.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
_app-fde3324..9dd1.js gzip	1.28 kB	1.28 kB	✓
_error-af59f..582f.js gzip	3.46 kB	3.46 kB	✓
amp-9716187d..0aa8.js gzip	536 B	536 B	✓
hooks-107e90..74c7.js gzip	888 B	888 B	✓
index-ac435c..ecf2.js gzip	227 B	227 B	✓
link-c0d2c96..de48.js gzip	1.67 kB	1.67 kB	✓
routerDirect..dc9d.js gzip	303 B	303 B	✓
withRouter-6..0e02.js gzip	302 B	302 B	✓
Overall change	8.66 kB	8.66 kB	✓

Client Build Manifests

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
_buildManifest.js gzip	347 B	347 B	✓
Overall change	347 B	347 B	✓

Serverless bundles

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
_error.js	1.02 MB	1.02 MB	✓
404.html	2.67 kB	2.67 kB	✓
500.html	2.65 kB	2.65 kB	✓
amp.amp.html	10.6 kB	10.6 kB	✓
amp.html	1.86 kB	1.86 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1.02 MB	1.02 MB	✓
link.js	1.08 MB	1.08 MB	✓
routerDirect.js	1.07 MB	1.07 MB	✓
withRouter.js	1.07 MB	1.07 MB	✓
Overall change	5.27 MB	5.27 MB	✓

Webpack 5 Mode (Decrease detected ✓)

General

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
buildDuration	14.6s	14.9s	⚠️ +312ms
nodeModulesSize	42.8 MB	42.8 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.215	2.316	⚠️ +0.1
/ avg req/sec	1128.62	1079.36	⚠️ -49.26
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.451	1.548	⚠️ +0.1
/error-in-render avg req/sec	1722.98	1615.17	⚠️ -107.81

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
597-2bc2376a..203d.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	954 B	954 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
_app-0c62a59..94b7.js gzip	1.26 kB	1.26 kB	✓
_error-97d24..ed28.js gzip	3.38 kB	3.38 kB	✓
amp-2926e4c2..9ccc.js gzip	536 B	536 B	✓
hooks-1ed65b..8908.js gzip	902 B	902 B	✓
index-6259b6..77d8.js gzip	230 B	230 B	✓
link-b722682..14a4.js gzip	1.65 kB	1.65 kB	✓
routerDirect..862a.js gzip	306 B	306 B	✓
withRouter-4..76fd.js gzip	302 B	302 B	✓
Overall change	8.57 kB	8.57 kB	✓

Client Build Manifests

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
_buildManifest.js gzip	322 B	322 B	✓
Overall change	322 B	322 B	✓

Rendered Page Sizes

	vercel/next.js canary	lbke/next.js storybook-alias-example	Change
index.html gzip	586 B	586 B	✓
link.html gzip	593 B	593 B	✓
withRouter.html gzip	579 B	579 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for index.html

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "L346usyHMHJ0eGPxv8Fev",
+        "buildId": "fbhb47do3jycyktUWYpog",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/L346usyHMHJ0eGPxv8Fev/_buildManifest.js"
+      src="/_next/static/fbhb47do3jycyktUWYpog/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/L346usyHMHJ0eGPxv8Fev/_ssgManifest.js"
+      src="/_next/static/fbhb47do3jycyktUWYpog/_ssgManifest.js"
       async=""
     ></script>
   </body>

Diff for link.html

@@ -48,7 +48,7 @@
         "props": { "pageProps": {} },
         "page": "/link",
         "query": {},
-        "buildId": "L346usyHMHJ0eGPxv8Fev",
+        "buildId": "fbhb47do3jycyktUWYpog",
         "isFallback": false,
         "gip": true
       }
@@ -82,11 +82,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/L346usyHMHJ0eGPxv8Fev/_buildManifest.js"
+      src="/_next/static/fbhb47do3jycyktUWYpog/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/L346usyHMHJ0eGPxv8Fev/_ssgManifest.js"
+      src="/_next/static/fbhb47do3jycyktUWYpog/_ssgManifest.js"
       async=""
     ></script>
   </body>

Diff for withRouter.html

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/withRouter",
         "query": {},
-        "buildId": "L346usyHMHJ0eGPxv8Fev",
+        "buildId": "fbhb47do3jycyktUWYpog",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/L346usyHMHJ0eGPxv8Fev/_buildManifest.js"
+      src="/_next/static/fbhb47do3jycyktUWYpog/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/L346usyHMHJ0eGPxv8Fev/_ssgManifest.js"
+      src="/_next/static/fbhb47do3jycyktUWYpog/_ssgManifest.js"
       async=""
     ></script>
   </body>

Commit: 2c8db40

stefanprobst · 2021-03-13T09:13:14Z

for the first point also see #22125

matamatanot · 2021-04-23T11:52:09Z

@Timer
#20759
It looks like most of the plugins have been removed, but does this affect @next/plugin-storybook too?

eric-burel · 2021-04-23T12:04:23Z

Btw that's something we could take care of in Storybook instead or as a community package. The interesting part of having it in Next is that we can access webpack code directly, because it could benefit for slight refactor to make it easier to reuse the "build magic" of Next in 3rd party tools (Jest, Storybook...). Storybook is a good use case for this.

Sharcoux · 2021-04-23T13:22:51Z

@divmain @ijjk @lfades @shuding @timneutkens There is this open PR and that one fixing an implementation that everyone can see was wrong, and without any impact I can think of except than making a broken implementation work again. Is there an extra concern I'm missing here? Otherwise this should probably be merged without delay.

leerob · 2021-04-23T13:26:24Z

I was wrong - my bad 😄

leerob · 2021-04-23T13:27:53Z

Wouldn't it make more sense to just fix the current implementation for now with the current fix proposed here, and, when the new plugin system is ready, remove the legacy one? Or did I misunderstand?

This doesn't use that plugin system 😄 I misread this PR and thought it did, but it does not.

The answer to #23020 (comment) is no, it does not affect this 😄

Sharcoux · 2021-04-23T17:48:04Z

@leerob now that you're here, can't this be merged?

Sharcoux · 2021-04-30T11:58:51Z

@leerob please ?

imns1ght · 2021-04-30T16:15:27Z

I would be very grateful if someone merges this, I need these corrections too.

eric-burel · 2021-05-04T20:41:11Z

For those "in need" for this PR, though I also would like to see it merged as soon as possible, being the author of said PR, please keep in mind that this package is completely experimental anyway. And like really experimental, there are multiple known limitations to it (#19345). It may need multiple additional PR on Next.js webpack config to be fully working as expected.
The point of @next/plugin-storybook is not to make Storybook install possible (it already is), it is to make it a one-liner, which is a very different goal. It's ok if it takes time.
If you need Storybook in Next, there is a basic example in the official example folder, an example setup in Next Right Now (fairly complete with CSS modules and all), and an example setup in my own boilerplate Vulcan Next.
(I also probably added to the confusion by creating a first dirtier version of this PR that was using TypeScript but didn't work as expected)

leerob · 2021-05-04T22:42:13Z

@Sharcoux I'm marking your component as disruptive again, please consider using friendlier language.

I'm happy to merge #22125 which solves the same issue (just approved it!) – but I'm going to close this as I don't think we should add an example showing how to use an experimental plugin. This will lead to users trying to use this plugin, thinking it's ready for production, and being dissatisfied.

Once the plugin is stable, I would love to see the other Storybook example updated to use it 😄 🚀

eric-burel · 2021-05-05T16:05:29Z

Makes sense, thanks for merging the fix PR from #22125. I am going to maintain the example there until @next/plugin-storybook is more stable: https://github.com/lbke/next-plugin-storybook-demo

eric-burel · 2021-05-05T16:11:05Z

@leerob just a question, I've never managed to turn the @next/plugin-storybook into TypeScript code. This would have caught the bug very early on, but somehow the imports as they are written now do not work when I use TypeScript (see my experiment in #18367, file packages/next-plugin-storybook/preset.ts). If you have someone at Next that could give some hints that could help stabilizing this plugin a bit.

leerob · 2021-05-05T16:53:07Z

@eric-burel I'm unfortunately a TypeScript novice so I can't be of much assistance. It's still magic to me 😄

eric-burel · 2021-06-08T14:05:57Z

Hi, for those following this work, I'd need help on this issue: #25557
The plugin basically doesn't work anymore with webpack 5 (or I couldn't make it work at least), because Next.js is using it's own bundled version of Webpack, that creates conflict with Storybook own version.

Solution would lie into being able to reuse Next.js bundle, I am pretty sure it's technically possible but that's definitely too big for me alone, so any help is welcome.

add an example using @next/plugin-storybook + fix webpack rules

2c8db40

eric-burel requested review from divmain, ijjk, leerob, lfades, Timer and timneutkens as code owners March 12, 2021 16:27

ijjk added the examples Issue/PR related to examples label Mar 12, 2021

This was referenced Mar 12, 2021

WIP Feature/storybook default import #18367

Closed

@next/plugin-storybook issues #19345

Closed

Sharcoux approved these changes Apr 13, 2021

View reviewed changes

leerob closed this Apr 23, 2021

leerob mentioned this pull request Apr 23, 2021

fix(next-storybook): make rules an array in webpack config #22125

Merged

leerob reopened this Apr 23, 2021

This comment has been minimized.

Sign in to view

leerob closed this May 4, 2021

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

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

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

eric-burel commented Mar 12, 2021 •

edited

ijjk commented Mar 12, 2021

Diffs

stefanprobst commented Mar 13, 2021

matamatanot commented Apr 23, 2021 •

edited

eric-burel commented Apr 23, 2021

Sharcoux commented Apr 23, 2021

leerob commented Apr 23, 2021

leerob commented Apr 23, 2021 •

edited

Sharcoux commented Apr 23, 2021

Sharcoux commented Apr 30, 2021

imns1ght commented Apr 30, 2021

This comment has been minimized.

eric-burel commented May 4, 2021 •

edited

This comment has been minimized.

leerob commented May 4, 2021 •

edited

eric-burel commented May 5, 2021

eric-burel commented May 5, 2021 •

edited

leerob commented May 5, 2021

eric-burel commented Jun 8, 2021

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

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

Conversation

eric-burel commented Mar 12, 2021 • edited

ijjk commented Mar 12, 2021

Stats from current PR

Diffs

stefanprobst commented Mar 13, 2021

matamatanot commented Apr 23, 2021 • edited

eric-burel commented Apr 23, 2021

Sharcoux commented Apr 23, 2021

leerob commented Apr 23, 2021

leerob commented Apr 23, 2021 • edited

Sharcoux commented Apr 23, 2021

Sharcoux commented Apr 30, 2021

imns1ght commented Apr 30, 2021

This comment has been minimized.

eric-burel commented May 4, 2021 • edited

This comment has been minimized.

leerob commented May 4, 2021 • edited

eric-burel commented May 5, 2021

eric-burel commented May 5, 2021 • edited

leerob commented May 5, 2021

eric-burel commented Jun 8, 2021

eric-burel commented Mar 12, 2021 •

edited

matamatanot commented Apr 23, 2021 •

edited

leerob commented Apr 23, 2021 •

edited

eric-burel commented May 4, 2021 •

edited

leerob commented May 4, 2021 •

edited

eric-burel commented May 5, 2021 •

edited