Ara's avatar
Level 3

Laravel Mix not found

Hey guys,

So I am trying to run yarn run dev but I keep getting this error:

> @ development /home/vagrant/code/kin-ball-v4
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

/home/vagrant/code/kin-ball-v4/node_modules/webpack-cli/bin/cli.js:93
                throw err;
                ^

TypeError: Cannot read property 'scripts' of undefined

Here is my webpack.mix.js file:

const {mix} = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.scripts([
    'bower_components/jquery/dist/jquery.js',
    'bower_components/chart.js/dist/Chart.js',
    'bower_components/toastr/toastr.js',
    'bower_components/datatables.net/js/jquery.dataTables.js',
    'bower_components/datatables.net-bs/js/dataTables.bootstrap.js',
    'bower_components/select2/dist/js/select2.full.js',
    'bower_components/select2/dist/js/i18n/fr.js',
    'bower_components/summernote/dist/summernote-bs4.js',
    'bower_components/summernote/dist/lang/summernote-fr-FR.js',
    'node_modules/pretty-checkbox-vue/dist/pretty-checkbox-vue.min.js',
], 'public/js/admin/bower_components.js');

mix.scripts([
    'resources/js/admin/popper.min.js',
    'resources/js/admin/bootstrap.js',
    'resources/js/admin/perfect-scrollbar.jquery.min.js',
    'resources/js/admin/waves.js',
    'resources/js/admin/sidebarmenu.js',
    'public/js/admin/plugins/tether.min.js',
    'resources/js/admin/custom.js',
    'resources/js/admin/icheck.js',
    'resources/js/admin/icheck.init.js',
], 'public/js/admin/app.js');

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

mix.styles([
    'bower_components/toastr/toastr.css',
    'bower_components/dataTables.net-dt/jquery.dataTables.css',
    'bower_components/select2/dist/css/select2.css',
    'bower_components/summernote/dist/summernote-bs4.css',
], 'public/css/admin/bower_components.css');

mix.sass('resources/sass/admin/eliteadmin/style.scss', 'public/css/admin/theme.css')
    .options({
        processCssUrls: false
    });

mix.sass('resources/sass/admin/app.scss', 'public/css/admin/app.css')
    .options({
        processCssUrls: false
    });

mix.scripts([
    'resources/vendor/modernizr/modernizr.min.js',
    'resources/vendor/jquery/jquery.min.js',
    'resources/vendor/jquery.appear/jquery.appear.min.js',
    'resources/vendor/jquery.easing/jquery.easing.min.js',
    'resources/vendor/jquery-cookie/jquery-cookie.min.js',
    'resources/vendor/bootstrap/js/bootstrap.bundle.min.js',
    'resources/vendor/common/common.min.js',
    'resources/vendor/jquery.validation/jquery.validation.min.js',
    'resources/vendor/jquery.easy-pie-chart/jquery.easy-pie-chart.min.js',
    'resources/vendor/jquery.gmap/jquery.gmap.min.js',
    'resources/vendor/jquery.lazyload/jquery.lazyload.min.js',
    'resources/vendor/isotope/jquery.isotope.min.js',
    'resources/vendor/owl.carousel/owl.carousel.min.js',
    'resources/vendor/magnific-popup/jquery.magnific-popup.min.js',
    'resources/vendor/vide/vide.min.js',
    'resources/vendor/vivus/vivus.min.js',
    'resources/js/frontend/theme.js',
    'resources/vendor/rs-plugin/js/jquery.themepunch.tools.min.js',
    'resources/vendor/rs-plugin/js/jquery.themepunch.revolution.min.js',
    'resources/js/frontend/custom.js',
    'resources/js/frontend/theme.init.js',
], 'public/js/frontend/app.js');

mix.styles([
    'resources/vendor/bootstrap/css/bootstrap.min.css',
    'resources/vendor/animate/animate.min.css',
    'resources/vendor/linear-icons/css/linear-icons.min.css',
    'resources/vendor/owl.carousel/assets/owl.carousel.min.css',
    'resources/vendor/owl.carousel/assets/owl.theme.default.min.css',
    'resources/vendor/magnific-popup/magnific-popup.min.css',
    'resources/vendor/rs-plugin/css/settings.css',
    'resources/vendor/rs-plugin/css/layers.css',
    'resources/vendor/rs-plugin/css/navigation.css',
], 'public/css/frontend/vendor.css');


mix.sass('resources/sass/frontend/theme.scss', 'public/css/frontend');

mix.copy('node_modules/@fortawesome/fontawesome-pro/webfonts', 'public/fonts/font-awesome-5');
mix.copy('bower_components/summernote/dist/font', 'public/css/admin/font/');

if (mix.inProduction()) {
    mix.version();
}

I am not sure why I keep getting this error...

0 likes
5 replies
bobbybouwmann's avatar
Level 88

I'm not a webpack master or something, but I think the first line should look like this:

const mix = require('laravel-mix');

Also in most cases just deleting the node_modules directory and installing everything again might fix it ;)

munazzil's avatar

Use below in your main.blade.php,

         <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
         <script src="{{ mix('js/app.js') }}"></script>

and then run below commands,

          npm run dev
Ara's avatar
Level 3

@bobbybouwmann I took it directly from the Laravel framework webpack. But I'll try it with the brackets. I already tried deleting and reinstalling non modules.

EDIT: Well, you were right. I looked into the webpack of the latest tags and the curly brackets were removed... I spent over an hour trying to figure this out -.-. Thanks!

Ara's avatar
Level 3

@munazzil Not sure how that would work. I already have the script tags in my layouts pages

Please or to participate in this conversation.