p0t4t0
689
2
Mix

problem with mix

Posted 1 year ago by p0t4t0

Hi so I am working on an existing Laravel project and trying to integrate Vue to it. It had this code in its webpack.mix.file before:

mix.scripts([
    'node_modules/jquery/dist/jquery.js',
    'node_modules/bootstrap/dist/js/bootstrap.js',
    'node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js',
    'node_modules/metismenu/dist/metisMenu.js',
    'node_modules/jquery-slimscroll/jquery.slimscroll.js',
    'node_modules/pace-progress/pace.min.js',
    'node_modules/moment/min/moment-with-locales.min.js',
    'resources/assets/js/app.js',
    // 'resources/assets/js/instascan.min.js',
], 'public/js/app.js', './');

To my understanding the scripts method does not convert ES5+ code into Vanilla Javascript so I changed it to the babel method instead. The problem is this method doesn't seem to transpile ES5+ code as opposed to what is mentioned on the docs. Because I get this error in the console (browser) saying that it can't understand the import or require declarations I have in my resources/assets/jsapp.js file. But if I use the js method it works fine except the old jQuery the project had stops working. This is the code I have now:

mix.js('resources/assets/js/app.js', 'public/js/app.js');

And in my app.js file I have:

require('./bootstrap');
require('bootstrap-datepicker');
require('metismenu');
require('jquery-slimscroll');
require('moment');
require('./inspinia');

import Vue from 'vue';
import { store } from './store/store';
import MainComponent from './components/MainComponent.vue';

const app = new Vue({
  el: '#wrapper',
  store,
  components: {
    MainComponent
  }
});

It's weird because I'm not getting errors regarding how $ isn't defined like before in the console but the jQuery the project had before I even touched the project stopped working altogether. What should I do?

PS I should also probably mention that I was getting these errors when running npm run dev or npm run watch before (also, when I run npm run watch it sometimes stops "watching" my code for changes which I am taking as something is definitely going on).

npm Error : EBUSY resource busy or locked and [BABEL] Note: The code generator has deoptimised the styling of "unknown" as it exceeds the max of "500KB".

Please sign in or create an account to participate in this conversation.