Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update to Storybook v5 #1673

Merged
merged 2 commits into from Jun 5, 2019

Conversation

Projects
None yet
4 participants
@trotzig
Copy link
Contributor

commented Jun 5, 2019

I was running into issues making a static Storybook build on v4 of
Storybook (see #1382 (comment)).

The error I'm seeing is something like

ERR! ./examples/DateRangePickerWrapper.jsx
ERR! Module build failed (from ./node_modules/babel-loader/lib/index.js):
ERR! TypeError: Property declarations[0] of VariableDeclaration expected node to be of a type ["VariableDeclarator"] but instead got "ExpressionStatement"
ERR! at validate (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/definitions/utils.js:128:13)
ERR! at validator (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/definitions/utils.js:97:7)
ERR! at Object.validate (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/definitions/utils.js:172:7)
ERR! at validate (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/validators/validate.js:17:9)
ERR! at builder (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/builders/builder.js:46:27)
ERR! at Object.VariableDeclaration (/home/travis/build/airbnb/react-

It seems to happen at the minification step, because right before that
error happens I'm seeing "92% chunk asset TerserPlugin".

I started going down the route of tracing this down in Storybook v4, but
then decided to give v5 a spin instead. It turns out the upgrade isn't
all that complicated, and it does resolve the error I was seeing.

The only change needed except for bumping all the @storybook
dependencies was to turn the webpack config from "extend mode" to "full
control mode". See https://storybook.js.org/docs/configurations/custom-webpack-config/

I used this guide as a starting point to the upgrade:
https://medium.com/storybookjs/storybook-5-migration-guide-d804b38c739d

Update to Storybook v5
I was running into issues making a static Storybook build on v4 of
Storybook (see #1382 (comment)).

The error I'm seeing is something like

ERR! ./examples/DateRangePickerWrapper.jsx
ERR! Module build failed (from ./node_modules/babel-loader/lib/index.js):
ERR! TypeError: Property declarations[0] of VariableDeclaration expected node to be of a type ["VariableDeclarator"] but instead got "ExpressionStatement"
ERR!     at validate (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/definitions/utils.js:128:13)
ERR!     at validator (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/definitions/utils.js:97:7)
ERR!     at Object.validate (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/definitions/utils.js:172:7)
ERR!     at validate (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/validators/validate.js:17:9)
ERR!     at builder (/home/travis/build/airbnb/react-dates/node_modules/@babel/types/lib/builders/builder.js:46:27)
ERR!     at Object.VariableDeclaration (/home/travis/build/airbnb/react-

It seems to happen at the minification step, because right before that
error happens I'm seeing "92% chunk asset TerserPlugin".

I started going down the route of tracing this down in Storybook v4, but
then decided to give v5 a spin instead. It turns out the upgrade isn't
all that complicated, and it does resolve the error I was seeing.

The only change needed except for bumping all the @storybook
dependencies was to turn the webpack config from "extend mode" to "full
control mode". See https://storybook.js.org/docs/configurations/custom-webpack-config/

I used this guide as a starting point to the upgrade:
https://medium.com/storybookjs/storybook-5-migration-guide-d804b38c739d
@trotzig

This comment has been minimized.

Copy link
Contributor Author

commented Jun 5, 2019

This PR will make #1382 happy (or happo if you will ✌️ ). And #1595 as well I think.

@ljharb

ljharb approved these changes Jun 5, 2019

Copy link
Member

left a comment

LGTM if local storybook still works, and npm ls passes, and CI passes

Show resolved Hide resolved .storybook/webpack.config.js Outdated
Show resolved Hide resolved .storybook/webpack.config.js Outdated
@coveralls

This comment has been minimized.

Copy link

commented Jun 5, 2019

Coverage Status

Coverage remained the same at 84.14% when pulling fcdeeb4 on trotzig:storybook-v5 into 8b3f939 on airbnb:master.

Avoid unnecessary spread
We can just push multiple objects into the array in one go.
@trotzig

This comment has been minimized.

Copy link
Contributor Author

commented Jun 5, 2019

local storybook
npm ls
CI
👍

@trotzig

This comment has been minimized.

Copy link
Contributor Author

commented Jun 5, 2019

Thanks for the quick review @ljharb!

@majapw

This comment has been minimized.

Copy link
Contributor

commented Jun 5, 2019

Thanks for doing this @trotzig! @lencioni and I were just talking about this :)

@majapw majapw merged commit 11de201 into airbnb:master Jun 5, 2019

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
coverage/coveralls Coverage remained the same at 84.14%
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.