Laravel failed to load module script app.js

Question

I am deploying a Laravel 10.x project to production (only use Blade, not Mix). After successfully accessing the domain, I got the following error, and my UI was broken:

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

Here's my terminal output after running npm run dev.

  VITE v5.2.8  ready in 479 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.19.0.4.1:5173/
  ➜  press h + enter to show help

  LARAVEL v10.48.4  plugin v1.0.2

  ➜  APP_URL: https://my-domain.com

vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/scss/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        host: true,
        port: 5173,
    strictPort: true,
        origin: 'my-domain.com',
        cors: { origin: "*" },

        hmr: {
            host: ‘my-domain.com',
        },
        watch: {
            usePolling: true,
            ignored: ['**/vendor/**'],
        },
    },
});

docker-compose.yml

services:
  app:
    container_name: app
    build: docker/php
    volumes:
      - .:/var/www
    ports:
      - 8000:8000
  nginx:
    image: nginx
    container_name: nginx
    ports:
      - 80:80
    volumes:
      - .:/var/www
      - docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
    working_dir: /var/www
    depends_on:
      - app
  db:
    image: mysql:8
    container_name: db
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
      - docker/mysql/default.cnf:/etc/mysql/conf.d/default.cnf
    ports:
      - 3306:3306

  npm:
    image: node:alpine
    container_name: node
    restart: unless-stopped
    tty: true
    volumes:
      - ./:/var/www
    ports:
      - "5173:5173”

I've tried to edit vite.config.js many times, but I still have no luck.

Answer 1

I fixed it.

The reason is because my nodejs works using docker, so when i run npm run build/dev, my public/build or public/hot folder has the ownership permission of the docker user

-> i need to change the owner

chown -R $USER:$USER public/