require() in bootstrap.js doesn't work

I'm upgrading a web app to Laravel 8 and found that Laravel Mix works quite differently. As we may know, now we need to add .vue() in webpack.mix.js like this:

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

but it makes require() syntax doesn't work, as I have this line in my bootstrap.js

window._ = require('lodash');

then I compile the assets and open the page in the web browser and it shows an error "Page.vue?cfe8:148 Uncaught ReferenceError: _ is not defined"

My questions:

Why is that?
If it doesn't work, why in the bootstrap.js there's that line `window.anything = require(), so it's supposed to work?

Thank you.

coder222

4 years ago

Level 1

Solved this by using import in app.js

import _ from 'lodash'
import Vue from 'vue/dist/vue'

not sure if this is the correct way as app.js is originally required bootstrap.js, and t seems so many issues like this in stackoverflow but haven't really got a solid answer. Some posts mention it should be able to use window.any = require() while some others tell to use import in every component file. And somehow window.axios = require('axios') still works. JS module is confusing...

Please or to participate in this conversation.