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

Prevent JSON.parse() function from stripping away any trailing zeros in a JSON string dataset

How to execute a system command or external command in Node.js

Executing numerous tests on a single response using Node.js along with Chai, Mocha, and Should

Unable to generate package.json file following Node installation

Make sure that a specific script is loaded prior to another script

Having trouble displaying a background image on a React application

What is the best way to assign the result of a promise to a variable?

Keeping an HTML field constantly refreshed with dynamic content from Django

Apologies, but the development JavaScript bundle could not be generated due to an unexpected token error with code #981

Selection pseudo selectors for tooltips are a great way to provide additional

The specified property 'slug' is not found within the designated type 'ParsedUrlQuery | undefined'

The HTTP request is malfunctioning in a different location

How can express.js be properly installed using typescript?

Adjusting the size of an object as the page dimensions change

The dynamic duo: Formik meets Material-UI

Connecting Ember controllers with views/elements

The command 'webpack-dev-server' is not valid and cannot be executed as an internal or external command, operable program, or batch file

The error message thrown is: "TypeError - attempting to call an undefined function

The content of package.json should adhere to the JSON format strictly, rather than being in

Comparing JSON and JavaScript object arrays: Exploring the differences in outcomes and strategies for achieving desired results