Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Storybook 6.2 : TypeError: Cannot convert undefined or null to object #14631

Closed
patou opened this issue Apr 16, 2021 · 24 comments
Closed

Comments

@patou
Copy link

patou commented Apr 16, 2021

Describe the bug
I try migrate my angular application to storybook 6.2 from 6.1.
Stories component not display, we have instead a black background with a red border (screenshot below) and we have a javscript error : TypeError: Cannot convert undefined or null to object

Javascript Error

vendors~main.iframe.bundle.js:144634 TypeError: Cannot convert undefined or null to object
    at getPrototypeOf (<anonymous>)
    at r.parse (vendors~main.iframe.bundle.js:207406)
    at Object.t.parse (vendors~main.iframe.bundle.js:207430)
    at Mn (vendors~main.iframe.bundle.js:207472)
    at Un (vendors~main.iframe.bundle.js:207661)
    at Object.parse (vendors~main.iframe.bundle.js:207707)
    at Object.parse (vendors~main.iframe.bundle.js:207776)
    at ts (vendors~main.iframe.bundle.js:207776)
    at us (vendors~main.iframe.bundle.js:207776)
    at vendors~main.iframe.bundle.js:207806

Screenshots
image

Test
Remove storybook from the project, and add a new storybook with : npx sb init

If I create a new angular lib, and init storybook, it's works, but not with my project.

System

Environment Info:

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz
  Binaries:
    Node: 12.11.1 - C:\PBapps\ctlm-myeclipse\nvm-1.1.7\nodejs\node.EXE
    npm: 6.13.6 - C:\PBapps\ctlm-myeclipse\nvm-1.1.7\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    @storybook/addon-actions: ^6.2.8 => 6.2.8
    @storybook/addon-essentials: ^6.2.8 => 6.2.8
    @storybook/addon-links: ^6.2.8 => 6.2.8
    @storybook/angular: ^6.2.8 => 6.2.8

C:\PBapps\ctlm-myeclipse\nvm-1.1.7\v12.11.1\node_modules\npm\node_modules\rimraf\rimraf.js:313
        throw er
        ^

Error: ENOTEMPTY: directory not empty, rmdir 'c:\Temp\npm-cache\_npx\20104\node_modules\sb\node_modules\rxjs\src\internal'
    at Object.rmdirSync (fs.js:763:3)
    at rmkidsSync (C:\PBapps\ctlm-myeclipse\nvm-1.1.7\v12.11.1\node_modules\npm\node_modules\rimraf\rimraf.js:356:25)
    at rmdirSync (C:\PBapps\ctlm-myeclipse\nvm-1.1.7\v12.11.1\node_modules\npm\node_modules\rimraf\rimraf.js:334:7)
    at rimrafSync (C:\PBapps\ctlm-myeclipse\nvm-1.1.7\v12.11.1\node_modules\npm\node_modules\rimraf\rimraf.js:304:9)
    at C:\PBapps\ctlm-myeclipse\nvm-1.1.7\v12.11.1\node_modules\npm\node_modules\rimraf\rimraf.js:342:5
    at Array.forEach (<anonymous>)
    at rmkidsSync (C:\PBapps\ctlm-myeclipse\nvm-1.1.7\v12.11.1\node_modules\npm\node_modules\rimraf\rimraf.js:341:26)
    at rmdirSync (C:\PBapps\ctlm-myeclipse\nvm-1.1.7\v12.11.1\node_modules\npm\node_modules\rimraf\rimraf.js:334:7)
    at rimrafSync (C:\PBapps\ctlm-myeclipse\nvm-1.1.7\v12.11.1\node_modules\npm\node_modules\rimraf\rimraf.js:304:9)
    at C:\PBapps\ctlm-myeclipse\nvm-1.1.7\v12.11.1\node_modules\npm\node_modules\rimraf\rimraf.js:342:5 {
  errno: -4051,
  syscall: 'rmdir',
  code: 'ENOTEMPTY',
  path: 'c:\\Temp\\npm-cache\\_npx\\20104\\node_modules\\sb\\node_modules\\rxjs\\src\\internal'
}
@shilman
Copy link
Member

shilman commented Apr 16, 2021

Did you try removing node_modules and/or lockfiles and reinstalling?

@patou
Copy link
Author

patou commented Apr 17, 2021

Did you try removing node_modules and/or lockfiles and reinstalling?

Yes, I remove all many time and reinstalling.

@shilman
Copy link
Member

shilman commented Apr 17, 2021

Try running with --no-manager-cache.

@dee103
Copy link

dee103 commented Apr 18, 2021

I get a similar error after installing Storybook for the first time - into an existing Angular project:

image

Screenshot:
image

I have tried the suggestions above with no luck.

@certainlyakey
Copy link

certainlyakey commented Apr 21, 2021

Same here. In my case, removing both @addon-docs and @whitespace/storybook-addon-html helped.

@JeanMeche
Copy link

Per #14262, removing prettier from the regex in node_modules\@storybook\core-common\dist\cjs\utils\es6Transpiler.js, solves the problem.

But that's not an acceptable workaround for me.

@igodorogea
Copy link

As @certainlyakey wrote - removing @storybook/addon-docs solves this issue.

@JeanMeche
Copy link

Ok to me, it meant removing @storybook/addon-essentials which imports addon-docs

@patou
Copy link
Author

patou commented Apr 22, 2021

I resolve the issus, but I not know how.
I clear cache of node, remove node module, add --no-manager-cache, add @babel/plugin-proposal-class-properties dependencies, ...

Now, I have this error :
Type UserAccountComponent is part of the declarations of 2 modules:

It's display the component one time, and the second view there are an error.

@certainlyakey
Copy link

certainlyakey commented Apr 22, 2021

Per #14262, removing prettier from the regex in node_modules\@storybook\core-common\dist\cjs\utils\es6Transpiler.js, solves the problem.

But that's not an acceptable workaround for me.

For me it's acceptable, at least until an official fix is out. I've managed to resolve the issue with both @storybook/addon-docs and @whitespace/storybook-addon-html by removing this |prettier string from @storybook/core-common and applying a patch with patch-package.

@daan93
Copy link

daan93 commented Apr 23, 2021

I solved this following these steps:

  1. Update @babel, @angular and all other packages
  2. Add @babel/plugin-proposal-class-properties": "^7.13.0", "@babel/plugin-proposal-object-rest-spread": "^7.13.8", "@babel/preset-env": "^7.13.15", and "@babel/preset-typescript": "^7.13.0",
  3. Remove node_modules
  4. Remove package-lock.json
  5. Run npm install

Removing the |prettifier from the regex in node_modules worked too, but I didn't want to go through writing a fix in main.js.

However now I have a different error for stories using ngmodel, like #14643

@JeanMeche
Copy link

JeanMeche commented Apr 23, 2021

I went with the workaround with patch-package suggested by @certainlyakey !
Really simple solution 👍

@trytuna
Copy link

trytuna commented Apr 26, 2021

I solved it by disabling the docs addon with still benefiting from @storybook/addon-essentials. Just adjust your main.js file like follows:

{
  // ...
  "addons": [
    "@storybook/addon-links",
    {
      name: '@storybook/addon-essentials',
      options: {
        docs: false,
      }
    }
  ]
}

Of cause this only helps if you are not using the docs addon anyways.

@catrope
Copy link

catrope commented Apr 27, 2021

Upgrading to Storybook v6.2.9 fixed this issue for me, since it pulls in a recent enough version of Babel where the underlying bug is fixed.

@ThibaudAV
Copy link
Contributor

yes its a pb with Babel i think

already fixed here
#14262 (comment)
or #14197

@JeanMeche
Copy link

2.6.9 fixed noting for me.

addons-docs still pulls @babel/core 7.12.10
I was fixed in 7.12.13 per #14262 (comment)

@kroeder
Copy link
Member

kroeder commented Apr 28, 2021

I updated @babel/core to the latest version as well as babel-loader and removed my package-lock.json as well as removed all node_modules

Reinstalling everything worked for me

@de-don
Copy link

de-don commented Apr 29, 2021

The same issue, #14631 (comment) works for me.

@alexiadorneles
Copy link

I'm facing the same issue after upgrading storybook. #14631 (comment) solved for me but it is not something I can adopt in my project, can't tell every developer to install and then directly changes the node_modules every time we install things again.

Tried #14631 (comment) approach but unfortunately it did not work for me.

Also tried to use prerelease mentioned on #14752 (comment) and it didn't work.

Looking forward to a bugfix of this issue so I can safely upgrade it to the new version.

@pertrai1
Copy link

@kyro38 what was the patch-package command you ran to patch this change?

@rickhopkins
Copy link

Is this being worked on by chance? I am running into this when upgrading our storybook to 6.3.4. Hacking the node_modules file /node_modules/@storybook/core-common/dist/cjs/utils/es6Transpiler.js like was suggested above works to fix, but that's a pretty sucky hack.

@kaaku
Copy link

kaaku commented Sep 30, 2021

FWIW, simply upgrading @babel/core and babel-loader (to latest) wasn't enough for me, since yarn.lock still contained multiple versions of said packages (and e.g. many babel plugins), which caused the problem to persist. Deleting the lockfile would've been a bit too radical for our project, but removing the duplicate babel packages was enough to fix the problem. I used yarn-deduplicate like this:

npx yarn-deduplicate --scopes '@babel'
npx yarn-deduplicate --packages 'babel-loader'

So this wasn't really a problem in Storybook, but simply poorly managed dependencies.

@adimit
Copy link

adimit commented Apr 26, 2022

Here's a minimal config that gets me this error. Removing prettier from es6Transpile as stated earlier does not solve it. I'm using this config to start a new repository from scratch, so no re-installation or anything nor are there any interactions (ha) between storybook addons, as I'm not using any beyond @storybook/addons-interaction; this is a clean reproduction on my system (yarn 1.22.5, node v16.14.2)

(For convenience, I've created a repository. Feel free to check it out.)

package.json:

{
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@storybook/addon-interactions": "^6.3.12",
    "@storybook/react": "6.3.12",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "react-scripts": "^4.0.3",
    "typescript": "4.6.3"
  }
}

.storybook/main.js

module.exports = {
  stories: ["../src/*.stories.tsx"],
  addons: ["@storybook/addon-interactions"],
};

And a couple of test files:

src/Test.tsx

import * as React from "react";

export const Component: React.FC = () => {
  return <span>I am a test</span>;
};

src/Test.stories.tsx

import * as React from "react";
import { Component } from "./Test";

export default {
  title: "test",
  component: Component,
};

export const Test = () => <Component />;

The precise error message is this:

addActionsFromArgTypes@http://localhost:9001/vendors~main.iframe.bundle.js:97:17
./node_modules/@storybook/client-api/dist/esm/story_store.js/addStory/initialArgs<@http://localhost:9001/vendors~main.iframe.bundle.js:4755:51
addStory@http://localhost:9001/vendors~main.iframe.bundle.js:4754:45
./node_modules/@storybook/client-api/dist/esm/client_api.js/ClientApi/this.storiesOf/api.add@http://localhost:9001/vendors~main.iframe.bundle.js:3081:27
./node_modules/@storybook/core-client/dist/esm/preview/loadCsf.js/loadStories/</</<@http://localhost:9001/vendors~main.iframe.bundle.js:6125:16
./node_modules/@storybook/core-client/dist/esm/preview/loadCsf.js/loadStories/</<@http://localhost:9001/vendors~main.iframe.bundle.js:6118:20
./node_modules/@storybook/core-client/dist/esm/preview/loadCsf.js/loadStories/<@http://localhost:9001/vendors~main.iframe.bundle.js:6048:11
./node_modules/@storybook/client-api/dist/esm/config_api.js/ConfigApi/this.configure@http://localhost:9001/vendors~main.iframe.bundle.js:3197:7
./node_modules/@storybook/core-client/dist/esm/preview/loadCsf.js/loadCsf/<@http://localhost:9001/vendors~main.iframe.bundle.js:6179:17
configure@http://localhost:9001/vendors~main.iframe.bundle.js:8259:24
./.storybook/generated-stories-entry.js/<@http://localhost:9001/main.iframe.bundle.js:18:36
./.storybook/generated-stories-entry.js@http://localhost:9001/main.iframe.bundle.js:19:30
__webpack_require__@http://localhost:9001/runtime~main.iframe.bundle.js:849:30
fn@http://localhost:9001/runtime~main.iframe.bundle.js:151:20
0@http://localhost:9001/main.iframe.bundle.js:327:20
__webpack_require__@http://localhost:9001/runtime~main.iframe.bundle.js:849:30
checkDeferredModules@http://localhost:9001/runtime~main.iframe.bundle.js:46:23
webpackJsonpCallback@http://localhost:9001/runtime~main.iframe.bundle.js:33:19
@http://localhost:9001/main.iframe.bundle.js:1:57

Updating @storybook/react to its newest version 6.4.22 fixes this. However, we're stuck on react-scripts 4.x and couldn't get storybook 6.4.x to run.

@shilman
Copy link
Member

shilman commented Jun 8, 2023

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:

@shilman shilman closed this as not planned Won't fix, can't repro, duplicate, stale Jun 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests