Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Laravel Uncaught ReferenceError webpackJsonp is not defined at app.js:1

So I'm getting the following error on my browser console line when I'm testing my Laravel 5.4 website:

Uncaught ReferenceError: webpackJsonp is not defined at app.js:1

Now, to be honest, I have almost no idea about webpack and related, I just follow the instructions to compile the assets and usually everything works...

Anyway... I'm using Laravel 5.4 and have swapped out bootstrap3 for bootstrap4. Otherwise everything is pretty much as it is in the default laravel setup.

my webpack.mix.js looks like this:

mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue','tether','bootstrap'])
.sass('resources/assets/sass/app.scss', 'public/css');

my assets/js/app.js (default comments removed for readability)

require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
    el: '#app'
});

my assets/js/bootstrap.js (default comments removed for readability)

window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
require('bootstrap');
window.Vue = require('vue');
window.axios = require('axios');
window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

my main layout blade file at the bottom

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/vendor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

If you guys can think of anywhere else which might be the cause, let me know and I'll update with code snippets.

Sorry about the lack of other info, I've had a poke around, and I'm honestly completely stumped as to what might be wrong or how I can fix it.

like image 495
Kieran Avatar asked Apr 09 '17 08:04

Kieran


1 Answers

And I was stupid. Didn't read the documentation properly.

Mainly the bit that said:

To avoid JavaScript errors, be sure to load these files in the proper order:

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

I added the manifest.js and reordered, and it all works now.

like image 121
Kieran Avatar answered Oct 03 '22 04:10

Kieran