storybook: ERROR in ./node_modules/cosmiconfig/dist/readFile.js

Describe the bug Can’t Run Storybook without any error

Expected behavior Should Run Storybook without any error

Code snippets

import initStoryshots, {
  multiSnapshotWithOptions,
} from '@storybook/addon-storyshots'
import ReactDOM from 'react-dom'

ReactDOM.createPortal = element => element

initStoryshots({
  suite: 'Treehive',
  storyKindRegex: /^(?!.*noSnap)/,
  test: multiSnapshotWithOptions({}),
})

add package

    "@storybook/addon-knobs": "^5.1.3",
    "@storybook/addon-storyshots": "^5.1.3",
    "@storybook/addons": "^5.1.3",
    "@storybook/react": "^5.1.3",
    "react-testing-library": "^7.0.0",

Error Saying

webpack building...
webpack built 79e0ba451fb05f1f2ec8 in 1835ms                                                                            
✖ ｢wdm｣: Hash: 79e0ba451fb05f1f2ec8
Version: webpack 4.33.0
Time: 1835ms
Built at: 2019-06-11 14:16:15
                                          Asset       Size        Chunks                    Chunk Names
           37aee8c12a95cf739c17.hot-update.json   35 bytes                [emitted]         
                            asset-manifest.json  760 bytes                [emitted]         
                                    iframe.html   2.52 KiB                [emitted]         
            main.79e0ba451fb05f1f2ec8.bundle.js    143 KiB          main  [emitted]         main
        main.79e0ba451fb05f1f2ec8.bundle.js.map    144 KiB          main  [emitted]         main
    runtime~main.79e0ba451fb05f1f2ec8.bundle.js   31.1 KiB  runtime~main  [emitted]         runtime~main
runtime~main.79e0ba451fb05f1f2ec8.bundle.js.map   32.3 KiB  runtime~main  [emitted]         runtime~main
                static/media/cross.cf80a58f.svg  565 bytes                                  
            static/media/invalid-x.6de13895.svg  278 bytes                                  
             static/media/login-bg.a7dc4154.svg   3.01 KiB                                  
           static/media/tick_green.ffd384a3.svg  528 bytes                                  
    vendors~main.79e0ba451fb05f1f2ec8.bundle.js   2.63 MiB  vendors~main  [emitted]  [big]  vendors~main
vendors~main.79e0ba451fb05f1f2ec8.bundle.js.map   2.76 MiB  vendors~main  [emitted]         vendors~main
Entrypoint main [big] = runtime~main.79e0ba451fb05f1f2ec8.bundle.js runtime~main.79e0ba451fb05f1f2ec8.bundle.js.map vendors~main.79e0ba451fb05f1f2ec8.bundle.js vendors~main.79e0ba451fb05f1f2ec8.bundle.js.map main.79e0ba451fb05f1f2ec8.bundle.js main.79e0ba451fb05f1f2ec8.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true 64 bytes {main}
[./.storybook/config.js] 303 bytes {main}
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main}
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main}
[./node_modules/@storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main}
[./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main}
[./node_modules/@storybook/react/dist/client/index.js] 1.26 KiB {vendors~main}
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main}
[./node_modules/core-js/features/symbol/index.js] 199 bytes {vendors~main}
[./node_modules/global/window.js] 232 bytes {vendors~main}
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main}
[./node_modules/regenerator-runtime/runtime.js] 23 KiB {vendors~main}
[./node_modules/require-context.macro/require-context.macro.js] 733 bytes {vendors~main}
[./node_modules/strip-ansi/index.js] 161 bytes {vendors~main}
[./node_modules/webpack-hot-middleware/client.js?reload=true] 7.68 KiB {vendors~main}
    + 619 hidden modules

WARNING in ./node_modules/babel-plugin-macros/dist/index.js 55:22-29
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/require-context.macro/require-context.macro.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

WARNING in ./node_modules/import-fresh/index.js 28:8-25
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/cosmiconfig/dist/loaders.js
 @ ./node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/require-context.macro/require-context.macro.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

ERROR in ./node_modules/cosmiconfig/dist/readFile.js
Module not found: Error: Can't resolve 'fs' in '/Users/waseem/Desktop/th/node_modules/cosmiconfig/dist'
 @ ./node_modules/cosmiconfig/dist/readFile.js 4:11-24
 @ ./node_modules/cosmiconfig/dist/createExplorer.js
 @ ./node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/require-context.macro/require-context.macro.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

ERROR in ./node_modules/is-directory/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/waseem/Desktop/th/node_modules/is-directory'
 @ ./node_modules/is-directory/index.js 10:9-22
 @ ./node_modules/cosmiconfig/dist/getDirectory.js
 @ ./node_modules/cosmiconfig/dist/createExplorer.js
 @ ./node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/require-context.macro/require-context.macro.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

ERROR in ./node_modules/resolve/lib/async.js
Module not found: Error: Can't resolve 'fs' in '/Users/waseem/Desktop/th/node_modules/resolve/lib'
 @ ./node_modules/resolve/lib/async.js 2:9-22
 @ ./node_modules/resolve/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/require-context.macro/require-context.macro.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

ERROR in ./node_modules/resolve/lib/sync.js
Module not found: Error: Can't resolve 'fs' in '/Users/waseem/Desktop/th/node_modules/resolve/lib'
 @ ./node_modules/resolve/lib/sync.js 2:9-22
 @ ./node_modules/resolve/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/require-context.macro/require-context.macro.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

ERROR in ./node_modules/resolve-from/index.js
Module not found: Error: Can't resolve 'module' in '/Users/waseem/Desktop/th/node_modules/resolve-from'
 @ ./node_modules/resolve-from/index.js 3:15-32
 @ ./node_modules/import-fresh/index.js
 @ ./node_modules/cosmiconfig/dist/loaders.js
 @ ./node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/require-context.macro/require-context.macro.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 2
  • Comments: 19

Most upvoted comments

To solve this issue you have to install the babel-plugin-macros:

yarn add babel-plugin-macros --dev

Then add a .babelrc file to your root directory:

{
  "plugins": ["macros"]
}
+15
Dammmien on Sep 10, 2019

Thanks, but I was on 3.0.1 at the time (it’s a new project). I cut out Storyshots for now and will have to revisit this.

+1
mAAdhaTTah on Jun 15, 2019

I am also getting this error but the above steps didn’t resolve it. It kinda looks like the macro isn’t running over the file so much as just being require’d directly. Is it possible the babel-loader isn’t getting applied to this correctly? I’ll also note that I downgraded react-scripts v3 -> v2 and that appears to resolve the issue as well, so there could be something in the upgrade causing an issue.

+1
mAAdhaTTah on Jun 14, 2019
Read more comments on GitHub
← storybook: Error importing styles.scss to storybook
storybook: Error on running getstorybook →