Storybook: Storybook fails to compile after upgrading Next.js to v6.0.3

[sebastian-veggiani-globant]

Storybook fails to compile after upgrading Next to v6.0.3

After upgrading Next.js to v6.0.3 my previously working setup stopped working.

The reported error is:

ERROR in ./.storybook/config.js
Module build failed: Error: Plugin 0 specified in "c:\\....\\node_modules\\next\\babel.js" provided an invalid property of "default" (While processing preset: "c:\\...\\node_modules\\next\\babel.js")

Steps to reproduce

Upgrade a Next project from v5.1 to v6.0.3.

UPDATE: downgrading to v5.1 fixes the problem.

Storybook versions

• storybook/react 3.4.5
• storybook/addon-info 3.4.5

.stoyboojk/config.js

import { configure } from '@storybook/react';
import '../src/styles/main.scss'

const req = require.context('../src', true, /stories\.js$/)

function loadStories() {
  req.keys().forEach(req)
}

configure(loadStories, module);

[suphareuk]

I have same error with Next v6 too.
It look like Storybook has problem with root .babelrc
I fixed by provided a custom .babelrc in .storybook folder

[thulstrup]

@suphareuk What's in your .babelrc in the .storybook folder?

[revolunet]

for me and its not working (same error) :

{
  "presets": ["next/babel"],
  "plugins": [
    "react-require"
  ]
}

[revolunet]

executing yarn just before npm run storybook solves it for me.

i'm using [email protected] and it breaks after each npm i so at the moment you have to use yarn for this

[sebastian-veggiani-globant]

@revolunet using yarn here. running yarn before initializing storybook doesn't solve the problem for me...

[suphareuk]

@thulstrup
This is my .babelrc setting in .storybook folder

{
  "presets": ["env", "stage-0", "react"]
}

I got the error when put only "next/babel" in presets.
Change to use other babel presets in .storybook folder work fine for me.

[thulstrup]

@suphareuk Thanks! That did the trick for me as well.

[revolunet]

Hi

I also had to add "plugins":["react-require"] for next.js

And for some reason this workaround doesnt work when you use next/dynamic in your project :

`next/dynamic` options should contain `modules` and `render` fields

Same error with 3.4.2 or 4.0.0-alpha.8

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!