ef4

Webpack 5 Node Polyfills Upgrade Cheatsheet

Webpack 4 automatically polyfilled many Node APIs in the browser. This was not a great system, because it could lead to surprisingly giant libraries getting pulled into your app by accident, and it gave you no control over the exact versions of the polyfills you were using.

So Webpack 5 removed this functionality. That means you need to make changes if you were relying on those polyfills. This is a quick reference for how to replace the most common patterns.

List of polyfill packages that were used in webpack 4

For each automatically-polyfilled node package name on the left, this shows the name of the NPM package that was used to polyfill it on the right. Under webpack 5 you can manually install these packages and use them via resolve.fallback.

ef4

diff --git a/packages/@ember/-internals/glimmer/lib/templates/outlet.ts b/packages/@ember/-internals/glimmer/lib/templates/outlet.ts
index a186b6229..803be2862 100644
--- a/packages/@ember/-internals/glimmer/lib/templates/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/templates/outlet.ts
@@ -1,4 +1,10 @@
 import { precompileTemplate } from '@ember/template-compilation';
-export default precompileTemplate(`{{component (-outlet)}}`, {
+import { outletHelper } from '../syntax/outlet';
+
+export default precompileTemplate(`{{component (outletHelper)}}`, {

ef4

import Component from '@glimmer/component';

// This component renders its contents in a shadow root:
//
// <ShadowRoot>stuff</ShadowRoot>
//
// Critically, it renders in a single render pass. The more natural
// modifier-based solutions do not.
//
// The "trick" we're relying on here is the little-known feature that helpers

ef4

#!/bin/bash

# Adapted from Erik Johnson's script at 
# http://terminalmage.net/2011/11/17/setting-a-usb-headset-as-the-default-pulseaudio-device/
#
# Updated by Edward Faulkner <ef@alum.mit.edu> to move existing
# streams and eliminate the extra fork script.

# You'll need to change these to point at your headset device.
OUTPUT="alsa_output.usb-Generic_FREETALK_Everyman_0000000001-00-Everyman.analog-stereo"

ef4

<select onchange={{action (mut vehicle) value="target.value"}}>
  {{#each vehicles key="@item" as |vehicleChoice|}}
    <option value={{vehicleChoice}} selected={{eq vehicle vehicleChoice}}>{{vehicleChoice}}</option>
  {{/each}}
</select>

ef4

<iframe src="data:text/html;charset=utf-8,%3Cbody%3E%3Cscript%20src%3D%22https%3A%2F%2Fgist.github.com%2Fef4%2Ffe2e8e5b6e75266e3c2d.js%22%3E%3C%2Fscript%3E%3C%2Fbody%3E">

ef4

server {
  listen 80;
  return 301 https://$server_name$request_uri;  # enforce https
}

server {
  listen 443 ssl;

  ssl_certificate your_certificate_filename;
  ssl_certificate_key your_certificate_key;

ef4

import Ember from 'ember';

export default Ember.Component.extend({
  rows: Ember.computed('names', function() {
    let names = this.get('names');
    let columns = Math.floor($(window).width() / 100);
    let itemsPerColumn = Math.ceil(names.length / columns);
    
    let rows = [];
    for (let rowNumber = 0; rowNumber < itemsPerColumn; rowNumber++) {

ef4

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

ef4

import Ember from 'ember';

export default Ember.Controller.extend({
  nothing() {}
});