Webpack error after upgrading mini-css-extract-plugin@1.6.2

The first time always works. Or production mode works also:

$ npx webpack --mode development 
[hardsource:e5a41f90] Using 16 MB of disk space.
[hardsource:e5a41f90] Writing new cache e5a41f90...
[hardsource:e5a41f90] Tracking node dependencies with: package-lock.json.
Hash: ad43ff0996a034b3aa39
Version: webpack 4.46.0
Time: 1855ms
Built at: 03/07/2021 4:58:18 pm
                Asset       Size  Chunks             Chunk Names
       ../css/app.css    197 KiB     app  [emitted]  app
       ../favicon.ico   1.23 KiB          [emitted]  
../images/phoenix.png   13.6 KiB          [emitted]  
        ../robots.txt  198 bytes          [emitted]  
               app.js   1.01 MiB     app  [emitted]  app
Entrypoint app = ../css/app.css app.js
[0] multi ./js/app.js 28 bytes {app} [built]
[../deps/phoenix/priv/static/phoenix.js] 38.9 KiB {app} [built]
[../deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {app} [built]
[../deps/phoenix_live_view/priv/static/phoenix_live_view.js] 113 KiB {app} [built]
[./css/app.scss] 50 bytes {app} [built]
[./js/app.js] 2.14 KiB {app} [built]
[./node_modules/@popperjs/core/lib/createPopper.js] 9.78 KiB {app} [built]
[./node_modules/@popperjs/core/lib/enums.js] 1.3 KiB {app} [built]
[./node_modules/@popperjs/core/lib/index.js] 443 bytes {app} [built]
[./node_modules/@popperjs/core/lib/modifiers/index.js] 502 bytes {app} [built]
[./node_modules/@popperjs/core/lib/popper-lite.js] 603 bytes {app} [built]
[./node_modules/bootstrap/dist/js/bootstrap.esm.js] 136 KiB {app} [built]
[./node_modules/nprogress/nprogress.js] 11.3 KiB {app} [built]
[?af33] css ./node_modules/css-loader/dist/cjs.js!./node_modules/nprogress/nprogress.css 1.42 KiB {app}
[?c85f] css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss 195 KiB {app}
    + 53 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!css/app.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/nprogress/nprogress.css] 4.14 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/app.scss] 521 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 1.57 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/cssWithMappingToString.js] 2.22 KiB {mini-css-extract-plugin} [built]

But the 2nd time fails:

$ npx webpack --mode development
[hardsource:e5a41f90] Using 22 MB of disk space.
[hardsource:e5a41f90] Tracking node dependencies with: package-lock.json.
[hardsource:e5a41f90] Reading from cache e5a41f90...
internal/crypto/hash.js:84
    throw new ERR_INVALID_ARG_TYPE(
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of Object
    at Hash.update (internal/crypto/hash.js:84:11)
    at BulkUpdateDecorator.update (/home/brian/tree/personal/pm/penguin_memories/assets/node_modules/webpack/lib/util/createHash.js:61:14)
    at CssModule._computeHash (/home/brian/tree/personal/pm/penguin_memories/assets/node_modules/mini-css-extract-plugin/dist/index.js:145:14)
    at CssModule.build (/home/brian/tree/personal/pm/penguin_memories/assets/node_modules/mini-css-extract-plugin/dist/index.js:136:22)
    at Compilation.buildModule (/home/brian/tree/personal/pm/penguin_memories/assets/node_modules/webpack/lib/Compilation.js:739:10)
    at /home/brian/tree/personal/pm/penguin_memories/assets/node_modules/webpack/lib/Compilation.js:981:14
    at CssModuleFactory.create (/home/brian/tree/personal/pm/penguin_memories/assets/node_modules/mini-css-extract-plugin/dist/index.js:408:11)
    at /home/brian/tree/personal/pm/penguin_memories/assets/node_modules/webpack/lib/Compilation.js:897:14
    at Semaphore.acquire (/home/brian/tree/personal/pm/penguin_memories/assets/node_modules/webpack/lib/util/Semaphore.js:29:4)
    at asyncLib.forEach.err.stack (/home/brian/tree/personal/pm/penguin_memories/assets/node_modules/webpack/lib/Compilation.js:895:15)
    at arrayEach (/home/brian/tree/personal/pm/penguin_memories/assets/node_modules/neo-async/async.js:2405:9)
    at Object.each (/home/brian/tree/personal/pm/penguin_memories/assets/node_modules/neo-async/async.js:2846:9)
    at Compilation.addModuleDependencies (/home/brian/tree/personal/pm/penguin_memories/assets/node_modules/webpack/lib/Compilation.js:873:12)
    at Compilation.processModuleDependencies (/home/brian/tree/personal/pm/penguin_memories/assets/node_modules/webpack/lib/Compilation.js:843:8)
    at afterBuild (/home/brian/tree/personal/pm/penguin_memories/assets/node_modules/webpack/lib/Compilation.js:954:15)
    at processTicksAndRejections (internal/process/task_queues.js:75:11) {
  code: 'ERR_INVALID_ARG_TYPE'
}

How do I resolve? The only solution I have found so far is to downgrade to mini-css-extract-plugin@1.2.1 which just works, everytime. But looking through the changelog for version 1.3.0 I see nothing that would explain this.

I have this exact same problem on all my Pheonix live view applications.

Google showed me a number of hits for this error, but so far, none have actually helped.

Any ideas?

1 Like

Not sure if it is significant or not for the above error, but also holding node-sass back at version 4.14.1 because 6.0.1 produces this error:

Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

Did I ever mention I hate JavaScript ? :slight_smile:

I am not doing anything fancy, this is just the basic setup for a Pheonix Live application.

Javascript is not too bad; the unholy threesome among Javascript, CSS and Webpack drove everyone nuts. Why should I import CSS into Javascript, just to spit it back out to a separate file? What was there to gain?

Yes, I assume there is a good reason for including the CSS into a JS file, just that I don’t understand it myself.

Back to this problem, it is a pain because my CI tests pass, which means I get automatic generated pull requests from dependabot to upgrade the package that I have to remember not merge or I get a broken dev environment again.

I tried tracing through the code and got nowhere. e.g. If I add an “console.log(data)” to print the value of data, I get:

{
  type: 'Buffer',
  data: [
     47,  42,  32,  77,  97, 107, 101,  32,  99, 108, 105,  99,
    107, 115,  32, 112,  97, 115, 115,  45, 116, 104, 114, 111,
    117, 103, 104,  32,  42,  47,  10,  35, 110, 112, 114, 111,
    103, 114, 101, 115, 115,  32, 123,  10,  32,  32, 112, 111,
    105, 110, 116, 101, 114,  45, 101, 118, 101, 110, 116, 115,
     58,  32, 110, 111, 110, 101,  59,  10, 125,  10,  10,  35,
    110, 112, 114, 111, 103, 114, 101, 115, 115,  32,  46,  98,
     97, 114,  32, 123,  10,  32,  32,  98,  97,  99, 107, 103,
    114, 111, 117, 110,
    ... 1358 more items
  ]
}

Is that not the Buffer type it was asking for?

Solution was to resync my project’s assets directory from phoenix/installer/templates/phx_assets at master · phoenixframework/phoenix · GitHub

Long term solution might be to use esbuild instead of webpack. See https://twitter.com/josevalim/status/1417017859847475201

1 Like

Hi, so I recently had this error as well and after spending arguably way too much time on it, I have another solution.
The error is created by the HardSourceWebpackPlugin. On their github page under ExcludeModulePlugin they list the reason why this error happens.
So if you still want to use webpack and the newer versions of mini-css-extract-plugin you would have to do the following:

old code

in assets/webpack.config.js at the end of the file

plugins: [
  new MiniCssExtractPlugin({ filename: '../css/app.css' }),
  new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
]
.concat(devMode ? [new HardSourceWebpackPlugin()] : [])

new code

plugins: [
  new MiniCssExtractPlugin({ filename: '../css/app.css' }),
  new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
]
.concat(devMode ? [
  new HardSourceWebpackPlugin({
    configHash: (webpackConfig) => require('node-object-hash')({ sort: false }).hash(webpackConfig)
  }),
  new HardSourceWebpackPlugin.ExcludeModulePlugin([{
    test: /mini-css-extract-plugin[\\/]dist[\\/]loader/
  }])
] : [])

note that I added the configHash due to another issue I got.
For me this works