Skip to content
Snippets Groups Projects
user avatar
Henric Trotzig authored
I was running into issues making a static Storybook build on v4 of
Storybook (see https://github.com/airbnb/react-dates/pull/1382#issuecomment-498856007).

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
b6295428
History
Name Last commit Last update
..