Fix webpack 5 browser builds

CHANGELOG.md

@@ -12,6 +12,11 @@
   that only existed as a replacement after `td.reset()`. Tests that check for
   `ENOENT` (or its message) need updating
   [quibble#100](https://github.com/testdouble/quibble/issues/100)
+* Fix webpack 5 browser builds failing with `Can't resolve 'module'` (broken
+  since 3.20.1). testdouble no longer pulls Node's `module` or `events` into
+  browser bundles. In a browser, `td.replaceEsm()` now throws a clear
+  "only supported under Node.js" error, and `td.listReplacedModules()` returns
+  `[]` [#531](https://github.com/testdouble/testdouble.js/issues/531)
 
 ## 3.23.0
 

docs/1-installation.md

@@ -41,6 +41,10 @@ $ npm install --save-dev testdouble
 And then find the browser distribution of the library in
 `node_modules/testdouble/dist/testdouble.js`.
 
+testdouble.js can also be bundled for the browser with webpack 5 and other
+bundlers. Module replacement with `td.replace(path)` and `td.replaceEsm()` is
+only supported under Node.js.
+
 #### via unpkg
 
 You can also just fetch the latest (or any) version of the library from

examples/webpack/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/*
+/dist

examples/webpack/build.js

@@ -0,0 +1,51 @@
+// Bundles testdouble for the browser with webpack 5, then fails if the bundle
+// pulls in a Node core module. webpack 5 doesn't polyfill core modules, so a
+// core import that slips into testdouble breaks browser builds (#531). A
+// hoisted polyfill package (e.g. `events`) can hide that, so check for those
+// too, by name.
+const path = require('path')
+const { builtinModules } = require('module')
+const webpack = require('webpack')
+
+const compiler = webpack({
+  mode: 'development',
+  target: 'web',
+  devtool: false,
+  entry: {
+    cjs: './entry.js',
+    esm: './entry.mjs'
+  },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js'
+  }
+})
+
+compiler.run((err, stats) => {
+  if (err) {
+    console.error(err)
+    process.exit(1)
+  }
+  if (stats.hasErrors()) {
+    console.error(stats.toString('errors-only'))
+    process.exit(1)
+  }
+
+  const coreModulePackage = new RegExp(
+    `[\\\\/]node_modules[\\\\/](${builtinModules.join('|')})[\\\\/]`
+  )
+  const offenders = []
+  for (const mod of stats.compilation.modules) {
+    if (mod.resource && coreModulePackage.test(mod.resource)) {
+      offenders.push(mod.resource)
+    }
+  }
+  if (offenders.length > 0) {
+    console.error('Bundle includes Node core modules (or polyfills of them):')
+    offenders.forEach(resource => console.error(`  ${resource}`))
+    process.exit(1)
+  }
+
+  console.log('webpack build passed')
+  compiler.close(() => {})
+})

examples/webpack/entry.js

@@ -0,0 +1,25 @@
+const td = require('testdouble')
+
+function check (condition, message) {
+  if (!condition) throw new Error(`CommonJS entry: ${message}`)
+}
+
+const fn = td.func('fn')
+td.when(fn('hi')).thenReturn('hello')
+check(fn('hi') === 'hello', 'td.when stubbing failed')
+const log = td.func('log')
+log('bye')
+td.verify(log('bye'))
+
+check(td.listReplacedModules().length === 0, 'td.listReplacedModules() should be []')
+
+let error
+try {
+  td.replaceEsm('./some-module.js')
+} catch (e) {
+  error = e
+}
+check(error && /only supported under Node\.js/.test(error.message),
+  `td.replaceEsm() should throw a Node.js-only error, got: ${error}`)
+
+console.log('CommonJS entry passed')

examples/webpack/entry.mjs

@@ -0,0 +1,25 @@
+import * as td from 'testdouble'
+
+function check (condition, message) {
+  if (!condition) throw new Error(`ES module entry: ${message}`)
+}
+
+const fn = td.func('fn')
+td.when(fn('hi')).thenReturn('hello')
+check(fn('hi') === 'hello', 'td.when stubbing failed')
+const log = td.func('log')
+log('bye')
+td.verify(log('bye'))
+
+check(td.listReplacedModules().length === 0, 'td.listReplacedModules() should be []')
+
+let error
+try {
+  td.replaceEsm('./some-module.js')
+} catch (e) {
+  error = e
+}
+check(error && /only supported under Node\.js/.test(error.message),
+  `td.replaceEsm() should throw a Node.js-only error, got: ${error}`)
+
+console.log('ES module entry passed')