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.65k stars 9.32k forks source link

5.0.0-rc4 - cannot read property 'secondary' of undefined #5706

Closed jdelStrother closed 5 years ago

jdelStrother commented 5 years ago

Describe the bug In 5.0.0-rc4, the storybook UI fails to load, throwing cannot read property 'secondary' of undefined, while trying to read theme.color.secondary in node_modules/@storybook/ui/dist/components/layout/draggers.js. The provided theme object is empty. I'm seeing this even if I wipe out my custom webpack config and use the default storybook config, with no addons. If I downgrade to rc3, the problem goes away.

Screenshots

image

System:

shilman commented 5 years ago

@jdelStrother Are you using a theme, or just the default?

jdelStrother commented 5 years ago

Just the default. I'm not customizing storybook with addParameters or addOptions anywhere.

shilman commented 5 years ago

@jdelStrother Ok just reproduced in a different test project. Try removing yarn.lock and node_modules and reinstalling. We've been seeing a lot of yarn issues lately and I suspect this is one. Please let me know if that works. It's not a very satisfying solution, but at least it will help us get closer to understanding what's going on.

jdelStrother commented 5 years ago

Trashing node_modules/yarn.lock doesn't seem to help (although while trying to produce a minimal test case for this, I'm pretty sure I was running into some weirdness where I'd have to trash them before my test case would reliably pass/fail)

Are you able to reproduce with this? For me, if I remove @storybook/addon-actions from package.json and re-run yarn, storybook starts working again.

storybook-missing-theme.zip

shilman commented 5 years ago

Weird. I couldn't repro in my standard CRA test project, repro'd in a gatsby test project but then fixed the problem by cleaning and reinstalling. Now I'm able to repro in your test project. Will dig in tomorrow AM and see whether I can get to the bottom of this -- thanks for the juicy bug!! 🙇

shilman commented 5 years ago

Ok it's a yarn hoisting issue. There are two copies of @storybook/theming installed, so this is a known issue after all:

MMBP:storybook-missing-theme shilman$ npm ls @storybook/theming
storybook-missing-theme@1.0.0 /Users/shilman/projects/storybook/testing/storybook-missing-theme
├─┬ @storybook/addon-actions@5.0.0-rc.4
│ ├─┬ @storybook/components@5.0.0-rc.4
│ │ ├─┬ @storybook/router@5.0.0-rc.4
│ │ │ └── @storybook/theming@5.0.0-rc.4  deduped
│ │ └── @storybook/theming@5.0.0-rc.4  deduped
│ └── @storybook/theming@5.0.0-rc.4
└─┬ @storybook/react@5.0.0-rc.4
  ├─┬ @storybook/core@5.0.0-rc.4
  │ ├─┬ @storybook/router@5.0.0-rc.4
  │ │ └── @storybook/theming@5.0.0-rc.4  deduped
  │ ├── @storybook/theming@5.0.0-rc.4  deduped
  │ └─┬ @storybook/ui@5.0.0-rc.4
  │   ├─┬ @storybook/components@5.0.0-rc.4
  │   │ └── @storybook/theming@5.0.0-rc.4  deduped
  │   └── @storybook/theming@5.0.0-rc.4  deduped
  └── @storybook/theming@5.0.0-rc.4

Note that it works fine if I install with NPM 😭

Not sure why that's happening or what to do about it. @ndelangen @tmeasday can you shed any light on this?

jdelStrother commented 5 years ago

Ahh, gotcha. FWIW, I can work around the issue by adding an explicit dependency for @storybook/theming in my package.json

brotzky commented 5 years ago

Ran into the same issue.

I can confirm that deleting yarn.lock and adding @storybook/theming with a fresh install of node_modules worked to solve this.

Thanks for the help @shilman and bringing up the issue @jdelStrother.

tmeasday commented 5 years ago

Hmm I think https://github.com/storybooks/storybook/pull/5679 was supposed to solve this even if there are two copies in your node_modules. @shilman do you have a reproduction? If #5679 isn't solving the problem we need to re-evaluate

shilman commented 5 years ago

@tmeasday the repro is attached here: https://github.com/storybooks/storybook/issues/5706#issuecomment-466059375

tmeasday commented 5 years ago

I don't get it. Here's the webpack config it is using:

{ name: 'manager',
  mode: 'development',
  bail: false,
  devtool: 'none',
  entry:
   [ '/private/tmp/storybook-missing-theme/node_modules/@storybook/core/dist/server/common/polyfills.js',
     '/private/tmp/storybook-missing-theme/node_modules/@storybook/core/dist/client/manager/index.js' ],
  output:
   { path: '/private/tmp/storybook-missing-theme/node_modules/@storybook/core/dist/public',
     filename: '[name].[chunkhash].bundle.js',
     publicPath: '' },
  cache: {},
  plugins:
   [ DllReferencePlugin { options: [Object] },
     HtmlWebpackPlugin {
       options: [Object],
       childCompilerHash: undefined,
       childCompilationOutputName: undefined,
       assetJson: undefined,
       hash: undefined,
       version: 4 },
     DefinePlugin { definitions: [Object] },
     CaseSensitivePathsPlugin { options: {}, pathCache: {}, fsOperations: 0, primed: false },
     DefinePlugin { definitions: {} } ],
  module: { rules: [ [Object], [Object] ] },
  resolve:
   { extensions: [ '.mjs', '.js', '.jsx', '.json' ],
     modules: [ 'node_modules' ],
     alias:
      { 'core-js': '/private/tmp/storybook-missing-theme/node_modules/core-js',
        '@storybook/router': '/private/tmp/storybook-missing-theme/node_modules/@storybook/router',
        '@storybook/theming': '/private/tmp/storybook-missing-theme/node_modules/@storybook/theming',
        '@storybook/channels': '/private/tmp/storybook-missing-theme/node_modules/@storybook/channels',
        '@storybook/client-api': '/private/tmp/storybook-missing-theme/node_modules/@storybook/client-api',
        '@storybook/core': '/private/tmp/storybook-missing-theme/node_modules/@storybook/core',
        '@storybook/ui': '/private/tmp/storybook-missing-theme/node_modules/@storybook/ui',
        react: '/private/tmp/storybook-missing-theme/node_modules/@storybook/ui/node_modules/react',
        'react-dom': '/private/tmp/storybook-missing-theme/node_modules/@storybook/ui/node_modules/react-dom' } },
  recordsPath: '/private/tmp/storybook-missing-theme/node_modules/.cache/storybook/records.json',
  optimization: { splitChunks: { chunks: 'all' }, runtimeChunk: true } }

Might have to pass this one over to @ndelangen

ndelangen commented 5 years ago

I'm on it

ndelangen commented 5 years ago

UPDATE: I found something, it's related to the version of react, upgrading and syncing it to the version of react used by storybook seems to make yarn install in a de-duped way.....

screenshot 2019-02-22 at 12 29 19

@jdelStrother I'm using your reproduction zip, so possibly this info will unblock you.

still working on finding an actual solution.

ndelangen commented 5 years ago

Analysing the stats, I'm NOT finding duplicated theming or packages 😕

screenshot 2019-02-22 at 12 49 41

I do find ui to ship nested node_modules, but nothing duplicated it seems?

screenshot 2019-02-22 at 12 52 10
ndelangen commented 5 years ago

Emotion seems fragtured?

screenshot 2019-02-22 at 12 54 57
ndelangen commented 5 years ago

By doing some fancy testing I got to a solution that seemed to work!

ndelangen commented 5 years ago

emotion packages are now longer duplicated in @storyboom/theming

screenshot 2019-02-22 at 14 47 35
ndelangen commented 5 years ago

Also no nested node_modules in ui:

screenshot 2019-02-22 at 14 51 38
ndelangen commented 5 years ago

Should be fixed by https://github.com/storybooks/storybook/pull/5722

shilman commented 5 years ago

Yee-haw!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.0-rc.5 containing PR #5722 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

shilman commented 5 years ago

@ndelangen I'm getting this error when running rc.5 against the example above:

WARN FATAL broken build!, will close the process,
WARN Fix the error below and restart storybook.

EntryModuleNotFoundError: Entry module not found: Error: Can't resolve './src' in '/Users/shilman/projects/storybook/testing/storybook-missing-theme'
    at moduleFactory.create (/Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/webpack/lib/Compilation.js:980:31)
    at factory (/Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/neo-async/async.js:2825:7
    at /Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/neo-async/async.js:6886:13
    at normalResolver.resolve (/Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at resolver.doResolve (/Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (/Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (/Users/shilman/projects/storybook/testing/storybook-missing-theme/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
resolve './src' in '/Users/shilman/projects/storybook/testing/storybook-missing-theme'
  using description file: /Users/shilman/projects/storybook/testing/storybook-missing-theme/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/shilman/projects/storybook/testing/storybook-missing-theme/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/shilman/projects/storybook/testing/storybook-missing-theme/src is not a file
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/shilman/projects/storybook/testing/storybook-missing-theme/src.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /Users/shilman/projects/storybook/testing/storybook-missing-theme/src.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/shilman/projects/storybook/testing/storybook-missing-theme/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/shilman/projects/storybook/testing/storybook-missing-theme/src.json doesn't exist
      as directory
        existing directory
          using path: /Users/shilman/projects/storybook/testing/storybook-missing-theme/src/index
            using description file: /Users/shilman/projects/storybook/testing/storybook-missing-theme/package.json (relative path: ./src/index)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                /Users/shilman/projects/storybook/testing/storybook-missing-theme/src/index doesn't exist
              .wasm
                Field 'browser' doesn't contain a valid alias configuration
                /Users/shilman/projects/storybook/testing/storybook-missing-theme/src/index.wasm doesn't exist
              .mjs
                Field 'browser' doesn't contain a valid alias configuration
                /Users/shilman/projects/storybook/testing/storybook-missing-theme/src/index.mjs doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                /Users/shilman/projects/storybook/testing/storybook-missing-theme/src/index.js doesn't exist
              .json
                Field 'browser' doesn't contain a valid alias configuration
                /Users/shilman/projects/storybook/testing/storybook-missing-theme/src/index.json doesn't exist
error Command failed with exit code 1.
ndelangen commented 5 years ago

I cannot reproduce that @shilman

I open the zip, upgraded to rc.5, ran yarn, ran yarn stories.

Result: Functioning storybook

ndelangen commented 5 years ago
screenshot 2019-02-23 at 11 51 49
shilman commented 5 years ago

@ndelangen weird, it was consistent for me! Well let's call it solved and come back to it if other people run into the problem

jdelStrother commented 5 years ago

@shilman I'm seeing the same problem in my main app, but not in that demo project 😕

shilman commented 5 years ago

@jdelStrother Does your main app work if you remove node_modules and recreate your lockfile, or install using npm? Sorry this is such a pain -- really not sure what's going on here.

jdelStrother commented 5 years ago

Urgh... so, first time through, I ran npx npm-check-updates '/storybook/' -un; yarn, ran yarn run start-storybook, and then hit the error seen here

I deleted node_modules, re-ran yarn, and hit the same error.

I've just gone back to it, running npx npm-check-updates '/storybook/' -un; yarn from the same commit that I was doing so previously, and can no longer reproduce the error 😦

shilman commented 5 years ago

@jdelStrother Ugh ... that sounds pretty nasty. Gonna close this now but I suspect it's not the end of the story for this one... 😦

ndelangen commented 5 years ago

@jdelStrother contact me directly on our discord if the issue persists, so maybe we can debug together.

erikthedeveloper commented 5 years ago

For anyone running into the EntryModuleNotFoundError (I landed here while Googling / troubleshooting) I want to point out that it sounds like this is specific to yarn and that @jdelStrother's recommendation fixed it for me:

Ahh, gotcha. FWIW, I can work around the issue by adding an explicit dependency for @storybook/theming in my package.json

📝 I'm also not using any custom theming. I did try blowing away node_modules and even yarn.lock. Still had the same issue with 5.0.0. yarn add -D @storybook/theming did the trick.

FWIW here is my entire diff (minus lock file) for upgrading a project from 4.x -> 5.0.0 just now. Thank you to all who were involved in this effort! Seriously great work 😃

diff --git a/package.json b/package.json
index 0c5553602..316257f68 100644
--- a/package.json
+++ b/package.json
@@ -58,11 +58,12 @@
     "@babel/preset-env": "7.3.4",
     "@babel/preset-react": "7.0.0",
     "@babel/register": "7.0.0",
-    "@storybook/addon-actions": "4.1.13",
-    "@storybook/addon-knobs": "4.1.13",
-    "@storybook/addon-links": "4.1.13",
-    "@storybook/addons": "4.1.13",
-    "@storybook/react": "4.1.13",
+    "@storybook/addon-actions": "5.0.0",
+    "@storybook/addon-knobs": "5.0.0",
+    "@storybook/addon-links": "5.0.0",
+    "@storybook/addons": "5.0.0",
+    "@storybook/react": "5.0.0",
+    "@storybook/theming": "5.0.0",
     "babel-eslint": "10.0.1",
     "babel-loader": "8.0.5",
     "babel-plugin-syntax-async-functions": "6.13.0",
forrestblade commented 5 years ago

I cannot resolve these errors. 

vendors~main.51373e64048002224644.bundle.js:30622 Uncaught TypeError: Cannot read property 'Consumer' of undefined
    at ThemeProvider (vendors~main.51373e64048002224644.bundle.js:30622)
    at renderWithHooks (vendors~main.51373e64048002224644.bundle.js:80002)
    at mountIndeterminateComponent (vendors~main.51373e64048002224644.bundle.js:82084)
    at beginWork (vendors~main.51373e64048002224644.bundle.js:82689)
    at performUnitOfWork (vendors~main.51373e64048002224644.bundle.js:86376)
    at workLoop (vendors~main.51373e64048002224644.bundle.js:86416)
    at HTMLUnknownElement.callCallback (vendors~main.51373e64048002224644.bundle.js:67213)
    at Object.invokeGuardedCallbackDev (vendors~main.51373e64048002224644.bundle.js:67263)
    at invokeGuardedCallback (vendors~main.51373e64048002224644.bundle.js:67320)
    at replayUnitOfWork (vendors~main.51373e64048002224644.bundle.js:85642)
vendors~main.51373e64048002224644.bundle.js:84181 The above error occurred in the <ThemeProvider> component:
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
logCapturedError @ vendors~main.51373e64048002224644.bundle.js:84181
vendors~main.51373e64048002224644.bundle.js:3086 Uncaught TypeError: Cannot read property 'Consumer' of undefined
    at ThemeProvider (vendors~main.51373e64048002224644.bundle.js:30622)
    at renderWithHooks (vendors~main.51373e64048002224644.bundle.js:80002)
    at mountIndeterminateComponent (vendors~main.51373e64048002224644.bundle.js:82084)
    at beginWork (vendors~main.51373e64048002224644.bundle.js:82689)
    at performUnitOfWork (vendors~main.51373e64048002224644.bundle.js:86376)
    at workLoop (vendors~main.51373e64048002224644.bundle.js:86416)
    at renderRoot (vendors~main.51373e64048002224644.bundle.js:86499)
    at performWorkOnRoot (vendors~main.51373e64048002224644.bundle.js:87406)
    at performWork (vendors~main.51373e64048002224644.bundle.js:87318)
    at performSyncWork (vendors~main.51373e64048002224644.bundle.js:87292)
vendors~main.51373e64048002224644.bundle.js:84181 The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ vendors~main.51373e64048002224644.bundle.js:84181
vendors~main.51373e64048002224644.bundle.js:87376 Uncaught TypeError: Cannot read property 'Consumer' of undefined
    at ThemeProvider (vendors~main.51373e64048002224644.bundle.js:30622)
    at renderWithHooks (vendors~main.51373e64048002224644.bundle.js:80002)
    at mountIndeterminateComponent (vendors~main.51373e64048002224644.bundle.js:82084)
    at beginWork (vendors~main.51373e64048002224644.bundle.js:82689)
    at performUnitOfWork (vendors~main.51373e64048002224644.bundle.js:86376)
    at workLoop (vendors~main.51373e64048002224644.bundle.js:86416)
    at renderRoot (vendors~main.51373e64048002224644.bundle.js:86499)
    at performWorkOnRoot (vendors~main.51373e64048002224644.bundle.js:87406)
    at performWork (vendors~main.51373e64048002224644.bundle.js:87318)
    at performSyncWork (vendors~main.51373e64048002224644.bundle.js:87292)

code

I have tried multiple times deleting my node_modules and yarn.lock I am working with a monorepository so I don't know if that would make a difference

danyelf commented 4 years ago

Strange as it is to say, I'm coming in a full year later for upgrading to v6 (!) and seeing the same sorts of errors. Any ways that I can deliver diagnostics against our weird little codebase?

image

jdelStrother commented 4 years ago

Strange as it is to say, I'm coming in a full year later for upgrading to v6 (!) and seeing the same sorts of errors. Any ways that I can deliver diagnostics against our weird little codebase?

image

If you add @storybook/theming to your package.json does that fix anything?

RamonGebben commented 4 years ago

@jdelStrother I'm having the same issue as @danyelf while trying to configure Storybook 6.0.12 using npx sb init inside a new Gatsby project. I did try adding @storybook/theming but that did not help. Because I'm using yarn I checked for duplicate packages which is also not the case.

npm ls @storybook/theming                                                                  (6s 383ms) │
@******/******@0.1.0 /Users/ramon/******/******/website
├─┬ @storybook/addon-a11y@6.0.12
│ ├─┬ @storybook/api@6.0.12
│ │ └── @storybook/theming@6.0.12  deduped
│ ├─┬ @storybook/components@6.0.12
│ │ └── @storybook/theming@6.0.12  deduped
│ └── @storybook/theming@6.0.12  deduped
├─┬ @storybook/addon-actions@6.0.12
│ └── @storybook/theming@6.0.12  deduped
├─┬ @storybook/addon-backgrounds@6.0.12
│ └── @storybook/theming@6.0.12  deduped
├─┬ @storybook/addon-knobs@6.0.12
│ └── @storybook/theming@6.0.12  deduped
├─┬ @storybook/addon-viewport@6.0.12
│ └── @storybook/theming@6.0.12  deduped
├─┬ @storybook/addons@6.0.12
│ └── @storybook/theming@6.0.12  deduped
├─┬ @storybook/react@6.0.12
│ └─┬ @storybook/core@6.0.12
│   ├── @storybook/theming@6.0.12  deduped
│   └─┬ @storybook/ui@6.0.12
│     └── @storybook/theming@6.0.12  deduped
└── @storybook/theming@6.0.12

I had some hopes for @ndelangen's comments about duplicate React version but that is also not the case.

npm ls react                                                                                   (5s 951ms)
@******/******@0.1.0 /Users/ramon/******/******/website
├─┬ @storybook/addon-a11y@6.0.12
│ ├─┬ @storybook/api@6.0.12
│ │ └── react@16.13.1  deduped
│ └─┬ @storybook/components@6.0.12
│   └── react@16.13.1  deduped
├─┬ @storybook/addon-actions@6.0.12
│ └── react@16.13.1  deduped
├─┬ @storybook/addon-backgrounds@6.0.12
│ └── react@16.13.1  deduped
├─┬ @storybook/react@6.0.12
│ └─┬ @storybook/core@6.0.12
│   └─┬ @storybook/ui@6.0.12
│     └── react@16.13.1  deduped
├─┬ gatsby@2.23.0
│ └─┬ gatsby-cli@2.12.87
│   └── react@16.13.1  deduped
└── react@16.13.1
danyelf commented 4 years ago

Sadly, storybook/theming is already in my package.json

> npm ls @storybook/theming
poodle@0.0.1 /home/danyel/go/src/github.com/honeycombio/hound/cmd/poodle
├─┬ @storybook/addon-actions@6.0.12
│ ├─┬ @storybook/addons@6.0.12
│ │ └── @storybook/theming@6.0.12  deduped
│ ├─┬ @storybook/api@6.0.12
│ │ └── @storybook/theming@6.0.12  deduped
│ ├─┬ @storybook/components@6.0.12
│ │ └── @storybook/theming@6.0.12  deduped
│ └── @storybook/theming@6.0.12  deduped
├─┬ @storybook/addon-docs@6.0.12
│ ├─┬ @storybook/core@6.0.12
│ │ ├── @storybook/theming@6.0.12  deduped
│ │ └─┬ @storybook/ui@6.0.12
│ │   └── @storybook/theming@6.0.12  deduped
│ └── @storybook/theming@6.0.12  deduped
├─┬ @storybook/addon-storysource@6.0.12
│ └── @storybook/theming@6.0.12  deduped
└── @storybook/theming@6.0.12

> npm ls react
poodle@0.0.1 /home/danyel/go/src/github.com/honeycombio/hound/cmd/poodle
├─┬ @storybook/addon-actions@6.0.12
│ ├─┬ @storybook/api@6.0.12
│ │ └── react@16.13.1  deduped
│ ├─┬ @storybook/components@6.0.12
│ │ └── react@16.13.1  deduped
│ └── react@16.13.1  deduped
├─┬ @storybook/addon-docs@6.0.12
│ └─┬ @storybook/core@6.0.12
│   └─┬ @storybook/ui@6.0.12
│     └── react@16.13.1  deduped
├─┬ @storybook/addon-storysource@6.0.12
│ └── react@16.13.1  deduped
└── react@16.13.1

Anything else I can check on?

shilman commented 4 years ago

hey @danyelf, long time!!! 👋

do you have a repro repo we could look at?

danyelf commented 4 years ago

Ouch. Not really -- it's our core prod, and we're a monorepo. I could possibly try to split off pieces. Or share our yarn.lock or something.

Also, hey @shilman ! I'd meant to send you a wave at some point -- storybook is awesome, and I'm so glad you're making it happen!

shilman commented 4 years ago

Thanks, it's been a ton of fun! 🙏

I'm certain that the issue is due to some kind of conflict, either react or emotion. With a repro we might be able to fiddle with it and see what kind of webpack resolutions voodoo we might need to do to get it fixed. But honestly this stuff is really confusing and I'm not even sure a repro would help -- more likely you'd get it figured out yourself trying to disentangle from the monorepo... Wish I had a magic bullet for this!

danyelf commented 4 years ago

That indeed did it. A little updating of dependencies seemed to clear it up. Thanks!

GriffinSauce commented 4 years ago

Hi @danyelf do you have any pointers which dep (or deps) might have been the culprit? Having the same issue in our monorepo, set up with Lerna and eh ... not having a fun time :(

EDIT: just realised I was only nuking either package-lock OR node_modules, nuking both before reinstalling was the cure.

Considering the amount of issues across multiple versions of SB is it an idea to add this tip to the documentation? Perhaps in a new category "Configuration > Troubleshooting" ?

shilman commented 4 years ago

Great idea @GriffinSauce ! Would you mind contributing a PR for that?

GriffinSauce commented 4 years ago

Of course, I'll give it a shot!

danyelf commented 4 years ago

@GriffinSauce , I didn't follow up because I'm ashamed of my solution.

Following @shilman 's suggestion, I dug around in my dependencies under the assumption that there were inconsistent versions of either emotion or react. I read the yarn.lock file looking for versions of them, and noticed a few cases where it was resolving counterintuitively: emotion ^10.1 would resolve to emotion 10.3, but emotion ^10.2 resolved to emotion 10.2.

I simply removed those from the yarn.lock (Warning: you aren't supposed to hand-edit yarn.lock. It makes the maintainers sad) and then reran yarn.

This maintained most of my various package versions, but got rid of a metric ton of crud. Fewer versions of @emotion/core and @babel/runtime and react-foo floating around.

This didn't break anything, and seemed to work well enough.

rrsai commented 2 years ago

After much debugging of the clash between versions of emotion used in storybook and in app, and for those who come after me, I found that storybook has now provided a feature flag to avoid clashing with later versions of emotion: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility I tested it and it works well to prevent emotion version-out-of-sync problems in storybook, and is a 3 line change.

See the bottom of https://github.com/storybookjs/storybook/issues/13145 for more details

RobineSavert commented 10 months ago

I'm getting the same error with Vue 3 Storybook, whenever I try to add manager.js with a custom theme, this error appears. Cannot theme my Storybook unfortunately..

image

Disorrder commented 8 months ago

I don't use yarn, but deleting node_modules and package-lock.json fixed this issue