Webpack v5: Error: Module.issuerThere was no ModuleGraph assigned to the Module for backward-compat (Use the new API)

[PrOpOvEdNiK]

I use laravel-mix. After switch to 6.0.0-beta release #webpack5 patch was very helpful and worked well for me. Thx) Now I'm upgrade plugin to v3.7.1 and get this error.

To reproduce package.json

{
    "name": "laravel-mix",
    "version": "1.0",
    "description": "",
    "scripts": {
        "dev": "yarn run development",
        "development": "npx mix",
        "watch": "npx mix watch",
        "prod": "yarn run production",
        "production": "npx mix -p"
    },
    "devDependencies": {
        "laravel-mix": "^6.0.0-beta.14",
        "postcss": "^8.1.6",
        "postcss-loader": "^4.0.4",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.29.0",
        "sass-loader": "^10.0.5",
        "svg-spritemap-webpack-plugin": "^3.7.1"
    },
    "main": "app.js",
    "dependencies": {
        "axios": "^0.20.0"
    },
    "browserslist": [
        "last 2 version",
        "> 1%",
        "IE 10"
    ],
    "author": "Sergey Buynitsky",
    "license": "ISC"
}

webpack.mix.js

const mix = require('laravel-mix');
const SVGSpritemap = require("svg-spritemap-webpack-plugin");

mix.webpackConfig({
    plugins: [
        new SVGSpritemap("src/svg/**/*.svg", {
            output: {
                filename: "svg/sprite.svg",
                svgo: {
                    plugins: [{
                        removeStyleElement: true
                    }]
                }
            },
            sprite: {
                prefix: "svg-",
                gutter: 10,
                generate: {
                    title: false,
                }
            },
            styles: {
                filename: "src/sass/include/sprite-svg.scss",
                format: 'data',
                keepAttributes: true,
                variables: {
                    sprites: 'svg-sprites',
                    sizes: 'svg-sizes',
                    variables: 'variables',
                    mixin: 'svg-sprite'
                }
            }
        })
    ]
});

mix.setPublicPath('./public')
    .js('./src/js/app.js', './public/assets/scripts')
    .sass('./src/sass/app.scss', './public/assets/styles');

Full error text

C:\www\_temp\laravel-mix> yarn run dev
yarn run v1.22.5
$ yarn run development
$ npx mix
75% sealing chunk optimization SplitChunksPluginC:\www\_temp\laravel-mix\node_modules\webpack\lib\ModuleGraph.js:676
                                        throw new Error(
                                        ^

Error: Module.issuerThere was no ModuleGraph assigned to the Module for backward-compat (Use the new API)
    at C:\www\_temp\laravel-mix\node_modules\webpack\lib\ModuleGraph.js:676:12
    at Function.getModuleGraphForModule (C:\www\_temp\laravel-mix\node_modules\webpack\lib\ModuleGraph.js:667:18)
    at RawModule.get issuer [as issuer] (C:\www\_temp\laravel-mix\node_modules\webpack\lib\Module.js:271:22)
    at Chunks._checkTest (C:\www\_temp\laravel-mix\node_modules\laravel-mix\src\Chunks.js:197:20)
    at C:\www\_temp\laravel-mix\node_modules\laravel-mix\src\Chunks.js:160:38
    at Array.every (<anonymous>)
    at C:\www\_temp\laravel-mix\node_modules\laravel-mix\src\Chunks.js:160:19
    at C:\www\_temp\laravel-mix\node_modules\webpack-merge\dist\join-arrays.js:40:38
    at C:\www\_temp\laravel-mix\node_modules\webpack-merge\dist\join-arrays.js:40:38
    at checkTest (C:\www\_temp\laravel-mix\node_modules\webpack\lib\optimize\SplitChunksPlugin.js:482:10)
npm ERR! code 1
npm ERR! path C:\www\_temp\laravel-mix
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c "webpack "--progress" "--config=C:\www\_temp\laravel-mix\node_modules\laravel-mix\setup\webpack.config.js""

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\bsv\AppData\Local\npm-cache\_logs\2020-11-10T08_08_10_897Z-debug.log
Done in 6.15s.

[cascornelissen]

Interesting, I'll look into this in the coming days. In the meantime if you want to help:

1. What do you mean with #webpack5 patch? The branch that was available for some time?
2. Can you figure out which version is still working for you? If 3.6.0 is working correctly can you try all of the versions between 3.6.0 and 3.7.1?
3. It would save me quite a bit of time if you can provide a repository that I can check out, run npm install and start to debug the issue so if you have time to provide this that'd be awesome

[PrOpOvEdNiK]

1. Yes. I mean that branch.
2. On 3.6.0 same. And I realized that the problem in "laravel-mix": "^6.0.0-beta.14" too. But it will not work for sure because mix don't work on <beta.14 at now. On beta.10 and #webpack5 branch it worked well.
3. Here it is. With "laravel-mix": "^5.0.7" (webpack4) that webpack.mix.js works well.

[cascornelissen]

Took some time trying to debug this but I can't get the repository to run. First it has an invalid version in package.json but even after fixing that I'm running into command not found: mix errors. Keep in mind that I have never used Laravel Mix so I have no idea what I'm doing, I was hoping to be able to run npm start or npm run build and see the problem occur so this isn't helping me much.

The stacktrace in one of the previous messages includes references to the SplitChunksPlugin but the tests regarding that plugin seem to be running without any issues and I can't seem to reproduce it any other way.

So please update the repo in such a way that running npm start actually triggers the problem and I can look into it again.

[PrOpOvEdNiK]

Sorry, I forgot to write how to run it. After npm install you can run npm run dev or npm run prod or just npx mix. This take the same effect. I fixed the version to 3.7.1 and checked again - the problem repeats.

[cascornelissen]

Just checked it out again, ran into the same invalid version in package.json:

$ npm run dev
npm ERR! Invalid version: "1.0"

Apparently that was also preventing the npm dependencies from getting installed so I'm now able to reproduce the issue after fixing the value in package.json.

[PrOpOvEdNiK]

It's probably just the package name, not version. Name "laravel-mix" conflict with original package. Just change it. It's strange that I had no problem with it. omg... shame on me

[cascornelissen]

It's definitely the version, according to the spec the version should be parseable by the semver package and '1.0' is not. I fixed it by changing it to '1.0.0' in package.json.

Version must be parseable by node-semver, which is bundled with npm as a dependency. (npm install semver to use it yourself.)

I can image you're using Yarn and there might be other rules.

---

With regards to the problem it might indeed be a problem in this plugin. The fact that you're using mix.sass() enables the Sass preprocessor available in laravel-mix which in turn adds tests for certain chunks and ultimately we end up in this method which causes the error to be thrown.

https://github.com/JeffreyWay/laravel-mix/blob/95fd2384910f1e48deab0283db52a2f03575985f/src/Chunks.js#L197-L199

The line in question checks for module.issuer and then fails on the module that was added by this plugin because apparently the module's issuer isn't in the ModuleGraph for some reason. I'll continue investigating 🕵🏼

[cascornelissen]

I'm not 100% sure this problem can be fixed in this plugin, it was quite a rabbit hole to say the least...

• Module.issuer is deprecated in Webpack 5 and should be replaced by something like compilation.moduleGraph.getIssuer(module).
• The module that is generated by this plugin is a dummy one so it doesn't really have an issuer
• I've tried setting module.issuer (e.g. to compilation.modules.values().next().value which is the first module in the compilation) as a workaround but this in itself throws the same error because it triggers the setter.
  • And even if this worked it would throw a deprecation warning: https://github.com/webpack/webpack/blob/7415a618460795874fdf95c8f03363ea96709d52/lib/Module.js#L278-L284
• As you can see in the previous code it executes ModuleGraph.getModuleGraphForModule().setIssuer() which would translate to compilation.moduleGraph.setIssuer() and setting that to the first module in the compilation as explained in point 3 doesn't solve the problem because it sets the issuer in the Module Graph, not on the module itself which is what laravel-mix is looking at.

So to conclude, IMO the code in laravel-mix should be updated to use the new ModuleGraph, they might have a plan for that since laravel-mix isn't stable yet w.r.t. Webpack 5 support yet. Feel free to create an issue on their side and reference this thread. I'm closing this one and am definitely open for a further discussion if any ideas for workarounds pop up.

[danielbachhuber]

@PrOpOvEdNiK I'm running into this issue now. Did you find a workaround, or discuss with @JeffreyWay?

[PrOpOvEdNiK]

@danielbachhuber no. We had rollback to the laravel-mix 5 in projects where there is svg-spritemap-webpack-plugin

[danielbachhuber]

Thanks @PrOpOvEdNiK. I've opened a Laravel Mix issue about it: https://github.com/JeffreyWay/laravel-mix/issues/2767

[danielbachhuber]

@PrOpOvEdNiK This will be fixed in the next tagged release of Laravel Mix https://github.com/JeffreyWay/laravel-mix/pull/2768

[PrOpOvEdNiK]

@danielbachhuber It's great! Thanks for taking care about this!