question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

easy to replicate (but weird) bug with aliasing React to Preact

See original GitHub issue

Do you want to request a feature or report a bug?

bug

What is the current behaviour?

1. Suppose I am creating a new project from scratch.

npx preact-cli create default preact-starter cd preact-starter npm i # everything at this point is working 👍

2. Now let’s say I want to use react-redux (or other react libraries) in my project. As per https://preactjs.com/guide/v10/getting-started/ and https://preactjs.com/guide/v10/upgrade-guide#preact-redux, I’ll need to alias react to preact.

3. I therefore add a preact.config.js file (at the root level, aka in the same directory as package.json) and add the following

export default (config, env, helpers) => {
  config.resolve = { 
    "alias": { 
      "react": "preact/compat",
      "react-dom/test-utils": "preact/test-utils",
      "react-dom": "preact/compat",
    },
  }
}
  1. I run npm start, but I get this err msg.
Build failed!

✖ ERROR ../node_modules/preact-cli/lib/lib/entry.js
Module not found: Error: Can't resolve 'preact-cli-entrypoint' in './node_modules/preact-cli/lib/lib'
 @ ../node_modules/preact-cli/lib/lib/entry.js 31:25-57 37:29-61 58:18-66 58:61-65
 @ multi ../node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server
✖ ERROR BabelEsmPlugin: ../node_modules/preact-cli/lib/lib/entry.js
Module not found: Error: Can't resolve 'preact-cli-entrypoint' in './node_modules/preact-cli/lib/lib'
 @ ../node_modules/preact-cli/lib/lib/entry.js 29:25-57 35:29-61 56:18-66 56:61-65
 @ multi ../node_modules/webpack-dev-server/client?http://0.0.0.0:8080 ../node_modules/webpack/hot/dev-server.js ../node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server

For whatever reason preact can’t find the entrypoint, but I don’t know why 😔

What is the expected behaviour? I would expect that I’d be able to alias react to preact by following the docs.

If this is a feature request, what is motivation or use case for changing the behaviour? N/A

Please mention other relevant information. Note: this is a contrived example for a problem where I have a project that is being upgraded from preact 8 to 10, and I had to switch from preact-redux to react-redux. Unfortunately, react-redux is not being recognized, hence the need to alias react to preact (but that is not working)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
matthewfavorliucommented, Nov 7, 2019

@ForsakenHarmony that was the only 1 I noticed. And thanks for the reply. I appreciate very much everything you guys are doing 😃

1reaction
ForsakenHarmonycommented, Nov 7, 2019

@matthewliufavor yeah we decided to remove serve, there’s other packages that can do it equally or better

Is there anything else missing? (other than async components which are the last thing we’re working on)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Switching to Preact (from React)
There are two different approaches to switch from React to Preact: Install the preact-compat alias; Switch your imports to preact and remove incompatible...
Read more >
recogito/annotorious - Gitter
Ok, I went through the exact same use case a while ago: the trick is to not use your own React copy at...
Read more >
Preact - Releases
One seemingly minor change to our jsx constructor function lead to pretty weird and nasty bug depending on whether the code was run...
Read more >
Complete Intro to React
A two day workshop to learn React and the surrounding ecosystem. ... This simple restriction helps a lot in the future because when...
Read more >
preact - Bountysource
I have some existing react libraries and a react app which I am trying out with ... react to preact, so installed preact:...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found