Hot reload with setInterval

[AntonPochernikov]

🐛 bug report

1. When I start up a parcel server;
2. In index.js i write this line of code:
   setInterval(console.log, 1000, 'hello')
3. Then i change this line with:
   setInterval(console.log, 1000, 'how are you')
4. Then i save changes.
5. After reloading i get both intervals going at the same time.

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

package.json

{
  "name": "parcel-test",
  "version": "1.0.0",
  "description": "parcel-test",
  "main": "index.js",
  "scripts": {
  	"dev": "parcel serve src/index.html",
  	"build": "parcel build src/index.html",
  	"help": "parcel help",
    "test": "test"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.11.0"
  }
}

🤔 Expected Behavior

Previous interval should be cleared.

😯 Current Behavior

Previous interval is not cleared.

💁 Possible Solution

🔦 Context

🌍 Your Environment

Software	Version(s)
Parcel	1.11.0
Node	8.11.2
npm/Yarn	5.6.0
Operating System	Windows 10

[mischnic]

Parcel would have to remove only intervals/timeouts that were started by the module to be replaced - how should this be tracked?

I think you should take care of this yourself:

if (module.hot) {
  module.hot.dispose(function() {
    clearInterval(...);
  })
}

[AntonPochernikov]

I use Webpack 4 and do not get such behavior on reloading. I`m also a junior developer and may not understand this issue. Do i have to clear every interval and timeout in my app with this code?

if (module.hot) {
  module.hot.dispose(function() {
    clearInterval(...);
  })
}

[mischnic]

I use Webpack 4 and do not get such behavior on reloading.

Could you share your webpack config (or the relevant parts)?

[AntonPochernikov]

Sure:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackBar = require('webpackbar');

const isDevMode = process.env.NODE_ENV !== 'production'

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        use: [
          isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.(js|jsx)$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        use: [
          'babel-loader',
          'eslint-loader'
        ]
      },
    ]
  },
  resolve: {
    extensions: ['.css', '.js', '.jsx']
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
    new WebpackBar()
  ],
  devtool: 'source-map',
  devServer: {
    noInfo: true,
    stats: 'minimal',
    port: 3000,
    contentBase: path.join(__dirname, 'build'),
    historyApiFallback: true
  }
};

[mischnic]

You're not actually using HMR in your webpack config (this guide show how to enable it in the config: https://webpack.js.org/guides/hot-module-replacement/).

I couldn't find it in the webpack docs, but I think webpack reloads the whole page while Parcel does hot reloading (in this case re-execute the Javascript). If this is the case, #289 (comment) describes how to setup your project to reload the page completetly without HMR.