Add preact/compat aliases by default

[developit]

What I did

Added aliases for react and react-dom so they point to preact/compat by default when using the preact template.

How to test

• Is this testable with Jest or Chromatic screenshots? no
• Does this need a new example in the kitchen sink apps? no
• Does this need an update to the documentation? no

[shilman]

Hey @developit, thanks for this fix! We're getting some build errors in CI based on these changes. Can you take a look?

ERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve 'react' in '/tmp/storybook/lib/core/dist/client/preview'
(node:152) UnhandledPromiseRejectionWarning: ModuleNotFoundError: Module not found: Error: Can't resolve 'react' in '/tmp/storybook/lib/core/dist/client/preview'

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[prbxr]

What is happening ?
I tried to extend webpack config with the suggested snippet (with the resolve) in storybook locally.
It does not work - the UI stuck, there is error in the console:

TypeError: can't define property "__": Object is not extensiblepreact.module.js:1
    Preact 14
    renderDocs StoryRenderer.js:424
    renderStoryIfChanged StoryRenderer.js:270
    renderCurrentStory StoryRenderer.js:191
    setupListeners StoryRenderer.js:119
    handleEvent index.js:196
    forEach self-hosted:225
    handleEvent index.js:195
    handler index.js:121
    emit index.js:128
    setSelection story_store.js:822
    finishConfiguring story_store.js:440
    configure config_api.js:33
    loadCsf loadCsf.js:326
    configure Preact
    js generated-stories-entry.js:6
    js main.9d2cc1a88bd1a076ca99.bundle.js:18
    Webpack 7

[merceyz]

Suggested change

	react: require.resolve('preact/compat'),
	'react-dom': require.resolve('preact/compat'),
	react: path.dirname(require.resolve('preact/compat/package.json')),
	'react-dom': path.dirname(require.resolve('preact/compat/package.json')),

My bad, needs to get the entry path otherwise node will load from main instead of letting webpack load from module

[prbxr]

same thing
it creates nice path
but the end result is that ui is stuck
It compiles well, shows storybook controls and then stuck with a loader...

[prbxr]

@developit Is this supposed to work?
I have the latest deps installed and it the ui in a loading state with the above error
I am very much willing storybook to work with preact/compat

[prbxr]

@merceyz

[prbxr]

Hey !
It seems to work on storybook@next !

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[KrofDrakula]

@shilman I've reimplemented this branch in #14555 which now also has a Storybook story that exercises the preact/compat library.

[KrofDrakula]

Closing in favour of #14555.