Output a separate "legacy ESM" artifact for Webpack 4

Author: markerikson

.github/workflows/test.yaml

@@ -16,6 +16,8 @@ jobs:
             src:
               - 'src/**'
               - 'test/**'
+              - '.github/**/*.yaml'
+              - 'tsup.config.ts'
 
   build:
     needs: changes

package.json

@@ -24,7 +24,7 @@
     "Andrew Clark <[email protected]> (https://github.com/acdlite)"
   ],
   "main": "dist/cjs/redux.cjs",
-  "module": "dist/redux.mjs",
+  "module": "dist/redux.legacy-esm.js",
   "types": "dist/redux.d.ts",
   "exports": {
     "./package.json": "./package.json",

tsup.config.ts

@@ -3,6 +3,7 @@ import { defineConfig, Options } from 'tsup'
 import * as babel from '@babel/core'
 import { Plugin } from 'esbuild'
 import { getBuildExtensions } from 'esbuild-extra'
+import fs from 'fs'
 
 // Extract error strings, replace them with error codes, and write messages to a file
 const mangleErrorsTransform: Plugin = {
@@ -42,7 +43,11 @@ export default defineConfig(options => {
       format: ['esm'],
       outExtension: () => ({ js: '.mjs' }),
       dts: true,
-      clean: true
+      clean: true,
+      onSuccess() {
+        // Support Webpack 4 by pointing `"module"` to a file with a `.js` extension
+        fs.copyFileSync('dist/redux.mjs', 'dist/redux.legacy-esm.js')
+      }
     },
     // Browser-ready ESM, production + minified
     {