brianmay

brianmay

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?

Marked As Solved

brianmay

brianmay

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

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

Where Next?

Popular in Questions Top

_russellb
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
earth10
Hi, I’m just starting to build a side-project with Elixir and Phoenix and doing some basic test with Elixir alone. What strikes me is th...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
JDanielMartinez
Hi! May someone helps me, please! I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New

Other popular topics Top

JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 53690 245
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 39297 209
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New

We're in Beta

About us Mission Statement