Best practices for incorporating and leveraging node packages with Laravel Mix

Question

Best practices for incorporating and leveraging node packages with Laravel Mix

As I embark on my Laravel (v 8.x) Mix project, I am encountering challenges when it comes to incorporating JavaScript from node modules.

To kick things off, here is a snippet from my webpack.mix.js:

mix.js('node_modules/mxgraph/javascript/mxClient.min.js', 'public/js');
mix.js('resources/js/*.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]).version();

Then, within my app.js, I have the following setup:

import Canvas from './canvas';

require('mxgraph');

const canvas = new Canvas();

This script also imports canvas.js:

export default class Canvas {
    constructor() {
        this.container = document.getElementById('graphContainer');
        if (!mxClient.isBrowserSupported())
        {
            // Displays an error message if the browser is not supported.
            alert('Browser is not supported!');
        }
.
.
.
    }
}

Furthermore, in the Scripts section of my Blade layout:

<script src="{{ mix('js/mxClient.min.js') }}" defer></script>
<script src="{{ mix('js/app.js') }}" defer></script>

Upon loading the page, the console throws the following error:

Uncaught ReferenceError: mxClient is not defined
    at new Canvas (app.js:3866)
    at Module../resources/js/app.js (app.js:3813)
    at __webpack_require__ (app.js:114081)
    at app.js:114143
    at app.js:114149

The variable mxClient is indeed present in mxClient.min.js, and the reference in Canvas comes after its loading.

I've experimented with different approaches without success. Any insights or suggestions would be highly appreciated.

javascript laravel npm webpack laravel-mix

Answer 1

Answer №1

After much exploration and experimentation, I finally stumbled upon a solution that does the trick. It was inspired by my findings here:

Although my approach may seem a bit cumbersome, it gets the job done, allowing me to proceed with my mxGraph development project.

As a result, I have removed the explicit inclusion of mxgraph in webpack.mix.js, reverting back to the Laravel default setup:

mix.js('resources/js/*.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]).version();

I have also eliminated require('mxgraph'); from app.js, resulting in the following streamlined code:

import Canvas from './canvas';

const canvas = new Canvas();

My revised canvas.js now looks like this:

import mx from 'mxgraph';

const mxgraph = mx({
    mxImageBasePath: './src/images',
    mxBasePath: './src'
});

window.mxGraph = mxgraph.mxGraph;
window.mxGraphModel = mxgraph.mxGraphModel;
window.mxEvent = mxgraph.mxEvent;
window.mxEditor = mxgraph.mxEditor;
window.mxGeometry = mxgraph.mxGeometry;
window.mxRubberband = mxgraph.mxRubberband;
window.mxDefaultKeyHandler = mxgraph.mxDefaultKeyHandler;
window.mxDefaultPopupMenu = mxgraph.mxDefaultPopupMenu;
window.mxStylesheet = mxgraph.mxStylesheet;
window.mxDefaultToolbar = mxgraph.mxDefaultToolbar;

const {mxGraph, mxClient, mxEvent, mxCodec, mxUtils, mxConstants, mxPerimeter, mxRubberband} = mxgraph;

export default class Canvas {
    constructor() {
        let container = document.getElementById('graphContainer');
        if (typeof(mxClient) !== 'undefined') {
            this.draw(container);
        }
    }

    draw (container) {
        if (! mxClient.isBrowserSupported())
        {
            // Display error message for unsupported browser
            mxUtils.error('Browser is not supported!', 200, false);
        }
        else
        {
            // Disable context menu
            mxEvent.disableContextMenu(container);

            // Create graph inside container
            var graph = new mxGraph(container);

            // Enable rubberband selection
            new mxRubberband(graph);

            // Get default parent for inserting cells
            var parent = graph.getDefaultParent();

            // Add cells to model in a single step
            graph.getModel().beginUpdate();
            try
            {
                var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
                var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
                var e1 = graph.insertEdge(parent, null, '', v1, v2);
              
            }
            finally
            {
                // Update display
                graph.getModel().endUpdate();
            }
        }
    }
}

The majority of the code within the draw() method is adapted from an mxGraph "Hello World" demo ().

A big thank you to @codedge for your invaluable assistance!

Answer 2

After much exploration and experimentation, I finally stumbled upon a solution that does the trick. It was inspired by my findings here:

Although my approach may seem a bit cumbersome, it gets the job done, allowing me to proceed with my mxGraph development project.

As a result, I have removed the explicit inclusion of mxgraph in webpack.mix.js, reverting back to the Laravel default setup:

mix.js('resources/js/*.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]).version();

I have also eliminated require('mxgraph'); from app.js, resulting in the following streamlined code:

import Canvas from './canvas';

const canvas = new Canvas();

My revised canvas.js now looks like this:

import mx from 'mxgraph';

const mxgraph = mx({
    mxImageBasePath: './src/images',
    mxBasePath: './src'
});

window.mxGraph = mxgraph.mxGraph;
window.mxGraphModel = mxgraph.mxGraphModel;
window.mxEvent = mxgraph.mxEvent;
window.mxEditor = mxgraph.mxEditor;
window.mxGeometry = mxgraph.mxGeometry;
window.mxRubberband = mxgraph.mxRubberband;
window.mxDefaultKeyHandler = mxgraph.mxDefaultKeyHandler;
window.mxDefaultPopupMenu = mxgraph.mxDefaultPopupMenu;
window.mxStylesheet = mxgraph.mxStylesheet;
window.mxDefaultToolbar = mxgraph.mxDefaultToolbar;

const {mxGraph, mxClient, mxEvent, mxCodec, mxUtils, mxConstants, mxPerimeter, mxRubberband} = mxgraph;

export default class Canvas {
    constructor() {
        let container = document.getElementById('graphContainer');
        if (typeof(mxClient) !== 'undefined') {
            this.draw(container);
        }
    }

    draw (container) {
        if (! mxClient.isBrowserSupported())
        {
            // Display error message for unsupported browser
            mxUtils.error('Browser is not supported!', 200, false);
        }
        else
        {
            // Disable context menu
            mxEvent.disableContextMenu(container);

            // Create graph inside container
            var graph = new mxGraph(container);

            // Enable rubberband selection
            new mxRubberband(graph);

            // Get default parent for inserting cells
            var parent = graph.getDefaultParent();

            // Add cells to model in a single step
            graph.getModel().beginUpdate();
            try
            {
                var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
                var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
                var e1 = graph.insertEdge(parent, null, '', v1, v2);
              
            }
            finally
            {
                // Update display
                graph.getModel().endUpdate();
            }
        }
    }
}

The majority of the code within the draw() method is adapted from an mxGraph "Hello World" demo ().

A big thank you to @codedge for your invaluable assistance!

Answer 3

Answer №2

After some experimenting, I discovered a solution.

Combine files into one

Merge mxClient.min.js and app.js into a single file using the following code:

mix.js(
    [
        "resources/js/app.js",
        "node_modules/mxgraph/javascript/mxClient.min.js",
    ],
    "public/js"
).postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]).version();

Import mxGraph and Canvas

Add this to your app.js:

import "./canvas";

require("mxgraph");

const canvas = new Canvas();

Now run npm run dev without any problems.

Update

I came across an alternative option which might be simpler. Remove mxClient from your webpack.mix.js, only include your app.js.

// app.js

window.mxClient = new require("mxgraph")().mxClient;

let isBrowserSupported = mxClient.isBrowserSupported();

console.log(isBrowserSupported);

Answer 4

After some experimenting, I discovered a solution.

Combine files into one

Merge mxClient.min.js and app.js into a single file using the following code:

mix.js(
    [
        "resources/js/app.js",
        "node_modules/mxgraph/javascript/mxClient.min.js",
    ],
    "public/js"
).postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]).version();

Import mxGraph and Canvas

Add this to your app.js:

import "./canvas";

require("mxgraph");

const canvas = new Canvas();

Now run npm run dev without any problems.

Update

I came across an alternative option which might be simpler. Remove mxClient from your webpack.mix.js, only include your app.js.

// app.js

window.mxClient = new require("mxgraph")().mxClient;

let isBrowserSupported = mxClient.isBrowserSupported();

console.log(isBrowserSupported);

Best practices for incorporating and leveraging node packages with Laravel Mix

Answer №1

Answer №2

Update

Similar questions

Searching through a JSON object on a Laravel web page using JavaScript or AJAX for live filtering purposes

Issues with npm, node-gyp, and gulp encountered while using MAC OS X Yosemite version 10.10.5

Show the response obtained after making a POST request

Utilizing AJAX to dynamically update a div's content by extracting a specific div from the retrieved data

Adjust the color of an SVG icon depending on its 'liked' status

Tips for asynchronously updating a model in TypeScript

What could be causing my surroundings to deteriorate? Encountering a yarn installation issue related to sha

Can I restrict access to all routes except one in vue-router? Is this a safe practice? Should I explore alternative methods for achieving this?

Is it acceptable to include the bundled main.js file in the gitignore for a HUGO project?

Display various child components in a React application depending on the current state

What causes a ReferenceError when attempting to retrieve the class name of a React component?

Retrieve mongodb objects that fall within a specified date range

Firefox won't trigger the `beforeunload` event unless I interact with the webpage by clicking on it

Combining two kebab-case CSS classes within a React component

Filtering out specific properties in an array using Angular

Attempting to transmit JavaScript information to my NodeJS server

What steps should I follow to set JSONP as the dataType for a request in an Angular $http service?

Utilize an image in place of text (script type="text/javascript")

Saving information to a hidden div using jStorage

The file link in Laravel on localhost at http://127.0.0.1:8000 is not functioning properly