@storybook/react 6.5.5 react 18 support #18349

oshi97 · 2022-05-27T19:25:41Z

Describe the bug

@storybook/react says in its peer deps it has react 18 support.
However, it also has react-element-to-jsx-string@14.3.4 as a dependency, which does not yet support react 18
storybook package.json: https://github.com/storybookjs/storybook/blob/v6.5.5/app/react/package.json.

When I try to npm install @storybook/react@6.5.5 with react-18 already as a dep in my library, npm logs several warnings about react-element-to-jsx-string

react-element-to-jsx-string package.json: https://github.com/algolia/react-element-to-jsx-string/blob/v14.3.4/package.json

Upgrading to react-element-to-jsx-string@15 should fix this

The text was updated successfully, but these errors were encountered:

samuel-joyson · 2022-05-31T04:22:16Z

i am getting 'react-refresh' module not found issue. i upgraded to react 18 and storybook to 6.5.6. is there any dependency missing?

Environment Info:


  System:
    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
  Binaries:
    Node: 17.4.0 - ~/.nvm/versions/node/v17.4.0/bin/node
    npm: 8.4.0 - ~/.nvm/versions/node/v17.4.0/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 100.0.2
  npmPackages:
    @storybook/addon-actions: ^6.5.6 => 6.5.6 
    @storybook/addon-essentials: ^6.5.6 => 6.5.6 
    @storybook/addon-interactions: ^6.5.6 => 6.5.6 
    @storybook/addon-links: ^6.5.6 => 6.5.6 
    @storybook/builder-webpack5: ^6.5.6 => 6.5.6 
    @storybook/manager-webpack5: ^6.5.6 => 6.5.6 
    @storybook/node-logger: ^6.5.6 => 6.5.6 
    @storybook/preset-create-react-app: ^4.1.1 => 4.1.1 
    @storybook/react: ^6.5.6 => 6.5.6 
    @storybook/testing-library: ^0.0.11 => 0.0.11

ModuleNotFoundError: Module not found: Error: Cannot find module 'react-refresh'
Require stack:
- /home/joyson/wkspc/esn-ui/ui-components/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/utils/injectRefreshLoader.js
- /home/joyson/wkspc/esn-ui/ui-components/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/utils/index.js
- /home/joyson/wkspc/esn-ui/ui-components/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/index.js
- /home/joyson/wkspc/esn-ui/ui-components/node_modules/@storybook/react/dist/cjs/server/framework-preset-react.js
- /home/joyson/wkspc/esn-ui/ui-components/node_modules/@storybook/core-common/dist/cjs/presets.js
- /home/joyson/wkspc/esn-ui/ui-components/node_modules/@storybook/core-common/dist/cjs/index.js
- /home/joyson/wkspc/esn-ui/ui-components/node_modules/@storybook/core-server/dist/cjs/index.js
- /home/joyson/wkspc/esn-ui/ui-components/node_modules/@storybook/core/dist/cjs/server.js
- /home/joyson/wkspc/esn-ui/ui-components/node_modules/@storybook/core/server.js
- /home/joyson/wkspc/esn-ui/ui-components/node_modules/@storybook/react/dist/cjs/server/index.js
- /home/joyson/wkspc/esn-ui/ui-components/node_modules/@storybook/react/bin/index.js
    at /home/joyson/wkspc/esn-ui/ui-components/node_modules/webpack/lib/Compilation.js:2016:28
    at /home/joyson/wkspc/esn-ui/ui-components/node_modules/webpack/lib/NormalModuleFactory.js:798:13
    at eval (eval at create (/home/joyson/wkspc/esn-ui/ui-components/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /home/joyson/wkspc/esn-ui/ui-components/node_modules/webpack/lib/NormalModuleFactory.js:285:23
    at _next0 (eval at create (/home/joyson/wkspc/esn-ui/ui-components/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at eval (eval at create (/home/joyson/wkspc/esn-ui/ui-components/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:35:1)
    at /home/joyson/wkspc/esn-ui/ui-components/node_modules/react-dev-utils/ModuleNotFoundPlugin.js:134:17
    at /home/joyson/wkspc/esn-ui/ui-components/node_modules/case-sensitive-paths-webpack-plugin/index.js:176:9
    at /home/joyson/wkspc/esn-ui/ui-components/node_modules/case-sensitive-paths-webpack-plugin/index.js:125:7
    at CaseSensitivePathsPlugin.fileExistsWithCase (/home/joyson/wkspc/esn-ui/ui-components/node_modules/case-sensitive-paths-webpack-plugin/index.js:95:5)

inxsvf · 2022-05-31T13:31:44Z

I had the same issue, but got it fixed by deleting node_modules folder and the package-lock.json and then run npm install

Updates answers-headless-react to the alpha version that announces react 16.14 support. Update unit tests to run in react 17 + 16 + 18. I tried to upgrade the lib to use react 18 as as a dev dep, but we still have a few dependencies that don't allow for 18 like storybook/react. I opened up an issue for that particular one, since I believe it's the only one. storybookjs/storybook#18349 (comment) J=SLAP-2113 TEST=manual,auto run test-site with react 16, check dev tools to see it is using react-dom 16.14 update unit tests to run in react 16 and 17

Updates answers-headless-react to the alpha version that announces react 16.14 support. Update unit tests to run in react 16 in addition to 17. I tried to upgrade the lib to use react 18 as as a dev dep, but we still have a few dependencies that don't allow for 18 like storybook/react. I opened up an issue for that particular one, since I believe it's the only one. storybookjs/storybook#18349 (comment) J=SLAP-2113 TEST=manual,auto run test-site with react 16, check dev tools to see it is using react-dom 16.14 update unit tests to run in react 16

bonesoul · 2022-07-04T19:36:39Z

same issue here. https://github.com/algolia/react-element-to-jsx-string/releases/tag/v15.0.0 seems to fix the issue.

amannn · 2022-07-21T07:32:22Z

Also the storyshots plugin hasn't been updated to support React 18 yet:

storybook/addons/storyshots/storyshots-core/package.json

Line 64 in bf98ade

"react-test-renderer": "^16.8.0 || ^17.0.0",

When running storyshots with React 18 I'm currently seeing this error:

    TypeError: Cannot read properties of undefined (reading 'current')

      at current (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14999:31)
      at warnIfNotScopedWithMatchingAct (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16413:7)
      at updateContainer (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17149:3)
      at currentRenderer (node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/react/renderTree.js:24:18)
      at renderTree (node_modules/@storybook/addon-storyshots/dist/ts3.9/test-bodies.js:49:24)
      at Object.testMethod (node_modules/@storybook/addon-storyshots/dist/ts3.9/api/snapshotsTestsTemplate.js:29:24)
          at runMicrotasks (<anonymous>)

Andrey-Mayanov · 2022-09-05T14:45:21Z

please, help! I have a react project, I recently updated react to version 18. When I ran stories, I got an error about the deprecated renderDom method. I updated my packages(@storybook/react, @storybook/addon-docs and etc.) to version 6.5.10 and now after starting I get an error:

ModuleParseError: Module parse failed: ' import' and 'export' nay appear only with 'sourceType: module' (1:0)
File was processed with these Loaders:
/node modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js

shilman · 2022-09-05T17:04:20Z

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.30 containing PR #19104 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

Updates answers-headless-react to the alpha version that announces react 16.14 support. Update unit tests to run in react 16 in addition to 17. I tried to upgrade the lib to use react 18 as as a dev dep, but we still have a few dependencies that don't allow for 18 like storybook/react. I opened up an issue for that particular one, since I believe it's the only one. storybookjs/storybook#18349 (comment) J=SLAP-2113 TEST=manual,auto run test-site with react 16, check dev tools to see it is using react-dom 16.14 update unit tests to run in react 16

oshi97 added bug needs triage labels May 27, 2022

oshi97 mentioned this issue May 31, 2022

support react 16.14 yext/search-ui-react#166

Merged

wenche mentioned this issue Jun 1, 2022

Upgrade pnpm to v8 equinor/energyvision#1051

Closed

afenton90 mentioned this issue Aug 4, 2022

feat(react): add support for react 18 gocardless/react-dropin#16

Merged

IanVS mentioned this issue Sep 5, 2022

Deps: Upgrade react-element-to-jsx-string and react-inspector for React 18 #19104

Merged

shilman closed this as completed Sep 5, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@storybook/react 6.5.5 react 18 support #18349

@storybook/react 6.5.5 react 18 support #18349

oshi97 commented May 27, 2022

samuel-joyson commented May 31, 2022

inxsvf commented May 31, 2022

bonesoul commented Jul 4, 2022

amannn commented Jul 21, 2022

Andrey-Mayanov commented Sep 5, 2022

shilman commented Sep 5, 2022

@storybook/react 6.5.5 react 18 support #18349

@storybook/react 6.5.5 react 18 support #18349

Comments

oshi97 commented May 27, 2022

samuel-joyson commented May 31, 2022

inxsvf commented May 31, 2022

bonesoul commented Jul 4, 2022

amannn commented Jul 21, 2022

Andrey-Mayanov commented Sep 5, 2022

shilman commented Sep 5, 2022