Reloads with default Svelte template

[frederikhors]

Using the default template (https://github.com/sveltejs/template) and a simple example of Svero I have a problem when the template on npm run dev reloads after a change in code.

The browser crashes because, let's say /page, "is not found".

Maybe this problem is not strictly related to Svero but have you an hint for us, newbies people?

[kazzkiq]

Can you please upload your code somewhere and share it here?

[frederikhors]

The code here: https://codesandbox.io/s/zk61vjnlqp has the problem.

If you just remove lines:

7 and 39-41 from rollup.config.js it works again.

On codesandbox it doesn't reload as you can see (but codesandbox is still not good with Svelte, you can download the zip).

On my notebook I run with npm run dev and it crashes the browser when I'm on /players page and save an edit on a file.

I think the problem here can be with rollup-plugin-livereload and the Svero routes system.

[kazzkiq]

This is probably because your dev server has not enabled SPA mode. Which is further explained in "First Things First" section on README.

Svelte template uses sirv as dev server and the docs says that flag -s enables SPA.

So in this case simply changing this line in your package.json:

"start:dev": "sirv public --dev"

to this:

"start:dev": "sirv public --dev -s"

Should do the trick.

[frederikhors]

Ok now it works (you genius) but there is a problem with the same code (https://codesandbox.io/s/zk61vjnlqp, edited). I added a new page:

/players/:id.

If I edit something on that page or simply reload the browser has an error (on an URL let's say like: localhost:5000/players/1):

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:5000/players/global.css".
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:5000/players/bundle.css".
bundle.js:1 Uncaught SyntaxError: Unexpected token <

Do you think now the problem is sirv?

I'm using "start:dev": "sirv public --dev -s".

[kazzkiq]

Check your index.html, its probably calling the files with relative path. Add a / on them.

e.g.

...
  <link rel='stylesheet' href='global.css'>
  <link rel='stylesheet' href='bundle.css'>
...
  <script src='bundle.js'></script>
...

to:

...
  <link rel='stylesheet' href='/global.css'>
  <link rel='stylesheet' href='/bundle.css'>
...
  <script src='/bundle.js'></script>
...

[frederikhors]

You genius.