Vue app is producing an error in Chrome I cannot find an answer for-CodePudding

I am trying to learn Vue in depth and so I started from the beginning of the documentation again and working through it back to front.

Here is my index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Learning Vue</title>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index.js"></script>
  </body>
</html>

and here is my index.js file:

import { createApp } from "vue";

import App from "./App.vue";

const app = createApp(App);

app.mount("#app");

and here is my App.vue file:

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>
<script setup>
import { ref } from "vue";

const count = ref(0);

function increment() {
  count.value  ;
}
</script>

In Chrome (Version 102.0.5005.61 (Official Build) (64-bit)) I get the following error and nothing displaying on the page: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec.

I read that if the browser doesn't know what type it is it will respond with "application/octet-stream" but then if you specify the type of the script as module why doesn't the browser know what type it is?

I have really searched as to why I am getting this error but I cannot find an answer. I also looked at many examples and it doesn't seem like there is an error in my code.

Why am I getting this error please and how do I fix it?

CodePudding user response：

Your web server is serving the file to the browser using an improper Content-Type HTTP header - it must be text/javascript but the server either sends application/octet-stream or does not set this HTTP header at all.

It's your web server which is to blame - not the browser and certainly not Vue. Firefox will give you simiar error.

CodePudding user response：

importmap is suited for development and currently it doesn't have good support.

you can use services like nexuscode.online as development environment without need to worry about this kind of problems.