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.

[moshi-soft]

In nuxt 3 After running nuxt generate I am unable to run the project generated in .output folders.
showing error like:
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.

Actually I want to host the project on cpanel.
How can I solve the problem?

[IainZhuo]

使用Nginx部署，遇到相同问题

[manniL]

Did you use target: static in your nuxt.config.ts (or .js)?
Can you share a full reproduction?

Also, this seems like it should be a discussion instead ☺️

[moshi-soft]

@manniL I have tried using target: static still same problem

[alex-maereanu]

Same problem here .. any idea anyone?

[alex-maereanu]

Using NGINX on the deployment server

[alex-maereanu]

Ok guys: just add this to your MIME types in NGINX configuration:
application/javascript mjs;
and everything will work as intended. It looks that NGINX doesn't offer MIME types for mjs files OOTB

[moshi-soft]

Thanks @alex-maereanu
in apache

<IfModule mod_mime.c>
  AddType text/javascript js mjs
</IfModule>

inside .htaccess

[Silbad]

Hello, and if I can't change the server configuration, what can I do? Can we build in simple js files?

[Eliophot]

Hello @moshi-soft, Apache method don't work for me...

[moshi-soft]

@Silbad @Eliophot If you are using apache server then .htaccess is a file for product/application based configuration file.
Create a .htaccess file inside your application and paste

<IfModule mod_mime.c>
  AddType text/javascript js mjs
</IfModule>

If doesn't work make sure your apache mod_rewrite is enabled

[Eliophot]

@moshi-soft thanks, yes I did that but it doesn't work (I put the htaccess in the root of the server)

<IfModule mod_rewrite.c>
    RewriteCond %{HTTP:X-Forwarded-Proto} !https
    RewriteCond %{HTTPS} off
    RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

    RewriteCond %{HTTP_HOST} !^www\. [NC]
    RewriteRule (.*) https://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>
<IfModule mod_mime.c>
  AddType text/javascript js mjs
</IfModule>

It's a plesk server (phusion passenger), the rewrite works, not the addtype command although the mod_mime is activated...

[danielroe]

I've opened nuxt/framework#6505 to allow this to be done more easily (see PR description).

But for now you can implement like this:

nuxt.hook('vite:extendConfig', (config, { isClient }) {
  if (isClient) {
    // rc6
    config.build.rollupOptions.output.chunkFileNames = '[hash].js'
    // rc7
    config.build.rollupOptions.output.chunkFileNames = '_nuxt/[hash].js'
  }
})

[Eliophot]

@danielroe
I had this in nuxt.config.ts

    hooks: {
        'vite:extendConfig'(config, { isClient }) {
            if (process.env.NODE_ENV !== 'development' && isClient) {
                // rc6
                config.build.rollupOptions.output.chunkFileNames = '[hash].js'
                // rc7
                config.build.rollupOptions.output.chunkFileNames = '_nuxt/[hash].js'
            }
        }
    },

thanks, js files are build ^^
But _nuxt folder is call two times :

Any ideas ?

[danielroe]

you are meant to pick a line based on whether you have rc6 or rc7 installed, not include both

[Eliophot]

(-_-) sorry
ok I'll try with the new rc7

[Eliophot]

Test rc6

[danielroe]

Yes. You need to use RC7 with new vue-bundle-renderer to have a .js file extension.

[Eliophot]

Test rc7, only one more error, we're almost there ^^

[Eliophot]

Ok, it works !! with :

    hooks: {
        'vite:extendConfig'(config, { isClient }) {
            if (process.env.NODE_ENV !== 'development' && isClient) {
                config.build.rollupOptions.output.chunkFileNames = '_nuxt/[hash].js'
                config.build.rollupOptions.output.entryFileNames = '_nuxt/entry.[hash].js'
            }
        }
    },

Thanks !!!!!!

[arthurducept]

Ok, it works !! with :

    hooks: {
        'vite:extendConfig'(config, { isClient }) {
            if (process.env.NODE_ENV !== 'development' && isClient) {
                config.build.rollupOptions.output.chunkFileNames = '_nuxt/[hash].js'
                config.build.rollupOptions.output.entryFileNames = '_nuxt/entry.[hash].js'
            }
        }
    },

Thanks !!!!!!

(old comment)
I've got this error when I try your solution :/

Could you share your nuxt.config.ts (or .js) ?

EDIT :

I've found where was the problem.
I needed to change the mime_types file in my nginx configuration from :
application/javascript js mjs;
to :
application/javascript mjs js;

After restarting the service, it worked with this nuxt.config.ts :

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr: true,
})

[danielroe]

@arthurducept Ensure you are on rc8, or you can omit the _nuxt/ prefix.

[arthurducept]

@danielroe I didn't have to, i just wrote the mime_types in the wrong order in my nginx configuration. It worked without changing the nuxt.config.ts after that. I edited my previous comment, hoping it will help someone else

[lboh-onv]

In my case, this problem appeared after upgrading the rc-version and deleting the .nuxt/dist directory fixed the issue

[v-romanyuk]

@danielroe I'm still having that issue in the generate mode on rc8.

[gezichenshan]

@danielroe I am using rc6 and my configuration is like this:

hooks: {
    "vite:extendConfig"(config, { isClient }) {
      if (process.env.NODE_ENV !== "development" && isClient) {
        // rc6
        config.build.rollupOptions.output.chunkFileNames = "[hash].js"
        config.build.rollupOptions.output.entryFileNames = "[hash].js"
      }
    },
  },

After running generate and serve the .output/public locally I got

[danielroe]

@gezichenshan #14104.

[yuxufm]

in Apache server.

if you got this message:

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.

You need to usa an .htaccess file or extend your Apache config file with the following htaccess directive in order for the server to output files with the mjs extension with the correct MIME type:

<IfModule mod_mime.c>
  AddType text/javascript js mjs
</IfModule>

Of course, mod_mime needs to be installed and enabled for this to work.

[wzc520pyfm]

I had a similar problem with nuxt3.0.0-rc.11, but it disappeared after I cleared the browser cache.