Svelte hot reloading. With Webpack or Rollup.

So, you are wondering how to implement hot reloading for your Svelte application? Or maybe you already have your implementation, but it doesn’t work as expected?

In this article, I share my experience of creating the hot reloading feature for Svelte app with Webpack/Rollup with code examples and image attachments that can help to describe a process much better, in my opinion.

If you are busy and are eager to know how to implement hot reloading without reading the whole article then check the next paragraph that will help you to make things a bit clearer in one sentence:

Use svelte-loader for Webpack, webpack-dev-server, and make sure to set the “hot” option to true for both webpack-dev-server and svelte-loader. For Rollup use a fork from the official svelte plugin called rollup-plugin-svelte-hot with rollup-plugin-livereload.

Now if you are ready let’s start to define how to get the job done with Webpack.

Svelte hot reloading with Webpack

Svelte hot reloading in action

You can find the code for this sample hot reloading application in my Github repository.

App’s folder structure
// webpack.config.js

const path = require('path');

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    publicPath: '/build',
    compress: true,
    port: 9001,
    hot: true,
  },
  module: {
    rules: [
      {
        test: /.svelte$/,
        loader: 'svelte-loader',
        options: { hotReload: true },
      }
    ],
  },
};
// main.js

import App from './components/App.svelte'

new App({
    target: document.getElementById('svelte_app'),
})
// App.js

<p>Hello from App component!</p>

This is all the code needed to make the hot reloading feature work!

You just create the webpack config and craft your Svelte components. Webpack will deal with all the hard work using the svelte-loader.

Just make sure you’ve added the options: { hotReload: true } to svelte-loader and hot: true to the devServer options.

And install the app’s dependencies to bring the code to life.

// package.json

...
"scripts": {
    ...
    "build": "webpack",
    "start": "webpack-dev-server"
},
"dependencies": {
    "svelte": "^3.23.1"
  },
"devDependencies": {
    "svelte-loader": "^2.13.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
}
...

I’ve faced the problem with webpack-dev-server though.

The hot reloading feature hasn’t been working for a while for my application and I spent about half an hour to define what was the problem.

The app properly worked, the bundle was properly created, no errors were shown in the console, but still, my app didn’t reflect any changes.

As it turned out my devServer config was incorrectly set up in relation to the script’s src attribute in the index.html file. Let’s take a closer look at the config and the index.html file.

// index.html in the public folder
// public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <div id="svelte_app"></div>

    <!-- >> Take a look here << -->
    <script src="build/bundle.js"></script>
</body>
</html>
devServer: {
    contentBase: path.join(__dirname, 'public'),
    // publicPath: '/build',
    compress: true,
    port: 9001,
    hot: true,
},

Above you can see the previous config that failed to work as expected for me.

The problem is that I’ve missed the publicPath: '/build' part that defaults to / if not provided.

The publicPath option helps webpack to determine under what path the bundled files will be available in the browser.

You can check more information about publicPath option and other useful information about webpack-dev-server in webpack’s official documentation.

Also, you should definitely check this Github issue and particularly this answer that helped me to resolve my problem.

So, congratulations! We’ve implemented the hot reloading feature using Webpack.

You can see the code in my Github repository for Svelte Webpack hot reloading feature.

Now it’s Rollup’s turn. Does it have better tools to help us to implement the needed behavior? Let’s find out.

Svelte hot reloading with Rollup

Visit my Github repository to see the code for Rollup hot reloading implementation.

Unlike Webpack, Rollup doesn’t have the official support for hot reloading yet.

But you can use this fork from the official Rollup plugin that does the trick.

App’s folder structure
// rollup.config.js

import svelte from 'rollup-plugin-svelte-hot'
import resolve from '@rollup/plugin-node-resolve';
import serve from 'rollup-plugin-serve'
import reload from 'rollup-plugin-livereload'

export default {
  input: 'main.js',
  output: {
    file: 'public/build/bundle.js',
    format: 'iife'
  },
  plugins: [
      resolve(),
      svelte({ hot: true }),
      serve('public'),
      reload(),
  ],
};
// package.json

...
"devDependencies": {
    "@rollup/plugin-node-resolve": "^8.0.1",
    "rollup-plugin-livereload": "^1.3.0",
    "rollup-plugin-serve": "^1.0.1",
    "rollup-plugin-svelte": "^5.2.2",
    "rollup-plugin-svelte-hot": "^0.9.2",
    "svelte": "^3.23.1"
  }

The thing I would like to highlight here is that you should use the @rollup/plugin-node-resolve. Without this plugin, an error occurred for me while building the Svelte app.

I’ve come across this Github issue that helped me to answer my question about How to fix Uncaught ReferenceError: internal is not defined error.

Also, keep in mind to use the rollup-plugin-livereload and rollup-plugin-svelte-hot.

Conclusion

In this article, we’ve figured out how to implement a hot reloading feature for a Svelte application using Webpack or Rollup.

I don’t have an opinion about what tool is better to use – Rollup or Webpack, I think it depends on your developer’s taste, project requirements and possibilities that each tool can present for you.

Both tools have an incredible community, give huge flexibility and both are fun to use.

Though the huge benefit for supporting hot reloading feature in your Svelte app has Webpack since the community introduced the official loader that you can use without any worries.

I hope you’ve learned something new today with me and are inspired to apply your knowledge in your next astonishing app!

If you want to read more Svelte articles you could try reading my previous articles Svelte with Typescript. Make it possible with Webpack and Introduction to Svelte SSR with code examples.

Please, share your feedback about this article with me, request topics to be highlighted on letconst or just tell me how are you doing at letconstportal@gmail.com!