Webpack devserver not working properly

[lunchboxer]

Something is broken with the webpack config. To reproduce clone the v3-webpack branch

npm install
npm run dev

This works without complaint and serves the sample index page, but try navigating to another route and you'll see the following error.

TypeError: Cannot read property 'fragment' of undefined
    at Object.claim [as l] (App.svelte:18)
    at init (internal.mjs:1391)
    at new App (App.svelte:15)
    at proxyComponent._register (proxy.js:128)
    at new proxyComponent (proxy.js:54)
    at render (app.mjs:195)
    at async navigate (app.mjs:148)

and

Uncaught (in promise) TypeError: Cannot read property '_debugName' of undefined
    at new proxyComponent (proxy.js:56)
    at render (app.mjs:195)
    at async navigate (app.mjs:148)

and no change in which route is shown as the app has now crashed completely. run npm run build and npm start and the app works as expected.

[lunchboxer]

That's sapper: 0.26.0-alpha.12 svelte: 3.1.0 svelte-loader: 2.13.3 webpack: 4.30.0

on node 12.0

[rnenjoy]

IF you turn off hot reloading it works. Its not finished for v3

[shellscape]

Try https://www.npmjs.com/package/webpack-plugin-serve instead of webpack-dev-server.

[lunchboxer]

@shellscape That looks promising. Any idea how to apply that to Sapper?

[shellscape]

@lunchboxer I've just started using sapper for a small project, but I'm using the Rollup path. I'll see about getting that setup with Webpack and the plugin in the next week or so. Shouldn't be that different from porting a webpack-dev-server project over.

[cashlionjp]

Any updates? I'm having the same issue.

relevant package.json

{
  "dependencies": {
    "fs-jetpack": "^2.2.3",
    "svelte-loader": "^2.13.6"
  },
  "devDependencies": {
    "css-loader": "^3.4.0",
    "electron": "7.1.7",
    "electron-builder": "^21.0.11",
    "electron-webpack": "^2.7.4",
    "electron-webpack-ts": "^3.2.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "source-map-support": "^0.5.12",
    "svelte": "^3.16.7",
    "sveltestrap": "^3.2.9",
    "typescript": "^3.7.4",
    "webpack": "~4.41.4",
    "webpack-node-externals": "^1.7.2"
  }
}

This is the relevant webpack config:

{
        test: /\.svelte$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader',
          options: {
            emitCss: true,
            hotReload: true,  // Changing this to `false` fixes the issue
            hotOptions: {
              optimistic: true,
            },
          }
        }
      }

HMR is a crucial feature and so this is obviously less than ideal.