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

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

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'
}

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 4
Comments: 24 (5 by maintainers)

Most upvoted comments

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.

rickhopkins on Jul 16, 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

kroeder on Apr 28, 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.

trytuna on Apr 26, 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.

certainlyakey on Apr 23, 2021

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

certainlyakey on Apr 21, 2021

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

JeanMeche on Apr 22, 2021

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

igodorogea on Apr 22, 2021

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

Screenshot:

I have tried the suggestions above with no luck.

dee103 on Apr 18, 2021

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

shilman on Apr 16, 2021