search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.73k stars 9.33k forks source link

Story Book + Gatsby TypeError: Cannot read property 'get' of undefined #14878

Closed omar-shahid closed 1 year ago

omar-shahid commented 3 years ago

I am trying to integrate the storybook with the Gatsby JS project. But every time I start storybook using npm run storybook, it gives me this error. I tried using Storybook v5 after v6, but the error is still there. tried using web pack-5, but still got no avail. Please let me know how to fix this issue. 

    info @storybook/react v6.2.9

    info
    info => Loading presets
    info => Loading 3 other files in "D:\Bootcamp\project-13c____gatsby-aws-lolly-ap
    p\frontend\.storybook"
    info => Adding stories defined in "D:\Bootcamp\project-13c____gatsby-aws-lolly-a
    pp\frontend\.storybook\main.js"
    info => Using implicit CSS loaders
    info => Using default Webpack4 setup
    (node:8660) DeprecationWarning: Default PostCSS plugins are deprecated. When swi
    tching to '@storybook/addon-postcss',
    you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'aut
    oprefixer'.

    See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-d
    efault-postcss-plugins for details.
    (Use `node --trace-deprecation ...` to show where the warning was created)
    0% compilingERR! TypeError: Cannot read property 'get' of undefined
    ERR!     at exports.provide (D:\Bootcamp\project-13c____gatsby-aws-lolly-app\fro
    ntend\node_modules\webpack\lib\util\MapHelpers.js:17:20)
    ERR!     at D:\Bootcamp\project-13c____gatsby-aws-lolly-app\frontend\node_module
    s\webpack\lib\DefinePlugin.js:289:51
    ERR!     at SyncHook.eval [as call] (eval at create (D:\Bootcamp\project-13c____
    gatsby-aws-lolly-app\frontend\node_modules\tapable\lib\HookCodeFactory.js:19:10)
    , <anonymous>:13:1)
    ERR!     at SyncHook.lazyCompileHook (D:\Bootcamp\project-13c____gatsby-aws-loll
    y-app\frontend\node_modules\tapable\lib\Hook.js:154:20)
    ERR!     at Compiler.newCompilation (D:\Bootcamp\project-13c____gatsby-aws-lolly
    -app\frontend\node_modules\@storybook\builder-webpack4\node_modules\webpack\lib\
    Compiler.js:631:26)
    ERR!     at D:\Bootcamp\project-13c____gatsby-aws-lolly-app\frontend\node_module
    s\@storybook\builder-webpack4\node_modules\webpack\lib\Compiler.js:667:29
    ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\Bootcamp\pro
    ject-13c____gatsby-aws-lolly-app\frontend\node_modules\tapable\lib\HookCodeFacto
    ry.js:33:10), <anonymous>:6:1)
    ERR!     at AsyncSeriesHook.lazyCompileHook (D:\Bootcamp\project-13c____gatsby-a
    ws-lolly-app\frontend\node_modules\tapable\lib\Hook.js:154:20)
    ERR!     at Compiler.compile (D:\Bootcamp\project-13c____gatsby-aws-lolly-app\fr
    ontend\node_modules\@storybook\builder-webpack4\node_modules\webpack\lib\Compile
    r.js:662:28)
    ERR!     at D:\Bootcamp\project-13c____gatsby-aws-lolly-app\frontend\node_module
    s\@storybook\builder-webpack4\node_modules\webpack\lib\Watching.js:77:18
    ERR!     at _next0 (eval at create (D:\Bootcamp\project-13c____gatsby-aws-lolly-
    app\frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:25:
    1)
    ERR!     at eval (eval at create (D:\Bootcamp\project-13c____gatsby-aws-lolly-ap
    p\frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:34:1)
    ERR!     at watchRunHook (D:\Bootcamp\project-13c____gatsby-aws-lolly-app\fronte
    nd\node_modules\@storybook\builder-webpack4\node_modules\webpack-virtual-modules
    \index.js:173:5)
    ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\Bootcamp\pro
    ject-13c____gatsby-aws-lolly-app\frontend\node_modules\tapable\lib\HookCodeFacto
    ry.js:33:10), <anonymous>:30:1)
    ERR!     at AsyncSeriesHook.lazyCompileHook (D:\Bootcamp\project-13c____gatsby-a
    ws-lolly-app\frontend\node_modules\tapable\lib\Hook.js:154:20)
    ERR!     at Watching._go (D:\Bootcamp\project-13c____gatsby-aws-lolly-app\fronte
    nd\node_modules\@storybook\builder-webpack4\node_modules\webpack\lib\Watching.js
    :41:32)
    ERR!  TypeError: Cannot read property 'get' of undefined
    ERR!     at exports.provide (D:\Bootcamp\project-13c____gatsby-aws-lolly-app\fro
    ntend\node_modules\webpack\lib\util\MapHelpers.js:17:20)
    ERR!     at D:\Bootcamp\project-13c____gatsby-aws-lolly-app\frontend\node_module
    s\webpack\lib\DefinePlugin.js:289:51
    ERR!     at SyncHook.eval [as call] (eval at create (D:\Bootcamp\project-13c____
    gatsby-aws-lolly-app\frontend\node_modules\tapable\lib\HookCodeFactory.js:19:10)
    , <anonymous>:13:1)
    ERR!     at SyncHook.lazyCompileHook (D:\Bootcamp\project-13c____gatsby-aws-loll
    y-app\frontend\node_modules\tapable\lib\Hook.js:154:20)
    ERR!     at Compiler.newCompilation (D:\Bootcamp\project-13c____gatsby-aws-lolly
    -app\frontend\node_modules\@storybook\builder-webpack4\node_modules\webpack\lib\
    Compiler.js:631:26)
    ERR!     at D:\Bootcamp\project-13c____gatsby-aws-lolly-app\frontend\node_module
    s\@storybook\builder-webpack4\node_modules\webpack\lib\Compiler.js:667:29
    ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\Bootcamp\pro
    ject-13c____gatsby-aws-lolly-app\frontend\node_modules\tapable\lib\HookCodeFacto
    ry.js:33:10), <anonymous>:6:1)
    ERR!     at AsyncSeriesHook.lazyCompileHook (D:\Bootcamp\project-13c____gatsby-a
    ws-lolly-app\frontend\node_modules\tapable\lib\Hook.js:154:20)
    ERR!     at Compiler.compile (D:\Bootcamp\project-13c____gatsby-aws-lolly-app\fr
    ontend\node_modules\@storybook\builder-webpack4\node_modules\webpack\lib\Compile
    r.js:662:28)
    ERR!     at D:\Bootcamp\project-13c____gatsby-aws-lolly-app\frontend\node_module
    s\@storybook\builder-webpack4\node_modules\webpack\lib\Watching.js:77:18
    ERR!     at _next0 (eval at create (D:\Bootcamp\project-13c____gatsby-aws-lolly-
    app\frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:25:
    1)
    ERR!     at eval (eval at create (D:\Bootcamp\project-13c____gatsby-aws-lolly-ap
    p\frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:34:1)
    ERR!     at watchRunHook (D:\Bootcamp\project-13c____gatsby-aws-lolly-app\fronte
    nd\node_modules\@storybook\builder-webpack4\node_modules\webpack-virtual-modules
    \index.js:173:5)
    ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\Bootcamp\pro
    ject-13c____gatsby-aws-lolly-app\frontend\node_modules\tapable\lib\HookCodeFacto
    ry.js:33:10), <anonymous>:30:1)
    ERR!     at AsyncSeriesHook.lazyCompileHook (D:\Bootcamp\project-13c____gatsby-a
    ws-lolly-app\frontend\node_modules\tapable\lib\Hook.js:154:20)
    ERR!     at Watching._go (D:\Bootcamp\project-13c____gatsby-aws-lolly-app\fronte
    nd\node_modules\@storybook\builder-webpack4\node_modules\webpack\lib\Watching.js
    :41:32)

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

    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! gatsby-starter-default@0.1.0 storybook: `start-storybook -p 6006`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the gatsby-starter-default@0.1.0 storybook script.
    npm ERR! This is probably not a problem with npm. There is likely additional log
    ging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\omara\AppData\Roaming\npm-cache\_logs\2021-05-10T16_17_17_
    669Z-debug.log
omar-shahid commented 3 years ago

Looks like the problem is with npm, when I recreated the gatsby site and initialize the storybook with yarn, it works absolutely fine.

ctorgalson commented 3 years ago

I am trying to integrate the storybook with the Gatsby JS project. But every time I start storybook using npm run storybook, it gives me this error.

I see this error too.

Looks like the problem is with npm, when I recreated the gatsby site and initialize the storybook with yarn, it works absolutely fine.

I do not see this--running with yarn results in the same error.

3af commented 3 years ago

To me it helped to follow https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrading-from-webpack-4.

Re-post:

Upgrading from Webpack 4

If you're upgrading an existing Storybook installation:

npx sb@next upgrade --prerelease

Then add dependencies:

npm i -D @storybook/builder-webpack5@next @storybook/manager-webpack5@next

Then update your .storybook/main.js:

module.exports = { core: { builder: "webpack5", }, };

Upgrading from 6.2 Webpack 5

If you were using Webpack 5 in 6.2, and have upgraded to 6.3, you probably need to add @storybook/manager-webpack5 as a dependency:

npm i -D @storybook/manager-webpack5@next

lstrive-yn commented 3 years ago

To me it helped to follow https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrading-from-webpack-4.

Re-post:

Upgrading from Webpack 4 If you're upgrading an existing Storybook installation: npx sb@next upgrade --prerelease Then add dependencies: npm i -D @storybook/builder-webpack5@next @storybook/manager-webpack5@next Then update your .storybook/main.js: module.exports = { core: { builder: "webpack5", }, }; Upgrading from 6.2 Webpack 5 If you were using Webpack 5 in 6.2, and have upgraded to 6.3, you probably need to add @storybook/manager-webpack5 as a dependency: npm i -D @storybook/manager-webpack5@next

it's not work for me...

shilman commented 1 year ago

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if: