How to load the angular js version 2 from the laravel vite instead of the mix?

I have setup the vite and removed the mix and scss is loading and working with the laravel but the angular js version 2 is breaking. How can i setup the order as it is and avoid any siteApp issue form the angular itself this is how it was setup form the webpack.

let mix = require('laravel-mix');

mix
	.sass('resources/assets/desktop/sass/app.scss', 'public/desktop/css/app.css')
	
    .styles([
        'resources/assets/desktop/css/vendor/jquery-ui.min.css',
        'resources/assets/desktop/css/vendor/colorbox.css',
        'resources/assets/desktop/css/vendor/croppie.min.css',
        'resources/assets/desktop/css/vendor/slick.css',
        'resources/assets/desktop/css/vendor/animate.css',
        'resources/assets/desktop/css/vendor/aria-accordion.css',
        'resources/assets/desktop/css/vendor/sm-core-css.css',
        'resources/assets/desktop/css/vendor/fSelect.css',
        'resources/assets/desktop/css/vendor/css-menu.css',
        'resources/assets/desktop/css/vendor/easy-responsive-tabs.css',
        'resources/assets/desktop/css/vendor/select2.min.css',
        'resources/assets/desktop/css/vendor/jquery.fileupload-ui.css',
        'resources/assets/desktop/css/vendor/jquery.fileupload.css',
		'resources/assets/desktop/css/vendor/selectric.css',
		'resources/assets/desktop/css/vendor/draganddrop.css',
		'resources/assets/desktop/css/vendor/jquery.datetimepicker.css',
		'resources/assets/desktop/css/vendor/jquery-editable.css',
		'resources/assets/desktop/css/vendor/daterangepicker.css',
		'resources/assets/desktop/css/vendor/font-awesome.min.css',
		'resources/assets/desktop/css/vendor/yakuhanjp-noto.min.css',
		'resources/assets/desktop/css/vendor/video-js.min.css', // VideoJS Player Library
		'resources/assets/desktop/css/vendor/videojs-vr.css', // VideoJS VR Plugin
    ], 'public/desktop/css/vendor.css')
    
    .babel([
        'resources/assets/desktop/js/vendor/modernizr.custom.js',
        'resources/assets/desktop/js/vendor/jwplayer.min.js',
        'resources/assets/desktop/js/vendor/chart.min.js',
        'resources/assets/desktop/js/vendor/chartjs-plugin-datalabels.min.js'
    ], 'public/desktop/js/head-scripts.js')
    
	.babel([
        'resources/assets/desktop/js/vendor/jquery.js',
        'resources/assets/desktop/js/vendor/jquery-migrate.min.js',
		'resources/assets/desktop/js/vendor/moment.min.js',
		'resources/assets/desktop/js/vendor/moment-timezone.min.js',
        'resources/assets/desktop/js/vendor/lodash.min.js',
        'resources/assets/desktop/js/vendor/angular.js',
        'resources/assets/desktop/js/vendor/jquery-ui.min.js',
        'resources/assets/desktop/js/vendor/jquery.ui.widget.js',
        'resources/assets/desktop/js/vendor/angular-resource.js',
        'resources/assets/desktop/js/vendor/angular-sanitize.min.js',
        'resources/assets/desktop/js/vendor/slick.min.js',
        'resources/assets/desktop/js/vendor/colorbox.js',
        'resources/assets/desktop/js/vendor/jquery.dlmenu.js',
        'resources/assets/desktop/js/vendor/aria-accordion.js',
        'resources/assets/desktop/js/vendor/jquery.custom-file-input.js',
        'resources/assets/desktop/js/vendor/jquery.smartmenus.js',
        'resources/assets/desktop/js/vendor/fSelect.js',
        'resources/assets/desktop/js/vendor/easyResponsiveTabs.js',
		'resources/assets/desktop/js/vendor/select2.min.js',
        'resources/assets/desktop/js/vendor/ja.js',
		'resources/assets/desktop/js/vendor/select2.multi-checkboxes.js',
        'resources/assets/desktop/js/vendor/jquery.multi-select.js',
        'resources/assets/desktop/js/vendor/croppie.min.js',
        'resources/assets/desktop/js/vendor/load-image.all.min.js',
        'resources/assets/desktop/js/vendor/jquery.blueimp-gallery.min.js',
        'resources/assets/desktop/js/vendor/canvas-to-blob.min.js',
        'resources/assets/desktop/js/vendor/jquery.iframe-transport.js',
        'resources/assets/desktop/js/vendor/jquery.fileupload.js',
        'resources/assets/desktop/js/vendor/jquery.fileupload-process.js',
        'resources/assets/desktop/js/vendor/jquery.fileupload-image.js',
        'resources/assets/desktop/js/vendor/jquery.fileupload-audio.js',
        'resources/assets/desktop/js/vendor/jquery.fileupload-video.js',
        'resources/assets/desktop/js/vendor/jquery.fileupload-validate.js',
        'resources/assets/desktop/js/vendor/jquery.fileupload-angular.js',
		'resources/assets/desktop/js/vendor/jquery.matchHeight-min.js',
		'resources/assets/desktop/js/vendor/exif-js.js',
		'resources/assets/desktop/js/vendor/draganddrop.js',
        'resources/assets/desktop/js/vendor/angular-chart.js',
		'resources/assets/desktop/js/vendor/jquery.datetimepicker.full.js',
		'resources/assets/desktop/js/vendor/jquery-editable-poshytip.min.js',
        'resources/assets/desktop/js/vendor/jscolor.js',		
		'resources/assets/desktop/js/vendor/daterangepicker.min.js',
		'resources/assets/desktop/js/vendor/clipboard.min.js',
        
        'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
    ], 'public/desktop/js/vendor.js')
    
	.babel([
        'resources/assets/desktop/js/site/app/main.js',
        'resources/assets/desktop/js/site/app/controllers/*.js',
        'resources/assets/desktop/js/site/app/directives/*.js',
        'resources/assets/desktop/js/site/app/services/*.js',
        'resources/assets/desktop/js/site/app/filters/*.js'
    ], 'public/desktop/js/app.js')
    
    .babel([
        'resources/assets/desktop/js/vendor/jquery.js',
        'resources/assets/desktop/js/site/embed/main.js',
    ], 'public/desktop/js/embed.js')
    
    .babel([
        'resources/assets/desktop/js/vendor/jquery.selectric.js',
        'resources/assets/desktop/js/site/site.js',
        'resources/assets/desktop/js/site/access/main.js',
        'resources/assets/desktop/js/site/access-management/main.js',
        'resources/assets/desktop/js/site/access-security/main.js',
        'resources/assets/desktop/js/site/account-subscription/main.js',
        'resources/assets/desktop/js/site/badge/main.js',
        'resources/assets/desktop/js/site/base/header-menu.js',
        'resources/assets/desktop/js/site/blocked-domain/main.js',
        'resources/assets/desktop/js/site/card-payment/main.js',
        'resources/assets/desktop/js/site/category/main.js',
        'resources/assets/desktop/js/site/certificate/main.js',
        'resources/assets/desktop/js/site/coupon/main.js',
        'resources/assets/desktop/js/site/course/main.js',
        'resources/assets/desktop/js/site/course-management/main.js',
        'resources/assets/desktop/js/site/coverpage/main.js',
        'resources/assets/desktop/js/site/dashboard/main.js',
        'resources/assets/desktop/js/site/division/main.js',
        'resources/assets/desktop/js/site/division/open.js',
        'resources/assets/desktop/js/site/division-management/main.js',
        'resources/assets/desktop/js/site/document/main.js',
        'resources/assets/desktop/js/site/emailer/main.js',
        'resources/assets/desktop/js/site/event/main.js',
        'resources/assets/desktop/js/site/general/main.js',
        'resources/assets/desktop/js/site/geographical/main.js',
        'resources/assets/desktop/js/site/goto-meeting-account/main.js',
        'resources/assets/desktop/js/site/home/main.js',
        'resources/assets/desktop/js/site/language/main.js',
        'resources/assets/desktop/js/site/login/main.js',
        'resources/assets/desktop/js/site/message/main.js',
        'resources/assets/desktop/js/site/multimedia/main.js',
        'resources/assets/desktop/js/site/notification/main.js',
        'resources/assets/desktop/js/site/package-management/main.js',
        'resources/assets/desktop/js/site/profile/main.js',
        'resources/assets/desktop/js/site/register/main.js',
        'resources/assets/desktop/js/site/resume-payment/main.js',
        'resources/assets/desktop/js/site/setting/main.js',
        'resources/assets/desktop/js/site/setup-card/main.js',
        'resources/assets/desktop/js/site/test/main.js',
        'resources/assets/desktop/js/site/test-management/main.js',
        'resources/assets/desktop/js/site/transaction/main.js',
        'resources/assets/desktop/js/site/user/main.js',
        'resources/assets/desktop/js/site/user-management/main.js',
    ], 'public/desktop/js/site.js')
    
    .babel([
        'public/desktop/js/app.js',
        'public/desktop/js/site.js',
    ], 'public/desktop/js/platform.js')
    
    .options({
        processCssUrls : false
    });

imrandevbd

12 hours ago

Level 6

The issue here is that Vite treats assets as ES modules by default, whereas your current legacy setup relies on strict, sequential concatenation (mix.babel) where jQuery, Angular, and all those plugins register themselves globally on the window object. If Vite processes them, they run in their own module scopes, breaking dependencies like angular or siteApp because jQuery plugins can't find jQuery, and Angular plugins can't find angular.

Since you have a massive list of legacy jQuery and AngularJS v1/v2 vendors, trying to import them properly via ES modules will be an endless rabbit hole of configuration headaches.

The cleanest solution is to let Vite handle your modern code (like your Sass/CSS), but use Vite's build.rollupOptions to keep bundling these legacy assets into flat files, while forcing them to remain global scripts.

1 like

Shivamyadav

10 hours ago

Level 21

Thanks for the suggestion man, I will give it a try and let you know if this was able to setup or not.

Shivamyadav

7 hours ago

Level 21

My rollup options form the vite config file

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/assets/desktop/css/sass/app.scss',
            ],
            refresh: true,
        }),
    ],
    server: {
        host: '0.0.0.0',           // Allow access from local network / custom domains
        port: 5176,
        cors: {
            origin: [
                'http://manual5.uishare.local',
                'http://127.0.0.1',
                'http://localhost',
                /^https?:\/\/.*\.uishare\.local(:\d+)?$/,  // Allow all subdomains of uishare.local
            ],
            credentials: true,
        },
        hmr: {
            host: 'manual5.uishare.local',
            port: 5176,
        },
    },
    build: {
        rollupOptions: {
            input: {
                'head-scripts': 'resources/js/head-scripts.js',
                'vendor': 'resources/js/vendor.js',
                'app': 'resources/js/app.js',
                'embed': 'resources/js/embed.js',
                'site': 'resources/js/site.js',
            },
            output: {
                format: 'iife',
                entryFileNames: 'desktop/js/[name].js',
                chunkFileNames: 'desktop/js/[name].js',
                assetFileNames: 'desktop/[ext]/[name].[ext]',
            },
        },
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources'),
        },
    },
});

Even I am getting the errors like :

siteApp is not defined $(...).select2 is not a function

$(...).slick is not a function

$ jquery and sometimes angular

Please or to participate in this conversation.