MIME type errors with Netlify Dev and Svelte Kit

Netlify domain: balacamp.netlify.app

My website runs fine locally, without console errors, using svelte-kit dev. It also deploys without issues.
My issue is with trying to run the development environment with netlify dev.
The console output doesn’t show any error, but when trying to load the page at localhost:8888, I’m seeing these errors in the console:

For reference, this is my netlify.toml:

[build]
  command = "npm run build"
  publish = "build"

[dev]
  command = "svelte-kit dev"
  • I am using the latest versions of sveltejs/adapter-netlify (1.0.0-next.51), sveltejs/vite-plugin-svelte (1.0.0-next.40) and vite (2.8.6)
  • I have tried this setup with node v14.15.0 and v16.14.2. Same errors.

Hey there, @nimser :wave:

Thanks for reaching out. I am not seeing the MIME type errors on our end, as we cannot reproduce an issue you are seeing locally. Can you share a reproduction or a repository with us so that we can look into this further?

Additionally, in the interim, can you try removing your [dev] command and running the build without it? Does it build successfully when you do this?

I managed to pinpoint the issue to @sveltejs/adapter-netlify.
I can reproduce the issue replacing back and forth with @sveltejs/adapter-auto to make the issue disappear/reappear.
Meaning, it works with @sveltejs/adapter-auto, but I get the above errors with @sveltejs/adapter-netlify, even though the adapter-netlify version used as a dependency of adapter-auto is the same (1.0.0-next.51).

I’m confused as the reason for this as I would have assumed netlify dev to make use of adapter-netlify?
One thing I noticed is that with the same config, when I netlify build with adapter-netlify I get content ouputed in /build/. Running netlify dev at that point would result in above issues. Interestingly, removing the build folder fixes these (it seems both the SSR part and the client are generated in the .svelte-kit folder by the svelte-kit build command, so I’m not sure why there should be a build folder anyway?).
When I run netlify build with adapter-auto, it doesn’t create a /build folder, and everything works as expected. It would be great to have more information available about how build steps differ in the netlify dev environement and the production environment.

In both case, my netlify.toml reads as follows:

[build]
  command = "svelte-kit build"
  publish = "build"

PS: I tried to work on a reproducible example but the errors varied slightly, repo can’t be shared as-is. I can share specific files upon request.

Hey there, @nimser :wave:

We have looked into this further for you. Unfortunately, as we are not the maintainers of @sveltejs/adapter-netlify, your best path forward here will be speaking directly with the plugin maintainers. I believe bringing them a reproduction would be beneficial as well (although I know you stated this was a challenge).

We’ll leave this thread open should anything change in the future!

Hi, I have a similar situation with Sveltekit 1.0 and ntl dev.

If I run ntl deploy, it bombs and asks if I have forgotten to build. So I run npm run build which creates a build folder (but Sveltekit 1.0 uses .svelte-kit folder, I believe).
I run ntl deploy again and my site ( https://63c6e535b71e3075d53ef286–peppy-rolypoly-dd9af0.netlify.app) looks as I expect it to look at this stage!

However, I try ntl dev and the site appears locally but it is a mess - it doesnt look too pretty online but its a real mess locally - navigation not working, css not working! It does show some stuff from some pages but its a disaster!

So I DELETE the build folder and try ntl dev again. This time it displays perfectly locally. But of course as soon as I try ntl deploy I have to npm run build and I run around in circles here.

My netlify.toml is:
[build]
command=“svelte-kit build”
publish=“build”

I then removed the build folder and ntl dev and site appears locally no issues. I tried changing the publish=“.svelte-kit” in netlify.toml and then ntl deploy and … drumroll … it didnt bomb and ask me if I forgot to build. It just kept going and created the Website Draft URL and … I thought I was on to a winner but instead it tells me broken link. When I go to the site on Netlify its not displaying either so that wasnt good. I reset .toml back to build folder and ntl deploy and again fine online, a mess locally.

In svelte.config.js, I am using …
import adapter from ‘@sveltejs/adapter-netlify’;

So, I tried switching to adapter-auto …

  1. Delete BUILD folder. ntl dev. Site displays fine locally.
  2. ntl deploy -aaaagh! “Did you forget to run a build”! npm run build. This ran but did not create a build folder.
  3. ntl deploy - “Did you forget to run a build”!
  4. switch back to adapter-netlify!!!

For now, I can remove build folder and ntl dev works locally and when I need to deploy I run npm run build and ntl deploy and then remove build so I can continue locally!

Is there a fix?

Hey @kreollc , happy to help with this. You’ll need to run netlify deploy --build instead, because that is required first.

Regarding the second part of your issue, this is likely because we are not detecting that it is a Svelte app and so it’s defaulting to serving whichever publish path you have set. Can you provide the following info for us:

  • your netlify.toml file
  • a link to the repo (if it is public, of course!)

You can also try specifying the framework in the netlify.toml file (eg. force a build command in the [dev] section of the file, as described here on our Help Docs)

hi Amelia, Thanks for the suggestion but whether I run ntl deploy or ntl deploy --build they both create a “build” folder and while that build folder is present, if I then run ntl dev, to continue development locally, the app appears but is a mess with nothing working. If I delete the build folder and run ntl dev then the app runs normally. Thats the issue.

I provided the netlify.toml above and have since changed the build command to command=“vite build”. This does the same thing.

I am using adapter-netlify and the build shows “Using @sveltejs/adapter-netlify” so it is detecting (I assume) that this is a svelte app.

To reiterate, the “build” folder causes a problem with ntl dev running the site locally (I just get a mess of text on the screen with nothing working - navigation/css - nothing). so instead of this…

I get this …

Its not a big issue. I just delete the build folder when I need to work locally.