search

storybookjs / presets

🧩 Presets for Storybook
MIT License
426 stars 104 forks source link

[Bug] cannot run storybook with CRA preset version 4.1.0. #251

Closed mateuszpigula closed 2 years ago

mateuszpigula commented 2 years ago

Describe the bug

I cannot run storybook with CRA preset version 4.1.0.

Steps to reproduce the behavior

  1. Update @storybook/preset-create-react-app from 3.2.0 to 4.1.0
  2. Run yarn storybook
  3. See error

Other storybook packages:

  "@storybook/addon-actions": "6.4.22",
  "@storybook/addon-essentials": "6.4.22",
  "@storybook/addon-links": "6.4.22",
  "@storybook/node-logger": "6.4.22",
  "@storybook/preset-create-react-app": "4.1.0",
  "@storybook/react": "6.4.22",
  ...
  "react": "18.1.0",

Expected behavior

Successful build of storybook

Screenshots and/or logs

yarn run v1.22.17
$ DISABLE_ESLINT_PLUGIN=true start-storybook -p 6006 -s public
info @storybook/react v6.4.22
info
(node:72902) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Serving static files from ./public at /
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack4 setup
33% building 199/205 modules 6 active /Users/mateuszpigula/Projects/X/node_modules/es-abstract/2021/IsCallable.js
info => Ignoring cached manager due to change in manager config
34% building 206/207 modules 1 active /Users/mateuszpigula/Projects/X/node_modules/airbnb-js-shims/target/es2020.jsℹ ｢wdm｣: wait until bundle finished:
webpack built preview 5326a74a8fdc86eaf1f1 in 1838ms
✖ ｢wdm｣: Hash: 5326a74a8fdc86eaf1f1
Version: webpack 4.46.0
Time: 1838ms
Built at: 05/04/2022 11:15:11 AM
                            Asset       Size        Chunks                                Chunk Names
              asset-manifest.json  580 bytes                [emitted]
                      iframe.html   31 bytes                [emitted]
            main.iframe.bundle.js   3.39 KiB          main  [emitted]                     main
        main.iframe.bundle.js.map  195 bytes          main  [emitted] [dev]               main
    runtime~main.iframe.bundle.js   35.3 KiB  runtime~main  [emitted]                     runtime~main
runtime~main.iframe.bundle.js.map   36.5 KiB  runtime~main  [emitted] [dev]               runtime~main
  static/media/index.bfaa82af.ejs   1.26 KiB                [emitted] [immutable]
    vendors~main.iframe.bundle.js   1.16 MiB  vendors~main  [emitted]              [big]  vendors~main
vendors~main.iframe.bundle.js.map    1.1 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.iframe.bundle.js runtime~main.iframe.bundle.js.map vendors~main.iframe.bundle.js vendors~main.iframe.bundle.js.map main.iframe.bundle.js main.iframe.bundle.js.map
[0] multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-config-entry.js 88 bytes {main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js] 2.94 KiB {vendors~main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js] 856 bytes {vendors~main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/utils/errorEventHandlers.js] 3.02 KiB {vendors~main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/utils/formatWebpackErrors.js] 3.34 KiB {vendors~main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/utils/patchUrl.js] 1.17 KiB {vendors~main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/utils/retry.js] 498 bytes {vendors~main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/overlay/index.js] 9.12 KiB {vendors~main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/sockets/WHMEventSource.js] 876 bytes {vendors~main} [built]
[./node_modules/@storybook/builder-webpack4/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built]
[./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js] 105 bytes {vendors~main} [built]
[./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js] 97 bytes {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js-pure/features/global-this.js] 49 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] 7.69 KiB {vendors~main} [built]
    + 471 hidden modules

ERROR in multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-config-entry.js
Module not found: Error: Cannot find module '/Users/mateuszpigula/Projects/X/node_modules/react-refresh/index.js'. Please verify that the package.json has a valid "main" entry
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-config-entry.js main[5]
Child HtmlWebpackCompiler:
                              Asset      Size               Chunks                         Chunk Names
        __child-HtmlWebpackPlugin_0  4.48 KiB  HtmlWebpackPlugin_0                         HtmlWebpackPlugin_0
    static/media/index.bfaa82af.ejs  1.26 KiB                       [emitted] [immutable]
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 75 bytes {HtmlWebpackPlugin_0} [built]
ModuleNotFoundError: Module not found: Error: Cannot find module '/Users/mateuszpigula/Projects/X/node_modules/react-refresh/index.js'. Please verify that the package.json has a valid "main" entry
   ...

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment

dhulme commented 2 years ago

Duplicate of #237