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

Phoenix Forum Questions / Help
,
1

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?

2

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.

3

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?

4

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?

5

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