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

Created on 11 Jun 2019 · 19Comments · Source: storybookjs/storybook

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

storyshots cra inactive question / support

Source

Waseemrajashaik

👍1

Most helpful comment

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"]
}

Dammmien on 12 Jul 2019

👍6 🚀1 🎉1

All 19 comments

i think i got solution - we need to remove node_modules and yarn.lock - reinstall them - then run yarn start after that yarn run storybook - yarn start will create few files to support yarn run storybook

Waseemrajashaik on 11 Jun 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.

mAAdhaTTah on 14 Jun 2019

👍1

Update to react-script version 3.0.1 it fixed this issue for me

Waseemrajashaik on 15 Jun 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.

mAAdhaTTah on 15 Jun 2019

🎉1

import { configure } from '@storybook/react';
import requireContext from 'require-context.macro';

const req = requireContext('../src', true, /\^*.stories.js$/);

import '../src/styles/main.css';

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module);

requireContext is important for storyshots

Waseemrajashaik on 16 Jun 2019

Can someone reopen this? this is still an issue.

Update
I had "react-scripts":"3.0.1" and didn't work.
But then I changed it for ^3.0.1 and it got fixed !

madroneropaulo on 20 Jun 2019

Reopened this issue
when i get this issues - i need to again reinstall react-scripts: 3.0.1 every time. even if it's already installed . (it occurs when you add new story in it).

Waseemrajashaik on 21 Jun 2019

Whenever we install a new package - then also we are facing this issue

Waseemrajashaik on 26 Jun 2019

Do we have any update or workaround on the topic ?
I have the same issue by upgrading to react-scripts 3.0.1.

Dammmien on 11 Jul 2019

The error is due to the use of require-context.macro instead of require.context().

Dammmien on 12 Jul 2019

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"]
}

Dammmien on 12 Jul 2019

👍6 🚀1 🎉1

I'm using with CRA. Macros are already a part of that build process.

mAAdhaTTah on 12 Jul 2019

Any solution found?

shaibam on 24 Jul 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.

I also tried that (downgraded react-scripts to 2.1.8), and now storybook compiles but the stories dont show

shaibam on 25 Jul 2019

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] on 15 Aug 2019

Still waiting for answer ...

Waseemrajashaik on 27 Aug 2019

Hi,

I saw the same error. For me, it was because my .babelrc was under the /src directory instead of the root directory. After I moved the to the root directory, that fixed the issue.

SpartaSixZero on 10 Sep 2019

stale[bot] on 1 Oct 2019

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

stale[bot] on 31 Oct 2019

Was this page helpful?

0 / 5 - 0 ratings