Storybook: Storybook Compatibility / Migration

[shilman]

Since we are upgrading Babel and Webpack in SB4 and many other popular packages are also in the process of upgrading, we need to understand and document the common patterns to help users make sense of it all. Also we need to make sure the migration instructions are clear for common cases:

| | SB3 | SB4 |
|---------|-----|-----|
| CRA1 | o | o |
| CRA2 | o | o |
| Next6 | o | o |
| Next7 | o | o |
| Gatsby1 | o* | x |
| Gatsby2 | o | o |
| Jest | | |

[shilman]

CRA

@igor-dv @Hypnosphi here are my steps to test SB4 with CRA1:

npx create-react-app@1 --scripts-version 1.1.5 cra1
cd cra1
npx @storybook/cli@alpha
yarn storybook

It generates a package.json with the dependencies, and both the app and storybook work:

    "@babel/core": "^7.1.2",
    "babel-loader": "^8.0.4"

However, when @tmeasday upgraded his existing CRA1 app per MIGRATION.md, he ended up with:

    "babel-core": "^6.26.0",
    "babel-loader": "7",
    "babel-runtime": "^6.26.0",

And this setup got the "unexpected token" error for JSX.

Questions:

• What's going on here? Is the MIGRATION.md wrong (seems to be)?
• How do you run SB4 with a babel6 app?

[igor-dv]

Checked the MIGRATION.md now, it looks lacking some stuff (at least for the current state).

If your app is using babel 7, everything will be probably simple, like in your case.

if your app is using babel 6, you need to make some work.

• add babel-core@bridge
• you will probably need to add .babelrc with all the v6 presets/plugins like babel-preset-env babel-preset-react

BTW, maybe we need to mention regarding the jest compatibility as well, because jest is not working with babel 7 (at least for the last time i've checked) so for the babel-jest we need babel-core@bridge too.

[shilman]

@igor-dv running into some problems. What I did (starting from a CRA1 project using babel-core@6 and babel-runtime@6:

yarn add babel-core@bridge babel-loader@7 --dev
yarn storybook
yarn add @babel/core
yarn storybook

Then I added the following .babelrc:

{
  "presets": [
    "env",
    "react"
  ]
}

And I'm getting the error:

ERROR in ./.storybook/addons.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/shilman/projects/storybook/cra163/node_modules/babel-preset-react/lib/index.js
...

I tried adding @babel/preset-env and @babel/preset-react, but it didn't fix anything.

[shilman]

Gatsby

Here's what I found with Gatsby projects:

Gatsby 2.x projects are autodetected as "React" projects by @storybook/cli and seem to work for both SB3 and SB4.

Gatsby 1.x projects are not auto-detected by @storybook/cli (see #3740), however if you set up the project manually (by copying a CRA config for example), it works fine with SB3. However, they don't seem to work with SB4 and I suspect won't without some real work. I tried both of the CRA upgrade approaches and here's what I found:

1. SB4 relies on @emotion/core which relies on React16. So I had to manually add this to my project (which was using Gatsby 1.9). I think this works-"ish".
2. SB4 relies on either @babel/core@7 + babel-loader@8 or babel-core@6 + babel-runtime@6 + babel-loader@7. However Gatsby 1.9 won't work with Babel 7, and also relies on webpack@1 (???) which is not compatible with babel-loader@7 and gives the error:

fileSystem.statSync is not a function

See also: https://github.com/babel/babel-loader/issues/505

I propose that we don't try to support Gatsby@1 since we don't support it anyway, and encourage people to upgrade to Gatsby@2. Unless somebody wants to dig deeper here.

[igor-dv]

I propose that we don't try to support Gatsby@1 since we don't support it anyway

I agree

[lifeiscontent]

I'm running into an issue using @emotion/core@next

export 'withCSSContext' was not found in '@emotion/core

[igor-dv]

@lifeiscontent, please open a separate issue for this with a proper description.

[ndelangen]

This is complete, right?