Day 292: Dying on the Bleeding Edge

engineering

A story.

Okay, Twitter updated their code a while back so the verified badge and the number of ‘Quote Tweets’ isn’t hidden even though I have Hide Likes on. Several people have told me about it over the last few months so it’s about time I fix it. Let’s open up this bad boy.

cd hide-likes

npm run develop

Huh, it’s broken. What the heck? It’s only been several months since I last ran this. Maybe my dependencies are off?

npm run install

npm run develop

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '/Users/dskang/Code/hide-likes/node_modules/@babel/compat-data/data/corejs3-shipped-proposals'

It still doesn’t work. Err, I guess I’ll try getting the latest dependencies.

ncu -u

[…]

Oh boy, everything’s broken now. Wait, why is my webpack config in JS? I switched it to Typesc— Ah, I updated the configs for Intention and Hide Feed but not Hide Likes. Well, I don’t want to individually apply all the changes I’ve made to my other projects to Hide Likes so I guess I’ll port it over.

Dang, there’s a lot that’s different. Why do I have individual copies of each webpack config anyway? I’ll make a helper file with a factory function that generates the config based on a few parameters since most of the config is the same across projects anyway. I’ll use the latest config on Browserflow to create a generic version.

[…]

[…]

[…]

It finally works. Now time to update to the latest dependencies so that I can get it to work for Hide Likes as well.

ncu -u

Wait a second. The latest version of React is v17.0 now? When did that happen? Wow, three days ago. Well, it’s a stepping stone release so hopefully it won’t break anything.

npm run develop

Error: Cannot find module 'webpack-cli/bin/config-yargs'

What is this. To GitHub we go.

[…]

Alright, I need to use webpack serve instead of webpack-dev-server. Fixed.

npm run develop

[webpack-cli] Promise rejection: TSError: ⨯ Unable to compile TypeScript:
webpack-helper.ts:23:12 - error TS2694: Namespace 'exports' has no exported member 'ConfigurationFactory'.

23 ): webpack.ConfigurationFactory

[…]

Wait. Webpack updated from 4 to 5? When was that? Two weeks ago? Looks like I found the perfect time to get hit with all the breaking changes.

It’s so new that the type definitions are still for v4. Guess I’ll type it myself for now.

npm run develop

[webpack-cli] Promise rejection: ValidationError: Invalid options object. Terser Plugin has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'sourceMap'. These properties are valid:
   object { test?, include?, exclude?, parallel?, minify?, terserOptions?, extractComments? }

Terser got rid of an option? What did sourceMap do anyway? Hm, wish I’d left a comment for this like I usually do with options so that I’d know why I added this. From skimming the docs, it doesn’t seem like it’s necessary so I’ll get rid of it.

npm run develop

ERROR in ./node_modules/css-vendor/node_modules/@babel/runtime/helpers/esm/toConsumableArray.js 1:0-52
Module not found: Error: Can't resolve './arrayWithoutHoles' in '/Users/dskang/Code/browserflow/node_modules/css-vendor/node_modules/@babel/runtime/helpers/esm'
Did you mean 'arrayWithoutHoles.js'?
BREAKING CHANGE: The request './arrayWithoutHoles' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.

[…]

According to this GitHub issue, webpack started enforcing a rule where imports need to be fully specified for "type": "module".

[…]

The solutions here aren’t working for me. It looks like it might require library authors to update their code and get this to be compliant.

What was I doing again?

Oh yeah, I wanted to make a one-line CSS change to Hide Likes. Guess I’ll wait several weeks for all the issues to get resolved before trying again.

FRONTEND IS SO INFURIATING SOMETIMES