with-storybook doesn't work without React import

[paambaati]

Bug report

Next.js automatically imports React so you don't have to write import React from 'react' in every single source file. The with-storybook example works well with that import, but when it is removed, it doesn't and throws a React is not defined error.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to https://github.com/vercel/next.js/tree/canary/examples/with-storybook and clone the example like it says in the README.
2. Modify the component story by removing the import React from 'react' line and run the storybook again.
3. See error that says React is not defined.

Expected behavior

Just like the rest of Next.js, the storybook should work without having to import React explicitly.

Screenshots

N/A

System information

• OS: macOS
• Browser Chrome
• Version of Next.js: 9.5.2
• Version of Node.js: 14.8.0

Additional context

Storybook's FAQs actually documents this exact issue - see https://storybook.js.org/docs/react/workflows/faq#i-see-referenceerror-react-is-not-defined-when-using-storybooks-with-nextjs

But adding the recommended babel-plugin-react-require plugin doesn't solve the issue, as it seems to conflict (or perhaps overwrite?) with Next.js' own Babel configuration. And most discussions around this issue seem to be outdated (they don't work) with the latest v6 release of Storybook.

[khattakdev]

I'll look into this issue.

[kkfuri]

You need to create a Next.js custom babel config with the default config so storybook uses that config.

with-storybook/.babelrc

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

references:
https://nextjs.org/docs/advanced-features/customizing-babel-config
https://storybook.js.org/docs/react/configure/babel#custom-configuration
If your project has a .babelrc file, we'll use that instead of the default config file

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.