Storybook | Fix issue with 8.3.x

[coldlink]

What does this change?

For a while now we haven't been able to update storybook as we've been getting an error when attempting to run storybook after upgrading to 8.3.x

Specifically

=> Failed to build the preview
SB_BUILDER-WEBPACK5_0002 (WebpackInvocationError): Module not found: Error: Package path ./compat/test-utils is not exported from package ./node_modules/preact (see exports field in ./node_modules/preact/package.json)
    at ./node_modules/.pnpm/@storybook+builder-webpack5@8.3.5_@swc+core@1.7.35_esbuild@0.23.1_storybook@8.3.5_typescript@_ymeaola3psc2hasqkzf7bahsja/node_modules/@storybook/builder-webpack5/dist/index.js:1:8870
    at ./node_modules/.pnpm/webpack@5.95.0_@swc+core@1.7.35_esbuild@0.23.1_webpack-cli@5.1.4/node_modules/webpack/lib/HookWebpackError.js:67:2
    at Hook.eval [as callAsync] (eval at create (./node_modules/.pnpm/tapable@2.2.1/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (./node_modules/.pnpm/tapable@2.2.1/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.shutdown (./node_modules/.pnpm/webpack@5.95.0_@swc+core@1.7.35_esbuild@0.23.1_webpack-cli@5.1.4/node_modules/webpack/lib/Cache.js:154:23)
    at ./node_modules/.pnpm/webpack@5.95.0_@swc+core@1.7.35_esbuild@0.23.1_webpack-cli@5.1.4/node_modules/webpack/lib/Compiler.js:1377:15
    ...

Finally investigating this, it seems to be a change with the @storybook/react-webpack5 package. Despite aliasing everything to preact, there must've been a change where it's looking for the test-utils export on the react namespace and not the react/test-utils namespace as aliased.

Preact doesn't export the test-utils on the preact/compat namespace, so storybook failed to build when it couldn't find the export.

Switching to the @storybook/preact-webpack5 seems to help!

[AshCorr]

Nice find 👍

[AshCorr]

Do we possibly want to use the @storybook/preact package here instead aswell?

[coldlink]

I just tried removing @storybook/react dependency, and everything seems to work, so I'll make a PR just to remove it!

[coldlink]

Oh nevermind 😂

[coldlink]

Ah, @storybook/preact doesn't have the correct types, as I think its for pure preact, and not the aliased form we're using, here's what happens if I try to use @storybook/preact.

[coldlink]

So I'll leave it as @storybook/react for now, and if it breaks in the future, we can deal with it then!