New JSX Transform in React 17 not working for component stories

[alonfai]

Bug or support request summary

Hey all,

I recently upgraded to latest React 17 with support of new JSX transform. I ran the given code mod (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports) to remove the default import React from 'react' in each of my typescript .tsx files.

I now run into problems with all my stories .tsx , that complains with an error ReferenceError: React is not defined (see attached preview).

I tried to implement the solution I found here (jakelazaroff/react-storybook-decorator-background#2 (comment)) by inserting the import statement into the preview.js file, but with no success.

If I return the default import into any of the existing stories, then the story component renders successfully.

Please specify which version of Storybook and optionally any affected addons that you're running

"@storybook/addon-a11y": "^6.0.27",
"@storybook/addon-essentials": "^6.0.27",
"@storybook/addon-jest": "^6.0.27",
"@storybook/addon-knobs": "^6.0.27",
"@storybook/addon-links": "^6.0.27",
"@storybook/addon-storysource": "^6.0.27",
"@storybook/addons": "^6.0.27",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^6.0.27",

[shilman]

Closing as dupe to #12881

[vctqs1]

Could you share your solution, I meet the same issue, tried (jakelazaroff/react-storybook-decorator-background#2 (comment)) but not work

[vctqs1]

I'll temporary copy babel file to bypass