Not working with React 17

[nemonemi]

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(R) Core(TM) 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

[shilman]

do you have a custom babel config in your project root? if so, try removing it temporarily. if that works, you can override it with a custom babel config in the .storybook directory as a workaround.

[nemonemi]

I do have one in my root. I have tried creating an empty {} one in the .storybook folder but that didn't help. I'll try removing the one from the root as well asap.

However, is there any specific configuration for React 17 that I've should have configured, perhaps?

[shilman]

No, if you're using 6.1, react17 should "just work"

[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

[charkour]

I feel like using --legacy-peer-deps is not the best long-term solution. This could cause issues down the road if there are breaking changes between versions that are peer deps.

[shilman]

@charkour yep it's a workaround. however to properly fix the problem requires a lot of changes in libraries that we don't control, so it will have to do in the meantime

[charkour]

Sounds good. I totally understand! Thanks

[nemonemi]

From my perspective, we can close this.