Not working with React 17

Describe the bug I have updated my project to React 17.0.1 and Storybook 6.1.20.

Now, when I run the storybook, terminal displays this error:

If I would add the @babel/plugin-transform-react-jsx plugin to the main.js, the storybook would be built successfully, but the message in the place of components would be to React is not found.

I have tried reintroducing the React dependency to the places where I’ve removed it, but then it says Cannot read property 'a' of undefined and it points to a line in some method where the return { is (doesn’t make much sense).

To me, it seems that out of the box the Storybook doesn’t support React 17’s Reactless components.

What else is there to be configured?

Expected behavior It should render components like before the React upgrade.

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets main.js

module.exports = {
  stories: [
    '../src/**/*.story.mdx',
    '../src/**/*.story.@(js|jsx|ts|tsx)',
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-storysource',
    '@storybook/addon-knobs',
    '@storybook/addon-actions',
  ],
  babel: async (options) => ({
    ...options,
    plugins: [...options.plugins, '@babel/plugin-transform-react-jsx'],
  }),
};

System Environment Info:

System: OS: Windows 10 10.0.17763 CPU: (8) x64 Intel® Core™ i7-10610U CPU @ 1.80GHz Binaries: Node: 14.15.5 - ~\AppData\Local\Volta\tools\image\node\14.15.5\node.EXE Yarn: 1.22.10 - ~\AppData\Local\Volta\tools\image\yarn\1.22.10\bin\yarn.CMD npm: 6.14.11 - ~\AppData\Local\Volta\tools\image\node\14.15.5\npm.CMD Browsers: Chrome: 88.0.4324.190 npmPackages: @storybook/addon-actions: 6.1.20 => 6.1.20 @storybook/addon-essentials: 6.1.20 => 6.1.20 @storybook/addon-knobs: 6.1.20 => 6.1.20 @storybook/addon-links: 6.1.20 => 6.1.20 @storybook/addon-storysource: 6.1.20 => 6.1.20 @storybook/react: 6.1.20 => 6.1.20

[olabaloo]

FWIW: I do not see this error - however, using npm 6 I can upgrade to React 17 with no problems.

Using npm 7, npm disallows me to upgrade to React 17 due to the Storybook peer dependency react-helmet-async not supporting React 17 (mentioned in https://github.com/staylor/react-helmet-async/issues/109).

[shilman]

@olabaloo I think you need --legacy-peer-deps per the error message