WEB: Failed to register a service worker: The script has an unsupported MIME type ('text/plain').

[Schamppu]

Hello! I've been trying to get Drift work on web, but whenever I'm trying to run it I run to the following exception:

Is there a way to fix this? I have tried to search, but can't find anything exactly to make it work. It's the drift_worker.js file that keeps causing me this issue.

[dickermoshe]

Just curious, what happens when you click on https://app.tools.walkscape.app/flutter%20service%20worker.%20js?v=2820553694? Could you also get a screenshot from your devtools.?

[dickermoshe]

E.G:

[Schamppu]

It's there, doesn't return 404. I got this working while developing locally, but on the server side it's giving me this MIME type error. It does give it for two things on the server:

I'm using Nginx proxy manager on the server to server these files. So could this be something that can be resolved there?

[Schamppu]

Okay, I solved it. It was due to my Nginx configuration.

For anyone else that might have this same issue, here's how I fixed it. It's an issue if you're running your Flutter application inside a Docker container, and you're serving it with Nginx.

The fix is quite simple, configure your nginx.conf to be something like this. I highlighted the important lines for Drift:

After these, the application runs nicely and you're serving it while using the headers that are recommended in Drift documentation here:

https://drift.simonbinder.eu/web/#additional-headers

[Schamppu]

I need to reopen this issue, as I simply can't get this working.

For the most part, everything goes fine. But this has caused me a massive headache, I just can't figure out how you're supposed to serve the sqlite3.wasm file while having the correct Content-Type header.

Whatever I've tried, it's always served with content-type text/plain.

@dickermoshe is there a working example or some guidance on this? Like what kind of setup has been used to serve the sqlite3.wasm file from web/ folder with the correct content type header?

I'm using Nginx to serve the Flutter web app, here's my Nginx configuration file with some updates:

http {
  include /etc/nginx/mime.types;
  types {
      application/wasm wasm;
  }

  server {
    listen 8083;
    add_header 'Cross-Origin-Opener-Policy' 'same-origin';
    add_header 'Cross-Origin-Embedder-Policy' 'require-corp';

    location / {
      root   /usr/share/nginx/html;
      index  index.html;
    }

    location ~* \.wasm$ {
      default_type application/wasm;
      proxy_hide_header Content-Type;
      add_header Content-Type application/wasm;
      proxy_set_header Content-Type application/wasm;
    }
  }
}

As it's shown here, I'm adding in the application/wasm type as recommended.

I'm OK ditching Nginx if there's some other alternative that's working, and I'm very desperate to get this working. Been bashing my head against the wall for two days now

[simolus3]

Which headers does curl -v yourserver/sqlite3.wasm report (you can also copy the URL / curl invocation from the networking tab of your browser's devtools)? Is the result gibberish when interpreted as text (which we'd expect when serving wasm bytecode)? Flutter's service worker also caches responses IIRC, so it's possible that the file is getting served correctly and you just have a bad cache in the browser.

[dickermoshe]

Check this:

[Schamppu]

Alright, so good news is that it seems like my Nginx config has been OK. When I run the commnad curl -v https://app.tools.walkscape.app/sqlite3.wasm I get the following response:

If I run it with --output - it's also indeed binary gibberish.

However, the error still stays:

I have disabled the cache from Network tab, which doesn't solve it either.

[Schamppu]

Uh ohh, tried to run the website on Chrome instead of Brave and it works. So I assume this might be due to caching still? I tried to clear cache from Brave, but nothing happened.

[dickermoshe]

Have you tried using incognito?

[dickermoshe]

Works in Brave and Chrome by me but I don't see any sqlite.wasm file in networking:

[Schamppu]

I also don't see the sqlite3.dart showing up in Network tab, but works regardless.

Incognito on Brave works. So definitely something to do with caching. I've tried to nuke everything, but still seems like probably Flutter's cache is causing an issue.

I close as this was resolved.

[simolus3]

You might have to unregister Flutter's service worker in brave to fix this.

[Schamppu]

Thank you all for help. Leaving this here for some other people might be unaware how to clear up service worker's data. Unregistering finally got it working on my Brave browser as well.