After upgrading from Laravel 5.3 to 5.4, I am currently in the process of transitioning to webpack.
Although it compiles without errors, whenever I try to load the page, I always encounter:
app.a711192….js:125 Uncaught ReferenceError: Layout is not defined at HTMLDocument. (app.a711192….js:125) at i (vendor.19cd2ff….js:2) at Object.fireWith [as resolveWith] (vendor.19cd2ff….js:2) at Function.ready (vendor.19cd2ff….js:2) at HTMLDocument.J (vendor.19cd2ff….js:2)
I have checked the compiled app.js and noticed that Layout is included, but for some reason it's not loading correctly.
webpack.mix.js
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.
|
*/
let npmFolder = './node_modules/';
mix.disableNotifications()
.js('resources/assets/js/app.js', 'public/js')
.scripts([
npmFolder + 'jquery/dist/jquery.min.js',
npmFolder + 'jquery-migrate/dist/jquery-migrate.min.js',
npmFolder + 'bootstrap-sass/assets/javascripts/bootstrap.min.js',
npmFolder + 'axios/dist/axios.min.js'
], 'public/js/vendor.js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/admin/admin.scss', 'public/css')
.version()
;
app.js
require('./layout.js');
require('./main.js');
main.js
$(function()
{
let instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}
});
let layout = new Layout();
$("button[data-layout-action]").click(function(e)
{
let action = $(this).attr('data-layout-action');
console.log(action);
switch(action)
{
case 'new-page':
layout.newPage();
break;
case 'edit-page':
layout.editPage();
break;
default:
alert('Invalid layout action ' + action)
}
});
});
layout.js
class Layout {
constructor() {
}
newPage() {
this.loadPage({});
}
editPage() {
}
loadPage(layout) {
axios.post('/layout/generate', {
layout
})
.catch(error => {
alert(error);
})
}
}