Merge pull request #329 from gregnb/fix-arrow-functions-in-build

Ensure we target ES5 when building in webpack, add browserslist

. browserslistrc

@@ -0,0 +1,4 @@
+# Browsers that we support
+
+defaults
+IE11

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## 2.12.1 (December 14th, 2020)
+
+- FIX [329](https://github.com/gregnb/react-to-print/pull/329): v2.12.0 upgraded Webpack from 4 -> 5 which broke the package for environments that didn't support ES6 as Webpack now requires finer grained controls to output pure ES5 code. These changes have been made.
+- CHORE: upgraded all devDependencies
+
 ## 2.12.0 (November 27th, 2020)
 
 - CHORE: added React/ReactDOM ^17 to allowed peerDependencies. Library still supports React >= 15, though expect a major release in the near-future that drops React 15 support, which will clear the way to removing the restriction that the top-level component being printed must be a class component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-to-print",
-  "version": "2.12.0",
+  "version": "2.12.1",
   "description": "Print React components in the browser",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -25,7 +25,7 @@
   ],
   "author": "gregnb <[email protected]>",
   "contributors": [
-    "Matthew Herbst"
+    "Matthew Herbst <MatthewHerbst.com>"
   ],
   "license": "MIT",
   "bugs": {
@@ -42,22 +42,22 @@
   "devDependencies": {
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.8.2",
-    "@typescript-eslint/parser": "^4.8.2",
+    "@typescript-eslint/eslint-plugin": "^4.10.0",
+    "@typescript-eslint/parser": "^4.10.0",
     "acorn": "^8.0.4",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^5.0.1",
-    "eslint": "^7.14.0",
+    "eslint": "^7.15.0",
     "html-webpack-plugin": "^4.5.0",
-    "husky": "^4.3.0",
-    "lint-staged": "^10.5.2",
+    "husky": "^4.3.6",
+    "lint-staged": "^10.5.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "style-loader": "^2.0.0",
-    "ts-loader": "^8.0.11",
-    "typescript": "^4.1.2",
+    "ts-loader": "^8.0.12",
+    "typescript": "^4.1.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.8.0",
+    "webpack": "^5.10.1",
     "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^3.11.0"
   },

tsconfig.dev.json

@@ -10,6 +10,6 @@
     "noUnusedParameters": true,
     "sourceMap": true,
     "strict": true,
-    "target": "es5"
+    "target": "ES5"
   }
 }

tsconfig.json

@@ -10,9 +10,9 @@
     "noUnusedParameters": true,
     "outDir": "lib",
     "removeComments": true,
-    "sourceMap": true,
+    // "sourceMap": true,
     "strict": true,
-    "target": "es5"
+    "target": "ES5",
   },
   "include": [
     "./src"

webpack.prod.config.js

@@ -7,33 +7,49 @@ module.exports = {
     mode: 'production',
     entry:  './src/index.tsx',
     output: {
+        environment: {
+            // The environment supports arrow functions ('() => { ... }').
+            arrowFunction: false,
+            // The environment supports BigInt as literal (123n).
+            bigIntLiteral: false,
+            // The environment supports const and let for variable declarations.
+            const: false,
+            // The environment supports destructuring ('{ a, b } = obj').
+            destructuring: false,
+            // The environment supports an async import() function to import EcmaScript modules.
+            dynamicImport: false,
+            // The environment supports 'for of' iteration ('for (const x of array) { ... }').
+            forOf: false,
+            // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
+            module: false,
+        },
         filename: 'index.js',
         path: path.resolve(__dirname, './lib'),
         libraryTarget: 'umd',
         library: 'lib',
         umdNamedDefine: true,
-        globalObject: `(typeof self !== 'undefined' ? self : this)`
+        globalObject: `(typeof self !== 'undefined' ? self : this)`,
     },
     optimization: {
         minimize: true,
     },
     externals : {
         'react': 'react',
-        'react-dom': 'react-dom'
+        'react-dom': 'react-dom',
     },
     module: {
         rules: [
             {
                 test: /\.ts(x?)$/,
                 include: path.resolve(__dirname, 'src'),
-                loader: 'ts-loader'
+                loader: 'ts-loader',
             }
         ]
     },
     resolve: {
-        extensions: ['.ts', '.tsx', '.js']
+        extensions: ['.ts', '.tsx', '.js'],
     },
     plugins: [
         new CleanWebpackPlugin(),
-    ]
+    ],
 };