Webpack modules not loading on my production/staging server while on my local working perfectly

[merianos]

• Laravel Mix Version: 5.0.9

Description:

Hi,

I am quite new to webpack modules (I am not sure if I call them modules correctly but I will explain later what I mean) and I am faced with a very weird issue.

Let me first explain what I have so far.

Currently I have a webpack.mix.js file with the following contents:

let mix = require("laravel-mix");

mix.webpackConfig(
    {
        output: {
            // this is the path I deploy the compiled assets on my staging/production servers
            publicPath: "/web-assets/themes/rr-corfu-real-estate_child/assets/dist/",
            filename: '[name].js',
            chunkFilename: 'js/modules/[name].js'
        }
    }
);

mix.setPublicPath("dist");
mix.js("src/js/app.js", "js");

then in the path assets/src/js I have the following files:

assets/
    src/
       js/
           theme/
               modules/
                   media-header.js
               shortcodes/
                   rr-post-card.js
           app.js

The two js files under the theme folder containing code like that:

// assets/src/js/theme/modules/media-header.js
export class MediaHeader {
    // class code here
}

// assets/src/js/theme/shortcodes/rr-post-card.js
export class RrPostCard {
    // class code here
}

and finally in my app.js file I have the following code:

// assets/src/js/app.js
import domReady from "@wordpress/dom-ready";

domReady(
    () => {
        const rrCardLinks = document.querySelectorAll('.rr-links');
        if ( 0 < rrCardLinks.length ) {
            import(/* webpackChunkName: "rr-card-link" */ "./theme/shortcodes/rr-post-card").then(
                 ({RrPostCard}) => {
                     new RrPostCard(rrCardLinks);
                 }
             );
        }

        const rrMediaHeaders = document.querySelectorAll(".media-header");
        if (0 < rrMediaHeaders.length) {
            import(/* webpackChunkName: "media-header" */ "./theme/modules/media-header").then(
                ({MediaHeader}) => {
                    new MediaHeader(rrMediaHeaders);
                }
            );
        }
    }
);

Finally when I compile this the output generated is the following:

assets/
    dist/
        js/
            modules/
                media-header.js
                rr-card-link.js
            app.js

The above code on my local environment it works perfectly. But when I go on staging/production I get the following error:

At the same time, if I click the link https://SITE-DOMAIN/web-assets/themes/THEME-NAME/assets/dist/js/modules/rr-card-link.js the file content is loading properly.

Is there any idea why I have that issue or how I could solve it ?

Thank you all in advance.

[tomosterlund]

Exact same error observed in our production app, first using v. 6.0.25. We then downgraded to 6.0.19 to see if the error had something to do with the updated Webpack-dependency, but this did not help.

[Moriarty1982]

Did I see this right that your code try to load the assets from the 'src' directory instead of the 'dist' directory?

Btw. what happend when you write it like so:

const mix = require("laravel-mix")

mix.setPublicPath("dist")

mix.webpackConfig({
  output: {
    publicPath: "/assets/dist/",
    chunkFilename: 'js/modules/[name].js'
  }
})

mix.js("src/js/app.js", "js")
  .version()