HMR is not working with 11ty's (Eleventy) watch flag.

[kaeside]

Hi everyone,

I'm working on making a personal SSG starter kit that utilizes 11ty.

I followed the official snowpack app template for 11ty and I noticed that a few things have changed with Snowpack's config since this was made.

Using this as a guide I tried to make my own flavor.

Per 11ty's docs, you use the watch flag when running 11ty if you have your own server.

However for me when I run snowpack dev it will load the page, but HMR doesn't work when I make edits.

To make it simple I'm just doing edits on the index.html file adding p tags.

Sometimes the HMR would work when I open a new browser such as Firefox and make changes, but then it would stop after repeatedly making changes.

I do see that snowpack is successfully running 11ty's cli because the changes are appearing in my build destination.

For safe measure, to ensure that 11ty cli is working, I swapped the watch flag with the serve flag and it works.

package.json

"scripts": {
    "build": "snowpack build",
    "dev": "eleventy --watch",
    "start": "snowpack dev"
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": {
    "@11ty/eleventy": "^0.11.1",
    "@snowpack/plugin-optimize": "^0.2.7",
    "@snowpack/plugin-postcss": "^1.0.6",
    "@snowpack/plugin-run-script": "^2.1.7",
    "alpinejs": "^2.7.2",
    "autoprefixer": "^10.0.1",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.1.4",
    "postcss-cli": "^8.1.0",
    "snowpack": "^2.15.1",
    "tailwindcss": "^1.9.6"
  },
  "dependencies": {}

.eleventy.js

module.exports = function (config) {
  config.setLiquidOptions({
    extname: '.liquid',
    strict_filters: true,
    root: ['_includes'],
  })

  config.addPassthroughCopy('./static/css')
  config.addPassthroughCopy('./static/images')
  config.addPassthroughCopy('./static/js')
  return {
    dir: {
      input: 'views',
      output: '_build_',
    },
    passthroughFileCopy: true,
    templateFormats: ['html', 'md', 'liquid'],
    htmlTemplateEngine: 'liquid',
    dataTemplateEngine: 'liquid',
    markdownTemplateEngine: 'liquid',
  }
}

snowpack.config.json

{
  "buildOptions": {
    "clean": true,
    "out": "_build_"
  },
  "devOptions": {
    "port": 3000,
    "bundle": false,
    "hmr": true,
    "hmrErrorOverlay": true,
    "open": "none",
    "options": "dashboard"
  },
  "mount": {
    "_dist": "/",
    "static": "/"
  },
  "plugins": [
    [
      "@snowpack/plugin-run-script",
      {
        "cmd": "eleventy",
        "watch": "$1 --watch"
      }
    ],
    [
      "@snowpack/plugin-optimize",
      {
        "preloadModules": true,
        "target": "es2020"
      }
    ]
  ]
}

project file structure

[FredKSchott]

Check out our 11ty config: https://github.com/snowpackjs/snowpack/blob/master/create-snowpack-app/app-template-11ty/snowpack.config.js

You'll want to add a small hmrDelay, see that config file for an example

[kaeside]

Hey @FredKSchott thanks for the tip.

I saw that originally in the template but I didn't see that in the docs therefore I thought it had been removed.

I tried adding it to the template adding that to my template and I was still producing the same result.

I even tried a clean install of the @snowpack/app-template-11ty template locally and it produced the same result.

If you clone that and modify the copy of the About CTA, it updates the file in the build destination but the browser doesn't load the changes.

[armanozak]

Hi @FredKSchott,

Same here. My 11ty config also has an hmrDelay of 300, but I could not get the HMR work. I then checked the dev tools network pane and found out that there is no WebSocket connection.

What do you think the reason could be? A bug maybe?

P.S. I did not use the template. The project is built from scratch.

[vimtor]

I've been investigating and it seems to be related to Windows and browser-sync. I've not been able to solve it either.

[JarkaP]

It's working for me, if I append "index.html" to route.
example.com/post isn't working
example.com/post/index.html is working

[davidbwaters]

Same issue on mac

[melissamcewen]

@davidbwaters if you have time, could you file an issue? That will help us debug.

[davidbwaters]

doing this now

[davidbwaters]

actually, i got it working by building with snowpack to a dist folder and mounting 11ty's folder. i build first and then ran dev and it works. i think this issue is confusion about how to config based on the way snowpack's 11ty template is set up. that actually worked for me at first, but started failing somewhere in the process of adding a simple 11ty config as per their docs.

check out my config here https://github.com/davidbwaters/11ty-snowpack-skeleton

updated: renamed repo and added some details about this issue

snowpack config

module.exports = {
  mount: {
    build: { url: '/', static: true },
    scripts: { url: '/scripts' },
    stylesheets: { url: '/stylesheets' },
  },
  plugins: [
    [
      '@snowpack/plugin-run-script',
      {
        cmd: 'eleventy',
        watch: '$1 --watch',
      },
    ],
  ],
  routes: [],
  optimize: {},
  packageOptions: {},
  devOptions: {
    hmrDelay: 600,
  },
  buildOptions: {
    clean: true,
    out: 'dist'
  },
};

eleventy config

const config = {
  dir: {
    data: '../data',
    includes: '../templates/partials',
    input: 'content',
    layouts: '../templates/layouts',
    output: 'build'
  },
  htmlTemplateEngine: 'njk',
  markdownTemplateEngine: 'njk'
}

const formats = {
  templates: [
    'html',
    'njk',
    'md'
  ],
  assets: [
    'css',
    'jpeg',
    'jpg',
    'png',
    'svg',
    'woff',
    'woff2'
  ]
}

module.exports = function (eleventyConfig) {

  eleventyConfig.setTemplateFormats([
    ...formats.templates,
    ...formats.assets
  ])

  eleventyConfig.addPassthroughCopy('assets')

  return config
}

[davidbwaters]

after some more experimenting i can confirm only get hmr working with 11ty building to a different folder than mounted with snowpack