Laravel-mix: "chunk.sortModules is not a function"

[jeremy-smith-maco]

• Laravel Mix Version: 1.2.0
• Node Version: 8.1.2
• NPM Version: 5.2.0
• OS: LMDE 2 Betsy

Description:

When running mix.sass() it seems to fail with the exception message TypeError: chunk.sortModules is not a function (stack trace below).

Steps To Reproduce:

Have a sass file and run mix.sass().

Stack trace:

advanced chunk optimization/home/user/project/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/dist/index.js:188
            chunk.sortModules();
                  ^

TypeError: chunk.sortModules is not a function
    at /home/user/project/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/dist/index.js:188:19
    at /home/user/project/node_modules/laravel-mix/node_modules/async/dist/async.js:3083:16
    at eachOfArrayLike (/home/user/project/node_modules/laravel-mix/node_modules/async/dist/async.js:1003:9)
    at eachOf (/home/user/project/node_modules/laravel-mix/node_modules/async/dist/async.js:1051:5)
    at Object.eachLimit (/home/user/project/node_modules/laravel-mix/node_modules/async/dist/async.js:3145:5)
    at Compilation.<anonymous> (/home/user/project/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/dist/index.js:184:27)
    at Compilation.applyPluginsAsyncSeries (/home/user/project/node_modules/tapable/lib/Tapable.js:142:13)
    at Compilation.seal (/home/user/project/node_modules/webpack/lib/Compilation.js:551:7)
    at Compiler.<anonymous> (/home/user/project/node_modules/webpack/lib/Compiler.js:436:15)
    at /home/user/project/node_modules/tapable/lib/Tapable.js:225:11
    at Compilation.<anonymous> (/home/user/project/node_modules/webpack/lib/Compilation.js:444:10)
    at /home/user/project/node_modules/webpack/lib/Compilation.js:420:12
    at /home/user/project/node_modules/webpack/lib/Compilation.js:332:10
    at /home/user/project/node_modules/async/lib/async.js:52:16
    at done (/home/user/project/node_modules/async/lib/async.js:246:17)
    at /home/user/project/node_modules/async/lib/async.js:44:16
    at /home/user/project/node_modules/webpack/lib/Compilation.js:332:10
    at /home/user/project/node_modules/async/lib/async.js:52:16
    at done (/home/user/project/node_modules/async/lib/async.js:246:17)
    at /home/user/project/node_modules/async/lib/async.js:44:16
    at /home/user/project/node_modules/webpack/lib/Compilation.js:332:10
    at /home/user/project/node_modules/async/lib/async.js:52:16
    at done (/home/user/project/node_modules/async/lib/async.js:246:17)
    at /home/user/project/node_modules/async/lib/async.js:44:16
    at /home/user/project/node_modules/webpack/lib/Compilation.js:332:10
    at /home/user/project/node_modules/async/lib/async.js:52:16
    at Object.async.forEachOf.async.eachOf (/home/user/project/node_modules/async/lib/async.js:236:30)
    at Object.async.forEach.async.each (/home/user/project/node_modules/async/lib/async.js:209:22)
    at Compilation.addModuleDependencies (/home/user/project/node_modules/webpack/lib/Compilation.js:192:8)
    at Compilation.processModuleDependencies (/home/user/project/node_modules/webpack/lib/Compilation.js:177:7)

[JeffreyWay]

I can't reproduce this. Can you do rm -rf node_modules && npm install and see if that changes your output?

[jeremy-smith-maco]

I tried that before posting the issue. Seemed like that was the cause but maybe it's something else. That was the only line I didn't have commented out in the mix file.

[JeffreyWay]

If you can send me exact reproducible steps to produce that error, it would help. Right now, it's a bit like shooting in the dark because everything works on my end.

[jeremy-smith-maco]

Strange. I commented out the whole sass file and it is still getting the error. I will try creating a new fresh project to try and reproduce the error.

[jeremy-smith-maco]

The default Laravel installation fails to even compile:

ERROR  Failed to compile with 2 errors                                                                                                                                                                                               09:24:24

These dependencies were not found:

* /home/user/projects/test/resources/assets/js/app.js in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
* /home/user/projects/test/resources/assets/sass/app.scss in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

To install them, you can run: npm install --save /home/user/projects/test/resources/assets/js/app.js /home/user/projects/test/resources/assets/sass/app.scss
            Asset      Size  Chunks             Chunk Names
       /js/app.js   2.93 kB       0  [emitted]  /js/app
mix-manifest.json  56 bytes          [emitted]  

Repo: https://github.com/jeremy-smith-maco/TestLaravelProject

[xiaoda]

updated laravel-mix to 1.2.0 this morning then ran into the same problem. everything was ok before this update.

> @ watch /Users/user/project
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 10% building modules 5/5 modules 0 active
Webpack is watching the files…

 78% advanced chunk optimization/Users/user/project/node_modules/.3.0.0@extract-text-webpack-plugin/dist/index.js:188
            chunk.sortModules();
                  ^

TypeError: chunk.sortModules is not a function
    at /Users/user/project/node_modules/.3.0.0@extract-text-webpack-plugin/dist/index.js:188:19
    at /Users/user/project/node_modules/.2.5.0@async/dist/async.js:3083:16
    at eachOfArrayLike (/Users/user/project/node_modules/.2.5.0@async/dist/async.js:1003:9)
    at eachOf (/Users/user/project/node_modules/.2.5.0@async/dist/async.js:1051:5)
    at Object.eachLimit (/Users/user/project/node_modules/.2.5.0@async/dist/async.js:3145:5)
    at Compilation.<anonymous> (/Users/user/project/node_modules/.3.0.0@extract-text-webpack-plugin/dist/index.js:184:27)
    at Compilation.applyPluginsAsyncSeries (/Users/user/project/node_modules/.0.2.6@tapable/lib/Tapable.js:142:13)
    at Compilation.seal (/Users/user/project/node_modules/.2.6.1@webpack/lib/Compilation.js:579:8)
    at /Users/user/project/node_modules/.2.6.1@webpack/lib/Compiler.js:493:16
    at /Users/user/project/node_modules/.0.2.6@tapable/lib/Tapable.js:225:11
    at _addModuleChain (/Users/user/project/node_modules/.2.6.1@webpack/lib/Compilation.js:481:11)
    at processModuleDependencies.err (/Users/user/project/node_modules/.2.6.1@webpack/lib/Compilation.js:452:13)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

[jeremy-smith-maco]

Glad I am not the only one.

[jeremy-smith-maco]

Okay, got this working. Not sure exactly what the issue is but I had to update my NPM dependencies. Need to update your package.json to include a bunch of loaders and the latest version of webpack like this:

    "babel-loader": "^7.1.1",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "laravel-mix": "^1.2.0",
    "postcss-loader": "^2.0.6",
    "style-loader": "^0.18.2",
    "vue-loader": "^13.0.1",
    "webpack": "^3.2.0"

Don't know why as it should just be included in the Laravel Mix dependencies which it is but for some reason failing to find/use them. Once you install those packages it should run fine again.

[Hendriksie]

I had this problem as well but I accidentally installed webpack 2.2.0 manually (had to test something).

When I removed my own webpack dependency and let laravel-mix install it automatically everything went fine. I think when you remove your webpack entry, reinstall everything, you should not get any errors.

I see that you are using npm 5.2.0, you may want to switch back to npm 5.1.0 because there is something happening with flattening peer dependencies that will be reverted in the next release of npm.

https://github.com/npm/npm/issues/17717
https://github.com/JeffreyWay/laravel-mix/issues/983

[BATMAH69]

I had such a problem when I installed the extract-text-webpack-plugin@3 with the webpack@2.
Then I sync versions and it error gone.

[JeffreyWay]

Yeah pretty sure this was an error with npm 5.2, which came out yesterday. They've patched it and are about to make a new release, so I'm going to close this.

[jeremy-smith-maco]

Can confirm. NPM reverted back to 5.0.3 for some reason so I removed the loaders and stuff from package.json and it ran fine again.

[brookslee]

I came across the same problem, and after revert the plugin to older version solved the problem

npm i [email protected]

[yulinyige]

I solve the problem as @jeremy-smith-maco say::
"babel-loader": "^7.1.1", "css-loader": "^0.28.4", "file-loader": "^0.11.2", "laravel-mix": "^1.2.0", "postcss-loader": "^2.0.6", "style-loader": "^0.18.2", "vue-loader": "^13.0.1", "webpack": "^3.2.0"

thanks.

[BrunoFenzl]

Also had this problem and like @BATMAH69, it was due to incompatible versions of webpack an extract-text-webpack-plugin.

[mcordingley]

I was experiencing this issue with the following versions of NPM and NodeJS and the following package.json from a clean base with node_modules removed.

NPM 5.3.0
NodeJS v8.4.0

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "dependencies": {
    "cross-env": "^5.0.1",
    "laravel-elixir": "^6.0.0-15",
    "laravel-elixir-webpack-official": "^1.0.4",
    "laravel-mix": "^1.0"
  },
  "devDependencies": {
    "less": "^2.7.2",
    "less-loader": "^4.0.5"
  }
}

Interestingly, removing the elixir lines gets the issue to go away.

[eddieace]

This worked for me. Used yarn instead

rm -rf node_modules
brew install yarn
yarn
yarn run dev

Another solution is:

npm install --save webpack
npm run dev

[simianarmy]

Ridiculous

[satyapendem]

I got the same issue and I upgraded my webpack to 3.4..1 then it was fine.

[rtxrulez]

webpack 2 requires special versions of extract-text-webpack-plugin
maybe you do not have that version of the plugin.
https://github.com/webpack-contrib/extract-text-webpack-plugin

[Dhavalc2012]

I had the same issue. So I just copied the configuration of package.json from the official github repository of laravel and deleted all the node_modules. It is working fine now for me.

[SamyMwamba]

try with yarn https://yarnpkg.com/lang/en/docs/install/#windows-stable

[mazammajmudar]

Yeah pretty sure this was an error with npm 5.2, which came out yesterday. They've patched it and are about to make a new release, so I'm going to close this.

---

What about npm version 6.13.6?
Can that be a reason too?

I have been changing webpack and webpack-dev-middleware versions for past 2 days which are no more an issue but there's another one with this extract-text-webpack-plugin.
My current webpack version is 2.6.1, webpack-dev-middleware is 1.11.0 and extract-text-webpack-plugin is 3.0.0 and I am getting this error
"\nodepractice\ch9\b4node_modulesextract-text-webpack-plugin\dist\index.js:188
chunk.sortModules();
^

TypeError: chunk.sortModules is not a function"

AND all this happening on OS: Windows10.
TIA.