Compatibility issues with Storybook 6

[ghost]

I have a project using Next.js + Preact (based off the using-preact example.

I'm currently trying to set up storybook in the project, when I installed it initially @ version 6.0.10, everything worked hunky dory. But if I try to update my storybook packages to the latest version, the entire storybook application breaks. The console looks something like this:

Invalid hook call
[...]
The above error occurred in the <ManagerConsumer> component

I found an issue in the storybook project, where the error has been discussed and somewhat solved for React users. TL;DR, the problem appears when multiple versions of react are being loaded.

running yarn why react has the following output:

=> Found "[email protected]"
info Has been hoisted to "react"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "244KB"
info Disk size with unique dependencies: "244KB"
info Disk size with transitive dependencies: "244KB"
info Number of shared dependencies: 0
=> Found "@storybook/api#[email protected]"
info This module exists because "@storybook#api" depends on it.
=> Found "@storybook/components#[email protected]"
info This module exists because "@storybook#components" depends on it.
=> Found "@storybook/addon-actions#[email protected]"
info This module exists because "@storybook#addon-essentials#@storybook#addon-actions" depends on it.
=> Found "@storybook/addon-backgrounds#[email protected]"
info This module exists because "@storybook#addon-essentials#@storybook#addon-backgrounds" depends on it.
=> Found "@storybook/addon-a11y#[email protected]"
info Reasons this module exists
   - "@storybook#addon-a11y#@storybook#api" depends on it
   - Hoisted from "@storybook#addon-a11y#@storybook#api#react"
   - Hoisted from "@storybook#addon-a11y#@storybook#components#react"
=> Found "@storybook/ui#[email protected]"
info This module exists because "@storybook#react#@storybook#core#@storybook#ui" depends on it.

So, all my storybook components are using the same version of react. The proposed solution is to set up resolutions in package.json, pinning react and react-dom to specific versions. Setting up resolutions to use preact-compat:

{
  ...
  "resolutions": {
    "@storybook/**/react": "github:preact-compat/react#1.0.0",
    "@storybook/**/react-dom": "github:preact-compat/react-dom#1.0.0"
  }
}

works as expected when installing. yarn why react:

=> Found "[email protected]"
info Has been hoisted to "react"
info Reasons this module exists
   - Specified in "dependencies"
   - Hoisted from "@storybook#addon-essentials#@storybook#addon-actions#react"
   - Hoisted from "@storybook#addon-essentials#@storybook#addon-backgrounds#react"
   - Hoisted from "@storybook#addon-a11y#@storybook#api#react"
   - Hoisted from "@storybook#addon-a11y#@storybook#components#react"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#ui#react"

But this leads to a different error:

Uncaught (in promise) TypeError: Cannot add property __, object is not extensible
[...]
at Object.Z [as render] (vendors~main.e0d87ec3c27ffe59e764.bundle.js:1007)

And here is where I'm stuck. I don't know if the issue is my setup, something in preact-compat or in storybook. Probably the first.

I'm sorry if this comes across as a general question rather than a bug report, but my node skills aren't quite there to try and figure this out further. I'm just dumping whatever I have figured out so maybe someone smarter than me can point me in the right direction.

Am I misunderstanding how to handle the resolutions? Is my package.json breaking something important? (If I don't specify react under dependencies, storybook just uses it's own react dependency.)

Here is a sandbox with a minimal example to reproduce (without resolutions).

[marvinhagemeister]

Moving this issue over to the main preact as it is with the 10.x release line.

[marvinhagemeister]

Just checked and could reproduce the error. It's resolved by removing the npm aliases. They've always been a bit buggy in our experience, so I'd avoid them for now and just rely on webpack aliasing.

Removing the npm aliases resolves the issue 👍

[ghost]

Aha, I was expecting the entire storybook to render through Preact rather than just the inside iframe. Looking at the sources tab of the iframe, I can see that preact is indeed rendering the content rather than react. So if anyone runs into a similar issue, aliasing is indeed not required. The app within the storybook does indeed render through preact without any special configuration needed! 👍

[prbxr]

@vattenapa How do you manage Preact/compat to work with Storybook ?
There is this PR
And I wrote there that even the aliasing didn't help
storybookjs/storybook#12403