Include node_modules in Project Laravel using Webpack

Question

I know this is a dumb question. But I have followed the tutorial in Laravel on how to include node_modules into my project. I already configured inside my

resources/assets/js/app.js

require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));

and configured in my webpack.mix.js

mix.scripts([
    'resources/assets/js/app.js',
    'resources/assets/js/testvue.js'
], 'public/js/app.js');

However, when I try to run my code I always get a Uncaught ReferenceError: require is not defined

Is there something that I need to configure with Webpack?

Thanks

@vizsatiz I think not. Can you help me? The documentation from Laravel is lacking. And It is my first time using Webpack — drake24
– drake24, Commented Jul 21, 2018 at 9:01
I have not worked on laravel yet, but I have enabled require in angular app before. So with that limited knowledge I know you should add require js to your dependencies. You can refer requirejs.org/docs/start.html on how to do that. If you really want it, I can explain that as an answer to this question — vizsatiz
– vizsatiz, Commented Jul 21, 2018 at 10:01
What version of Node and npm do you have installed? What operating system are you using? Are you getting this error in the cli or the browser? — Rwd
– Rwd, Commented Jul 21, 2018 at 10:56
@RossWilson Windows 10, Yes on Google Chrome's console. Node 10.2.1, NPM 5.6.0. Really don't have a clue on how to fix it. — drake24
– drake24, Commented Jul 22, 2018 at 10:51

Rwd · Accepted Answer · 2018-07-22 16:25:07Z

1

Since you're running mix.scripts(...) you code won't end up being transpiled and require statements won't actually work. scripts is mainly used to simply concatenate and minify js files.

You should instead use mix.js(...):

Change

mix.scripts([
    'resources/assets/js/app.js',
    'resources/assets/js/testvue.js'
], 'public/js/app.js');

To

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

https://laravel.com/docs/5.6/mix#working-with-scripts

answered Jul 22, 2018 at 16:25

Rwd

35.3k7 gold badges71 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

drake24 Over a year ago

Thank YOU!!!! it worked!! :) I thought both the mix.scripts and mix.js are the same.

Rwd Over a year ago

@drake24 Glad I could help. Sorry I didn't notice it sooner.

Collectives™ on Stack Overflow

Include node_modules in Project Laravel using Webpack

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related