cra-preact icon indicating copy to clipboard operation
cra-preact copied to clipboard

Published 20 hours ago • verified publisher icon shilangyu

Support react-scripts v4

Open shilangyu opened this issue 3 years ago • 10 comments

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

shilangyu avatar Oct 25 '20 18:10 shilangyu

@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 avatar Oct 27 '20 01:10 mwskwong

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

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

mwskwong avatar Oct 30 '20 01:10 mwskwong

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

shilangyu avatar Oct 31 '20 09:10 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.

shilangyu avatar Oct 31 '20 11:10 shilangyu

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

mwskwong avatar Nov 13 '20 00:11 mwskwong

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

matthewkwong avatar Nov 13 '20 00:11 matthewkwong

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.

mwskwong avatar Nov 13 '20 03:11 mwskwong

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 avatar Nov 14 '20 09:11 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 avatar Nov 14 '20 12:11 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.

shilangyu avatar Apr 20 '23 07:04 shilangyu