search

shilangyu / cra-preact

Comfort of CRA + preact without ejecting 🔥
MIT License
27 stars 3 forks source link

Support react-scripts v4 #5

Open shilangyu opened 3 years ago

shilangyu commented 3 years ago

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

mwskwong commented 3 years ago

@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 commented 3 years ago

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

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

shilangyu commented 3 years ago

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

shilangyu commented 3 years ago

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 commented 3 years ago

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

matthewkwong commented 3 years ago

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

mwskwong commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 1 year ago

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.