heremiguel's avatar

Problem with webpack mix and external libraries, also jQuery not defined

Hi guys, I am having few issues trying to understand how mix webpack works:

I have got an existing project which uses some libraries which I have got in my /resources/js folder I have tried to add them to the bootstrap.js like this:

require('./bootstrap');

require('scrollreveal.min'); require('contact-form'); require('newsletter-form'); require('jquery.ajaxchimp.min'); require('jquery.backgroundvideo.min');

all those files are in the same folder as bootstrap.js

and doesn't work.

My webpack.min.js looks like these:

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

I want to take advantage of webpack funcionality, having only one js file in the application

other issue I am having is with the app.scss file, I have the following:

// Fonts @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700');

// Variables @import 'variables';

// Bootstrap @import '~bootstrap/scss/bootstrap';

@import "~components-font-awesome/scss/fontawesome.scss";

// template files @import '/resources/css/coming-soon/style.css'; @import '/resources/css/coming-soon/responsive.css';

after compiling I have received this error in the browser: http://localhost/resources/css/coming-soon/style.css net::ERR_ABORTED 404 (Not Found)

0 likes
4 replies
heremiguel's avatar

if I do this:

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.combine([
        'resources/js/coming-soon/plugins/scrollreveal.min.js',
        'resources/js/coming-soon/plugins/contact-form.js',
        'resources/js/coming-soon/plugins/newsletter-form.js',
        'resources/js/coming-soon/plugins/jquery.ajaxchimp.min.js',
        'resources/js/coming-soon/plugins/jquery.countdown.min.js',
        'resources/js/coming-soon/plugins/jquery.backgroundvideo.min.js',
        'resources/js/coming-soon/plugins/prefixfree.min.js',
        'resources/js/coming-soon/custom.js',
        'resources/js/cookiealert.js'
], 'public/js/app.js')
.combine([
    'resources/css/coming-soon/style.css',
    'resources/css/coming-soon/responsive.css',
    'resources/css/coming-soon/icons/linea.css',
    'resources/css/cookiealert.css',
], 'public/css/app.css');

I get:

Uncaught ReferenceError: jQuery is not defined

and:

localhost/:46 GET http://localhost/resources/css/coming-soon/style.css net::ERR_ABORTED 404 (Not Found)

heremiguel's avatar

Thank you!! that one solved the problem with the CSS.

Now in order to avoid the jQuery not defined, I am loading jquery before the main .js, but I don't think that's the right answer because bootstrap.js is loading jquery as well

I am doing this:

And no more "jQuery not defined" errors, but, my understanding is jQuery is loaded here:

try { window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery');

require('bootstrap');

} catch (e) {}

Please or to participate in this conversation.