CODEWITHSUNDEEP
javascriptlaravelnpmlaravel-mix
Ian
Ian

Reputation: 3666

Laravel mix compile - class not found

After moving from Laravel 5.3 to 5.4 I am working on moving over to webpack.

It compiles fine however when loading up the page it always shows

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 pasted binned the compiled app.js, it looks as if it is compiling as Layout is there, however I am not sure as to why it's not loading it 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);
            })
    }
}

Upvotes: 1

Views: 2494

Answers (2)

Ian
Ian

Reputation: 3666

I finally managed to figure this out by adding the following into Layout.js

module.exports = Layout;

Then by adding into app.js 

import * as _layout from './Layout';

const Layout = new _layout();

Upvotes: 2

Hussein Duvigneau
Hussein Duvigneau

Reputation: 541

I haven't used require in a long time so I'm rusty, but feel like you're using require wrong.

Few suggestions..

  1. Try require('./layout.js') inside main.js

  2. Even then, I get the feeling you need to store the require as a value.. so if my first suggestion fails, try: let layout = require('./layout.js'); instead of new Layout();

  3. If those fail (or not), read up on how to do imports, since that's how things are done now.

Upvotes: 0

Related Questions