Support react-scripts v4

[shilangyu]

Maybe it already works and it's only a matter of bumping the peer dependency.

[mwskwong]

@shilangyu TL;DR: No.
The main issue is the new JSX transformation in React 17. If we simply follow the steps provided in the Github description, then the following error will be prompted:

Cannot find module: 'react/jsx-runtime'. Make sure this package is installed.

You can install this package by running: yarn add react/jsx-runtime.

[mwskwong]

Workaround
Set the CRA enviroment variable DISABLE_NEW_JSX_TRANSFORM to true (default false).

Ref: https://create-react-app.dev/docs/advanced-configuration

[shilangyu]

Thank you for investigating @matthewkwong, I will try to push a fix today

[shilangyu]

From what I can observe, preact/compat has already pushed a fix to support react 17 when aliasing. As soon as it gets released I will bump the versions in cra-preact and everything should be working again.

[mwskwong]

Just tried to build my app using the latest preact, it works as expected.

[matthewkwong]

Please do not tag me again on this thread. You have been incorrectly tagging the wrong matthewkwong. Thanks

[mwskwong]

Just tried to build my app using the latest preact, it works as expected.

Well, I was not entirely right. cra-preact build works, but cra-preact start still reports the same error.

BTW matthewkwong (this is not a tag), in case you still seeing this, I think GitHub auto-subscribe this thread for you because you were being mistakenly tagged previously. You may have to unsubscribe manually.

[shilangyu]

Well, I was not entirely right. cra-preact build works, but cra-preact start still reports the same error.

That's because cra-preact start (and cra-preact test) runs in dev mode so it tries to include react/jsx-dev-runtime which again, does not exist on preact side.

Aliasing 'react/jsx-dev-runtime' => 'preact/compat/jsx-runtime' should do the trick, but I want to test some more before I release it, maybe the jsx-dev-runtime has something crucial that is missing in plain jsx-runtime.

[shilangyu]

The alias makes everything compile. However, sadly Fast Refresh does not work. Saving a changed file does not make the webpage reflect the new changes :/ I do not know whether that is a Preact or a fast-refresh limitation. I will have to investigate further.

[shilangyu]

Maintaining new versions of react-scripts is very fragile and susceptible to small changes. I failed to migrate fully to react-scripts v4 and now there is even v5. create-react-app seems to be not recommended anymore, so I am archiving this project and recommending to use Vite with the Preact preset instead.

Of course, one of the appeals of cra-preact was to migrate an existing CRA project to Preact without ejecting. To this, I unfortunately have no good alternative solution. But maintaining cra-preact would just get more and more hacky.