Laravel-mix: Possibly a Mix issue with webpack 5.25?

[roddypratt]

• Laravel Mix Version: #.#.# 6.0.13
• Node Version 14.12.0
• NPM Version 1.22.5
• OS:Windows

Description:

Just a heads-up that the latest Webpack build seems to have introduced behaviour that impacts some Mix users. Unclear yet if it's a Mix problem or a Webpack one :(

https://github.com/webpack/webpack/issues/12880

Basically, Webpack loads your modules but doesn't run them...

Steps To Reproduce:

It's complicated...

[obj63mc]

I am getting the same issue, code will compile but when loaded in the browser the JS will not ever actually run.

[6XGate]

I can confirm this happens. Not sure if it's Mix or Webpack.

[runyan-co]

Can also confirm this is happening to me as well. It definitely started when I upgraded node to 15.11.0 and yarn to 1.22.10. Running on macOS Big Sur v11.2.3.

[schrink]

+1

[roddypratt]

To confirm if it's the same issue, look at the foot of the generated js files. If you see something like..

/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["css/mycssfile", /js/vendor"], ...

...referencing css files, it's likely the same issue. You can try removing the css/mycssfile bits, and then the bundles should load and run correctly.

[risingphoenix]

+1

I have downgraded larave-mix to 6.0.10 (my last working version before the update) but nothing change
... one thing I noticed, I have 2 entry points for `compiling:

mix.js('resources/vue/site/main.js', 'js/site.js').vue({ version: 2}); // <-- not working
mix.js('resources/vue/app/main.js', 'js/app.js').vue({ version: 2}); // <-- working
mix.extract();

Only the second script (app.js) when included in the html page works correctly, swapping the JS in webpack.mix makes sites.js works and app.js no.

Hope it helps...

[thecrypticace]

Yeah this is a webpack bug downgrading Mix isn't going to help here. I recommend pinning webpack at 5.24.4 until this issue is fixed.

[runyan-co]

Yeah this is a webpack bug downgrading Mix isn't going to help here. I recommend pinning webpack at 5.24.4 until this issue is fixed.

Appreciate the advice! I've been researching exactly how to pin a dependency, but I seem to be creating more of a mess than helping get Mix working again. If you have a moment and are able, would you mind sharing more specifics on how one would go about pinning the dependency and getting Mix to function temporarily while webpack is being patched? 🙂

[madpilot78]

@runyan-co For yarn I added this:

    "resolutions": {
        "webpack": "=5.24.4"
    },

Looks like npm does not support this natively, this should help:

https://github.com/rogeriochaves/npm-force-resolutions

[thecrypticace]

@runyan-co @madpilot78

No need to use resolutions here. You can either edit your package.json to add "webpack": "5.24.4" to devDependencies or you can run the following:

Yarn: yarn add [email protected] (Note: I also had to add css-loader and postcss-loader after this — it shouldn't be necessary but seemingly is)

NPM: npm install -E [email protected]

[runyan-co]

@runyan-co @madpilot78

No need to use resolutions here. You can either edit your package.json to add "webpack": "5.24.4" to devDependencies or you can run the following:

Yarn: yarn add [email protected] (Note: I also had to add css-loader and postcss-loader after this — it shouldn't be necessary but seemingly is)

NPM: npm install -E [email protected]

Thank you for the suggestion! I'll definitely start there and see if I can get it working. 👍🏻

[madpilot78]

@runyan-co @madpilot78

No need to use resolutions here. You can either edit your package.json to add "webpack": "5.24.4" to devDependencies or you can run the following:

I don't want to avoid using resolutions, I like them, this is exactly what they are for and the meaning of the stanza is clear. Otherwise the "fix" gets lost in a bunch of other unrelated dependencies. Once the problem is fixed I simply remove the resolutions stanza.

Obviously everyone has his own preference.

[runyan-co]

If it helps anyone, I did end up using @madpilot78 's method (thank you, by the way!) and it works well. I use yarn as my package manager, so I didn't have to use the npm-force-resolutions package as yarn natively supports the resolutions option in package.json. 👍🏻

[sunscreem]

I've pinned my webpack to to 5.24.4 but now the extract() mix helper only generates app.js and mix-manifest.js no vendor.js.

[madpilot78]

Webpack issue webpack/webpack#12880 has been fixed, they released version 5.25.1 with the fix, so I think the best solution now is to just upgrade.

[thecrypticace]

Yep, upgrading is the best option now that the fix has been released.

Thanks again @roddypratt for letting us know about this one