View profile

Why I'm Not Using Webpack for Lambda Functions Anymore

Earlier this year, we wrote about whether you need Webpack if you're writing server-side JavaScript.
Why I'm Not Using Webpack for Lambda Functions Anymore
By Mastering JS Weekly • Issue #39 • View online
Earlier this year, we wrote about whether you need Webpack if you’re writing server-side JavaScript. TLDR; no, unless you’re deploying to AWS Lambda or need to compile alternative syntaxes like JSX or Vue SFC.
However, that was before we got more involved in building production apps on top of Lambda. Now that we have a few production Lambda apps running, we’ve decided to no longer recommend bundling Lambda functions with Webpack, or any bundler for that matter.

Down the ./node_modules Rabbit Hole
Make no mistake, Webpack is an excellent piece of software with a wide variety of uses. The problem with Webpack isn’t necessarily Webpack’s fault. The problem comes down to the fact that a lot of popular npm modules don’t work in Node.js when bundled with Webpack. And you don’t know which ones until you find yourself facing a baffling error.
The first module we had trouble with was inline-css, a module we use for compiling email templates. For example, below is a basic Node.js webpack config and a single file that imports inline-css.
Compiling this one-line script with Webpack fails
Compiling this one-line script with Webpack fails
Webpack fails to compile the above script and produces the below error.
Wait, wat? I don't even use any of these modules...
Wait, wat? I don't even use any of these modules...
Why does this error happen? Because inline-css depends on extract-css, which in turn depend’s on TJ’s old concurrency module batch, which requires an ‘emitter’ module in case event emitters aren’t available. There’s a fairly easy workaround: `npm install emitter` to make Webpack happy.
So once you installed Webpack, inline-css should work, right? Turns out it compiles, but then running the compiled script fails immediately with the below error:
Wat?
Wat?
If you dig deep enough, you’ll find that this is an issue with formidable, which ends up in your bundle via the superagent HTTP client. Formidable 1.x has some code in place for stubbing require() that ends up breaking Webpack. Below shows what Webpack outputs when compiling the dubious Formidable code.
Webpack ends up occluding `require` by design
Webpack ends up occluding `require` by design
The workaround is to define a Webpack plugin that helps Webpack ignore the `GENTLY.hijack()` call.
Plugin to fix Webpack compiling formidable
Plugin to fix Webpack compiling formidable
So that’s it for getting inline-css to work with Webpack. Unfortunately, things don’t get any better: there are many other npm modules that require debugging a matryoshka doll of compiler errors.
It Only Gets Worse
Surely, inline-css is just an outlier, right? Unfortunately not. First of all, many npm modules depend on formidable, whether directly or via popular modules like superagent and restify. Secondly, there’s plenty of other modules that have issues.
Another example is the slack npm module, a popular library for interacting with the Slack API in Node.js. When you try to `require(‘slack’)` with the above Webpack config, running the output gives you the below error.
Wat?
Wat?
Turns out that Slack uses an HTTP client that doesn’t support bundling for the server with Webpack. Your best bet is to get this to work is to write your own implementation of tiny-json-http that’s compatible with the Slack module, which adds significant overhead.
Be Wary of Time Spent on Build Systems
As the old joke goes, “give a web developer 6 hours to chop down a tree and he’ll spend the first 6 days configuring Webpack.” Every minute you spend wrestling with your build system is a minute you don’t spend on customer-facing improvements.
If you have a build system, make sure it’s saving you more time than you’re sinking into it. And, if it does not spark joy, thank it and toss it out.
XKCD #1205
XKCD #1205
Most Recent Tutorials
Other Interesting Reads
Working with the Slack API in Node.js | www.thecodebarbarian.com
4 Things I Learned from Mastering Mongoose.js - DEV
Did you enjoy this issue?
Mastering JS Weekly

A weekly summary of our tutorials

If you don't want these updates anymore, please unsubscribe here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue