Parcel: When I change my code, the server adds on content to existing content on the page (repeats content instead of replacing old content)

Created on 19 Dec 2017  ·  9Comments  ·  Source: parcel-bundler/parcel

Choose one: is this a 🐛 bug report or 🙋 feature request?
This is a potential bug report.


When I start up a parcel server, everything works fine, but when I update the code (make any changes like changing the text on my header), the window shows the old content as well as the new content. screenshot here

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

.babelrc

{
    "presets": [
        "env"
    ]
}

package.json

{
  "name": "sketchvids-new",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html"
  },
  "keywords": [],
  "author": "Adam Rasheed",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.2.0"
  },
  "dependencies": {
    "babel-preset-env": "^1.6.1",
    "node-sass": "^4.7.2"
  }
}

🤔 Expected Behavior


When I run the parcel server, and make changes, it should update the existing content, not actually add content.

😯 Current Behavior


When I run the parcel server, it actually adds the changed content onto the dom.

💁 Possible Solution

🔦 Context

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.2
| Node | 9.2.1
| npm/Yarn | 5.5.1
| Operating System | MacOS

Bug HMR
Source
picture adamrasheed
👍6

All 9 comments

Could you paste your index.html and index.js files?

On Tue, Dec 19, 2017 at 12:41 AM, Adam Rasheed notifications@github.com
wrote:

Choose one: is this a 🐛 bug report or 🙋 feature request?
This is a potential bug report.

When I start up a parcel server, everything works fine, but when I update
the code (make any changes like changing the text on my header), the window
shows the old content as well as the new content. screenshot here
https://cl.ly/3H0H1n0P3w3D
🎛 Configuration (.babelrc, package.json, cli command)

.babelrc

{
"presets": [
"env"
]
}

package.json

{
"name": "sketchvids-new",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html"
},
"keywords": [],
"author": "Adam Rasheed",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "^1.2.0"
},
"dependencies": {
"babel-preset-env": "^1.6.1",
"node-sass": "^4.7.2"
}
}

🤔 Expected Behavior

When I run the parcel server, and make changes, it should update the
existing content, not actually add content.
😯 Current Behavior

When I run the parcel server, it actually adds the changed content onto
the dom.
💁 Possible Solution 🔦 Context 🌍 Your Environment
Software Version(s)
Parcel 1.2
Node 9.2.1
npm/Yarn 5.5.1
Operating System MAxOS

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/parcel-bundler/parcel/issues/344, or mute the thread
https://github.com/notifications/unsubscribe-auth/AADo8IsBkOnW1emDi8Fr6Wi7a_0gS1z9ks5tB1qMgaJpZM4RGgYY
.

shawwn picture shawwn on 19 Dec 2017

I have the same problem. I wrote a function to draw canvas charts. when I change my code, It created a new one on the page instead replace the original, here are my index.html and index.js file

// index.js
function drawArc(el, radian, part, total) {
  var percent = (part / total * 100).toFixed(2)
  if (percent < 0 || percent > 100) {
    return
  }
  if (radian < Math.PI / 2 || radian >= 3 / 2 * Math.PI) {
    return
  }

  const canvas = document.getElementById(el).appendChild(document.createElement('canvas'))
  const ctx = canvas.getContext('2d')
  const cWidth = canvas.width
  const cHeight = canvas.height
  const baseColor = '#C8DEFF'
  const coverColor = '#2B81FE'
  const PI = Math.PI
  const sR = radian || 1 / 2 * PI // 默认圆弧的起始点弧度为π/2
  var finalRadian = sR + (PI + (PI - sR) * 2) * percent / 100 // 红圈的终点弧度
  var step = (PI + (PI - sR) * 2) / 100 // 一个1%对应的弧度大小
  var text = 0 // 显示的数字
  var timer = setInterval(function() {
    ctx.clearRect(0, 0, cWidth, cHeight)
    var endRadian = sR + text * step
    // 浅色圆弧
    drawCanvas(cWidth / 2, cHeight / 2, cHeight / 2 - 8, sR, sR + (PI + (PI - sR) * 2), baseColor, 8)
    // 深色圆弧
    drawCanvas(cWidth / 2, cHeight / 2, cHeight / 2 - 8, sR, endRadian, coverColor, 8)
    // 圆弧的渐变
    text++

    ctx.font = '36px PingFang SC'
    const textWidth = ctx.measureText(text).width
    ctx.fillText(text, cWidth / 2 - textWidth / 2, cHeight / 2)

    if (endRadian.toFixed(2) >= finalRadian.toFixed(2)) {
      clearInterval(timer)
    }
  }, 16.7)

  function drawCanvas(x, y, r, sRadian, eRadian, color, lineWidth, fillColor, clockwise = false) {
    ctx.beginPath()
    ctx.lineCap = 'round'
    ctx.strokeStyle = color
    ctx.lineWidth = lineWidth
    ctx.arc(x, y, r, sRadian, eRadian, clockwise)
    ctx.stroke()
    if (fillColor) {
      ctx.fillStyle = fillColor
      ctx.fill()
    }
  }
}

drawArc('app', 2.4, 60, 100)

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parcel-Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <div id="app"></div>
    <script src="index.js"></script>
</body>
</html>
LuoHuacheng picture LuoHuacheng on 20 Dec 2017

I'll look into this.

shawwn picture shawwn on 21 Dec 2017
👍1

Sounds like #289 would also solve the use case here. In the meantime, you can follow some of the patterns noted in that issue to _replace_ instead of _append_ the element, which should provide the expected functionality.

brandon93s picture brandon93s on 21 Dec 2017
👍1

Same here!

When I save index.html - contents is normally replacing. When I save index.js - it adds hello message to bottom of #app div. Hope you'll fix it!

Software | Version(s)
-- | --
Parcel | 1.2
Node | v9.3.0
npm / Yarn | 5.5.1 / 1.3.2
Operating System | MacOS Sierra 10.12.6

It's pretty simple app to reproduce, check it out:


index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <div id="app"></div>
    <script src="app.js"></script>
  </body>
</html>


index.js

/** @jsx h */
import { h, render, Component } from 'preact'

class HelloMessage extends Component {
  render (props) {
    return <div>Hello { props.name }</div>
  }
}

const mountNode = document.getElementById('app')
render(<HelloMessage name='Jerry' />, mountNode)


package.json

{
  "dependencies": {
    "babel-preset-env": "1.6.1",
    "babel-preset-preact": "1.1.0",
    "parcel-bundler": "1.3.1",
    "preact": "8.2.7",
    "preact-compat": "3.17.0"
  },
  "devDependencies": {
    "standard": "10.0.3"
  }
}


.babelrc

{
  "presets": [
    "env",
    "preact"
  ]
}

JerryGreen picture JerryGreen on 31 Dec 2017

I don't know if it's releated, but I'm getting a Cannot read property 'Symbol(Symbol.iterator)' of null in E:\...\node_modules\parcel-bundler\src\Bundler.js:179:61.

Running into this issue using preact, with just a simple render method into a div - nothing special.

Software | Version(s)
-- | --
Parcel | 1.5.0
Preact | 8.2.7
Node | v9.4.0
npm / Yarn | 5.6.0 / 0.27.5
Operating System | Windows 10

nickdbush picture nickdbush on 23 Jan 2018
👍1

+1 same issue as the above comment:

I've attached a try/catch and console.error to line:
https://github.com/parcel-bundler/parcel/blob/master/src/Bundler.js#L179 as:

      // Emit an HMR update for any new assets (that don't have a parent bundle yet)
      // plus the asset that actually changed.
      if (this.hmr && !isInitialBundle) {
        // fix....
        try {
          this.hmr.emitUpdate([...this.findOrphanAssets(), ...loadedAssets]);
        } catch (err) {
          console.error('loadedAssets=', loadedAssets)
          console.error('err=', err)
        }
      }

When I modified assets stuff frequently, it would keep logging the following:

⏳  Building...
loadedAssets= null
err= TypeError: Cannot read property 'Symbol(Symbol.iterator)' of null
    at Bundler.bundle (/Users/dxx/w/pos-pay/node_modules/parcel-bundler/src/Bundler.js:181:63)
    at <anonymous>
⏳  Building...
loadedAssets= null
err= TypeError: Cannot read property 'Symbol(Symbol.iterator)' of null
    at Bundler.bundle (/Users/dxx/w/pos-pay/node_modules/parcel-bundler/src/Bundler.js:181:63)
    at <anonymous>
⏳  Building...
loadedAssets= null
err= TypeError: Cannot read property 'Symbol(Symbol.iterator)' of null
    at Bundler.bundle (/Users/dxx/w/pos-pay/node_modules/parcel-bundler/src/Bundler.js:181:63)
    at <anonymous>

If I've not attached that patch, the parcel-bundler process would hang and would not hot-reload any more until I restart it.

fritx picture fritx on 25 Jan 2018

same for me
any update of this?

cevek picture cevek on 26 Jul 2018

As far as I know this is probably just improper HMR handling, you can write a dispose function to remove the object from DOM or an accept one to update it.

If you would use any framework this is already built-in but if you're using pure js this is not

DeMoorJasper picture DeMoorJasper on 26 Jul 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

mnn picture mnn  ·  3Comments
medhatdawoud picture medhatdawoud  ·  3Comments
adamreisnz picture adamreisnz  ·  3Comments
donaldallen picture donaldallen  ·  3Comments
jzimmek picture jzimmek  ·  3Comments