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:

    // '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:


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

const app = new Vue({
  el: '#wrapper',
  components: {

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.