problem with mix

Posted 10 months 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.

Reply to

Use Markdown with GitHub-flavored code blocks.