Resolving error "Avoid serving legacy JavaScript to modern browsers".

Hi guys, I need some help from someone more expert than me.I need to resolve the Lighthouse error "Avoid serving legacy JavaScript to modern browsers".

What is the correct way of resolving it with Vite? I've found some solutions online but I seem to miss something obvious perhaps.

I'm using @vite(['resources/css/app.css', 'resources/js/app.js']) in the <head> of my layout.blade.php file to import the Vite's assets.

I've found this solution on Laravel's github, so I created a ViteServiceProvider with the suggested code in the boot() method and registered it in config/app.php but it didnt' resolve the issue.

This is my vite.config.js file:

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

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
    legacy({
      targets: ['defaults', 'not IE 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id
              .toString()
              .split('node_modules/')[1]
              .split('/')[0]
              .toString();
          }
        },
      },
    },
  },
});

As I said I probably miss something obvious but I'm not an expert at all. Thank you for any help!

Sira

2 years ago

Level 2

Does anybody know how to fix this issue?

Please or to participate in this conversation.