Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "video/mp2t". Strict MIME type checking is enforced for module scripts per HTML spec.

[bookdesu]

I created vue page by yarn create vite
（yarn -v：1.22.19）
Although I can see the page on localhost, I faced following error after I deployed it on AWS S3.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "video/mp2t". Strict MIME type checking is enforced for module scripts per HTML spec.

Here is Chrome console.

I have no idea how to solve it.

[Boamorte8]

I create 2 projects with vue using npm create vite and I have the same problem. I tested creating a third project using npm init vue@latest and I have the same problem

[Boamorte8]

After a while looking for the bug I found that after I changed the index.html on dist folder from /assets/index.e8f3078e.css by /dist/assets/index.e8f3078e.css

I did the next changes to my project and it's working now

I hope can help you

[gookyn]

It was solved by adding base: "./" to vite.config.ts.

I had a similar problem, my project needed one more path to deploy, so I solved it by adding base: "./my-project-path" . But I'm still not quite sure why this is happening.

[manishagupta016]

this doesn't solve my issue
any other solution?

[basescriptnet]

It was solved by adding base: "./" to vite.config.ts.

Your answer was so simple and solved everything so fast, that I had to try to log in to github, reset my password and upvote you. Thanks:)

[manishagupta016]

can you please provide full vite.config.ts file @basescriptnet as this this doesn't solve my issue maybe i am doing something wrong

[basescriptnet]

can you please provide full vite.config.ts file @basescriptnet as this this doesn't solve my issue maybe i am doing something wrong

Sure.

// Plugins
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

// Utilities
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
        vuetify({
            autoImport: true,
        }),
    ],
    define: { 'process.env': {} },
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        },
        extensions: [
            '.js',
            '.json',
            '.jsx',
            '.mjs',
            '.ts',
            '.tsx',
            '.vue',
        ],
    },
    server: {
        port: 3000,
        open: true,
        cors: true,
    },
    base: './',
})

[riceball1]

I was able to fix this similar issue, which I deployed on github via the static.yml firstly I changed my path: . to point to path: ./dist instead, I also made sure since I was using typescript, to include the typescript configs and rollup. Here's my repo for reference. It was fix I needed to do, hopefully it helps others. I also added .mime changes in the dist folder and the static.yml don't know if that helped but you can try to leave it out to see if it makes a difference for you

[KingAmo]

same here...

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

my vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import  {resolve} from 'path'

function generateAlias(absolutePath) {
    // eslint-disable-next-line no-undef
  return resolve(process.cwd(), absolutePath);
}

export default defineConfig({
    // eslint-disable-next-line no-undef
    base: process.env.NODE_ENV === 'production' ? '/dist': '/@qidu/picsay.pages/',
    plugins: [react()],
    resolve: {
        alias: {
            '@':generateAlias('src'),
            '@utils': generateAlias('src/utils'),
            '@config': generateAlias('src/config'),
            '@pages': generateAlias('src/pages'),
            '@components': generateAlias('src/components'),
            '@assets': generateAlias('src/assets'),
            '@recoil': generateAlias('src/recoil'),
            '@shared': generateAlias('src/shared'),
            '~@': generateAlias('src'),
            '~@assets': generateAlias('src/assets'),
        },
    },
    server: {
        port:3008
    },
})

[gookyn]

try base: process.env.NODE_ENV === 'production' ? './@qidu/picsay.pages/dist': './@qidu/picsay.pages/',

[KingAmo]

try base: process.env.NODE_ENV === 'production' ? './@qidu/picsay.pages/dist': './@qidu/picsay.pages/',

@gookyn after use your code, the script generated in html miss dist path：

  <script type="module" crossorigin src="/assets/index-37c6c08a.js"></script>
  <link rel="stylesheet" href="/assets/index-e16d55d9.css">

[manishagupta016]

I am still getting this error and my vite.config.ts looks like this

[AntonOfTheWoods]

Also, make sure that whether it works or not in dev mode, that you MUST have any workers with the new URL() INSIDE the new Worker, like so:

const sqlite = new Worker(new URL("./lib/db/sqlite/install-worker.ts", import.meta.url), { type: "module" });

If you have

const aurl = new URL("./lib/db/sqlite/install-worker.ts", import.meta.url);
const sqlite = new Worker(aurl, { type: "module" });

it WILL NOT WORK, and you'll also get this error.

[TianMeds]

How to solve this type i already did the base: './'

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        },
      },
    },
  },
  base: './', // Change the base configuration to an object
});

[NathanAP]

If someone is getting this problem while dealing with nginx configuration, this might be helpful.

In your nginx.conf:

worker_processes 4;

events {
    worker_connections 1024;
}

http {
    server {
        listen 80;
        server_name YOUR_SERVER_NAME;
        charset utf-8;
        root /usr/share/nginx/html;
        index index.html;

        #Always serve index.html for any request
        location / {
            try_files $uri /index.html;
            include /etc/nginx/mime.types; <- this fixed my problem with css being read as `text/plain` mimetype
        }
        error_log  /var/log/nginx/client-error.log;
        access_log /var/log/nginx/client-access.log;

        server_tokens off;
        add_header X-Content-Type-Options nosniff;
    }
}

[Iam-Makafui]

same here:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

my vite.config.js:

`import { fileURLToPath } from 'node:url'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VueRouterAutoImports, getPascalCaseRouteName } from 'unplugin-vue-router'
import VueRouter from 'unplugin-vue-router/vite'
import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'
import Layouts from 'vite-plugin-vue-layouts'
import vuetify from 'vite-plugin-vuetify'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
// Docs: https://github.com/posva/unplugin-vue-router
// ℹ️ This plugin should be placed before vue plugin
VueRouter({
getRouteName: routeNode => {
// Convert pascal case to kebab case
return getPascalCaseRouteName(routeNode)
.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
.toLowerCase()
},
beforeWriteFiles: root => {
root.insert('/apps/email/:filter', '/src/pages/apps/email/index.vue')
root.insert('/apps/email/:label', '/src/pages/apps/email/index.vue')
},
}),
vue({
template: {
compilerOptions: {
isCustomElement: tag => tag === 'swiper-container' || tag === 'swiper-slide',
},
},
}),
VueDevTools(),
vueJsx(),

// Docs: https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
vuetify({
  styles: {
    configFile: 'src/assets/styles/variables/_vuetify.scss',
  },
}),

// Docs: https://github.com/johncampionjr/vite-plugin-vue-layouts#vite-plugin-vue-layouts
Layouts({
  layoutsDirs: './src/layouts/',
}),

// Docs: https://github.com/antfu/unplugin-vue-components#unplugin-vue-components
Components({
  dirs: ['src/@core/components', 'src/views/demos', 'src/components'],
  dts: true,
  resolvers: [
    componentName => {
      // Auto import 'VueApexCharts'
      if (componentName === 'VueApexCharts')
        return { name: 'default', from: 'vue3-apexcharts', as: 'VueApexCharts' }
    },
  ],
}),

// Docs: https://github.com/antfu/unplugin-auto-import#unplugin-auto-import
AutoImport({
  imports: ['vue', VueRouterAutoImports, '@vueuse/core', '@vueuse/math', 'vue-i18n', 'pinia'],
  dirs: [
    './src/@core/utils',
    './src/@core/composable/',
    './src/composables/',
    './src/utils/',
    './src/plugins/*/composables/*',
  ],
  vueTemplate: true,

  // ℹ️ Disabled to avoid confusion & accidental usage
  ignore: ['useCookies', 'useStorage'],
  eslintrc: {
    enabled: true,
    filepath: './.eslintrc-auto-import.json',
  },
}),

// Docs: https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#intlifyunplugin-vue-i18n
VueI18nPlugin({
  runtimeOnly: true,
  compositionOnly: true,
  include: [
    fileURLToPath(new URL('./src/plugins/i18n/locales/**', import.meta.url)),
  ],
}),

],
define: { 'process.env': {} },
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'@themeConfig': fileURLToPath(new URL('./themeConfig.js', import.meta.url)),
'@core': fileURLToPath(new URL('./src/@core', import.meta.url)),
'@layouts': fileURLToPath(new URL('./src/@layouts', import.meta.url)),
'@images': fileURLToPath(new URL('./src/assets/images/', import.meta.url)),
'@Styles': fileURLToPath(new URL('./src/assets/styles/', import.meta.url)),
'@configured-variables': fileURLToPath(new URL('./src/assets/styles/variables/_template.scss', import.meta.url)),
'apexcharts': fileURLToPath(new URL('node_modules/apexcharts-clevision', import.meta.url)),
'@db': fileURLToPath(new URL('./src/plugins/fake-api/handlers/', import.meta.url)),
'@api-utils': fileURLToPath(new URL('./src/plugins/fake-api/utils/', import.meta.url)),
},
},
build: {
chunkSizeWarningLimit: 5000,
},
optimizeDeps: {
exclude: ['vuetify'],
entries: [
'./src/**/*.vue',
],
},
})
`

[sweihub]

My solution

1. Remove the server.proxy entry from vite.config.js
2. Restart npm run dev
3. Restore the server.proxy in vute.config.js
4. Restart npm run dev -- it was solved!

[wheeOs]

I had the same error.
For me, removing the leading slashes from the addresses referencing the assets in the resulting index.html, solved the problem:
e.g.:

instead of:

    <script type="module" crossorigin src="/assets/index-ZTO8UfJf.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-ComYNnc_.css">

do this:

    <script type="module" crossorigin src="assets/index-ZTO8UfJf.js"></script>
    <link rel="stylesheet" crossorigin href="assets/index-ComYNnc_.css">

[mkkhusbu]

what's will be the solve?

[Ezzagmoute-Hamza]

I spent two days investigating the issue: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "''. Strict MIME type checking is enforced for module scripts per HTML spec.
while running the built dist folder of my React.js project with Vite.

Initially, I used the following commands to build and run the dist folder locally:
npm run build && npx serve -s

However, after some investigation, I discovered that the issue was caused by the command I used to serve the dist folder.
I corrected it to:
npx serve -s dist
And everything worked perfectly!