Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Parcel 2: Browser is not updated when the source changes #7409

Closed
mahdix opened this issue Dec 5, 2021 · 1 comment · Fixed by #7514
Closed

Parcel 2: Browser is not updated when the source changes #7409

mahdix opened this issue Dec 5, 2021 · 1 comment · Fixed by #7514
Labels
HMR Hot Module Reloading

Comments

@mahdix
Copy link

mahdix commented Dec 5, 2021 •
edited
Loading

Summary: When I start Parcel dev server via parcel serve src/pages/*.html it works fine for the very first time.
But when I make a change in the .tsx file, the browser is not updated.
Things that I have tried:

  1. Force refresh browser
  2. Change the file using another editor (Sublime, vim)
  3. Stop and restart Parcel
  4. rm -rf dist and .parcel-cache

After several tries, it just starts working fine (but for one time, later changes are again not shown).

My package.json:

{
  "name": "socialmonitr-front-end",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "private": true,
  "scripts": {
    "build": "parcel build src/pages/*.html --no-source-maps --no-scope-hoist",
    "serve": "parcel serve src/pages/*.html"
  },
  "keywords": [],
  "author": "",
  "license": "Commercial",
  "packageManager": "yarn@3.1.1",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.0.1",
    "@types/react": "17.0.34",
    "@types/react-dom": "17.0.11",
    "parcel": "2.0.1",
    "typescript": "4.4.3"
  },
  "dependencies": {
    "@emotion/react": "^11.7.0",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.2.0",
    "@mui/material": "^5.2.1",
    "@mui/x-data-grid": "^5.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

The source file can be any simple tsx:

export const Index = () => {
    return <>
        this is a test
    </>

}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>My Parcel App</title>
    <meta name="viewport" content="initial-scale=1, width=device-width" />
    <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    />
    <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />

</head>
<body>
<div id="app"></div>
<script type="module" src="index.js"></script>
</body>
</html>

index.js:

import ReactDOM from "react-dom"
import { Index } from "../components"

ReactDOM.render(<Index />, document.getElementById("app"));

Parcel: 2.0.1
Yarn: 3.1.1
Node: 16.11.0

I use IntelliJ to edit files but as I mentioned, even editing the TSX source using other browsers does not fix the issue.

P.S: Somehow I suspect this is related to Yarn 3 (PnP) because I downgraded to yarn v1 and (at least for now) it is working fine.
@folknor
Copy link

folknor commented Dec 14, 2021

This is probably a duplicate of #6685 or one of the other 10+ HMR open tickets. I have the same problem using html+js, but there's enough open tickets.

@devongovett devongovett added the HMR Hot Module Reloading label Jan 1, 2022
@devongovett devongovett mentioned this issue Jan 1, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
HMR Hot Module Reloading
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix HMR bugs parcel-bundler/parcel
3 participants
@devongovett @folknor @mahdix