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.

preact/compat doesn't reload browser on file change on Parcel 2

See original GitHub issue

🐛 bug report

When I tried to run a dev server on parcel@next I didn’t see the browser updating on file changes (which is out-of-the-box behaviour of Parcel v1)

Parcel v1 works absolutely fine and reload happens

🎛 Configuration (.babelrc, package.json, cli command)

parcel index.html -p 3000

or

parcel serve index.html -p 3000

🤔 Expected Behavior

Dev server would reload my page

😯 Current Behavior

Currently the browser doesn’t reload but WebSocket is being sent (I see console clear message flickering when I update file)

💁 Possible Solution

Write custom config maybe? I’m not sure which one but I expect this to be working out of the box

🔦 Context

This issue affected me after starting a dev server on Parcel 2.

I’m writing an app with Preact, Emotion and Rebass.

💻 Code Sample

Put this into package.json:

"alias": {
    "react": "preact/compat",
    "react-dom": "preact/compat"
  }

Then write this:

import React from 'react'
import { render } from 'react-dom'

render(<h1>Hello World</h1>, document.getElementById('app')

And try to change component’s contents. Nothing will change.

🌍 Your Environment

Software Version(s)
Parcel 2.0.0-alpha.3.2
Node 13.2
npm/Yarn 1.19.2
Operating System Linux 5.14

Issue Analytics

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

github_iconTop GitHub Comments

1reaction
willybraunercommented, Oct 26, 2021

@talentlessguy HMR works with your configuration? I got the same issue with these packages:

  "dependencies": {
    "preact": "^10.5.15",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@parcel/reporter-bundle-analyzer": "^2.0.0",
    "@parcel/transformer-inline-string": "^2.0.0",
    "@parcel/transformer-less": "^2.0.0",
    "parcel": "^2.0.0",
    "typescript": "^4.4.4"
  },
  "alias": {
    "react": "preact/compat",
    "react-dom": "preact/compat"
  }
0reactions
talentlessguycommented, Feb 3, 2020

@mischnic because now it works (I guess someone made a fix in preact or parcel), closing the issue

Read more comments on GitHub >

github_iconTop Results From Across the Web

Parcel doesn't perform reload when I make changes on my ...
Parcel doesn't perform reload when I make changes on my React components ... on github said that he added module.hot() on file where...
Read more >
API - esbuild
This changes how the exports field in package.json files is interpreted to prefer browser-specific code. If no custom conditions are configured, the Webpack- ......
Read more >
Preact: sometimes blank page upon reload - Stack Overflow
You're (or parcel) is trying to load a Typescript (TSX) file, which the browser won't like. Change <script async src=".
Read more >
parcel - npm
If we want parcel to update our changes in the browser without refreshing the page, we need to add at least a dummy...
Read more >
Moving React app to Preact in 10 minutes with Vite - Puru Vijay
#Installing right dependencies. This is parts of my package.json file before the transfer: { " ...
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