Merge pull request reduxjs#3920 from andrewmcgivery/master

Former-commit-id: 756ba19

Author: markerikson

errors.json

@@ -0,0 +1,19 @@
+{
+  "0": "It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function.",
+  "1": "Expected the enhancer to be a function.",
+  "2": "Expected the reducer to be a function.",
+  "3": "You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.",
+  "4": "Expected the listener to be a function.",
+  "5": "You may not call store.subscribe() while the reducer is executing. If you would like to be notified after the store has been updated, subscribe from a component and invoke store.getState() in the callback to access the latest state. See https://redux.js.org/api/store#subscribelistener for more details.",
+  "6": "You may not unsubscribe from a store listener while the reducer is executing. See https://redux.js.org/api/store#subscribelistener for more details.",
+  "7": "Actions must be plain objects. Use custom middleware for async actions.",
+  "8": "Actions may not have an undefined \"type\" property. Have you misspelled a constant?",
+  "9": "Reducers may not dispatch actions.",
+  "10": "Expected the nextReducer to be a function.",
+  "11": "Expected the observer to be an object.",
+  "12": "bindActionCreators expected an object or a function, instead received . Did you write \"import ActionCreators from\" instead of \"import * as ActionCreators from\"?",
+  "13": "Dispatching while constructing your middleware is not allowed. Other middleware would not be applied to this dispatch.",
+  "14": "Reducer \"\" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined.",
+  "15": "Reducer \"\" returned undefined when probed with a random type. Don't try to handle  or other actions in \"redux/*\" namespace. They are considered private. Instead, you must return the current state for any unknown actions, unless it is undefined, in which case you must return the initial state, regardless of the action type. The initial state may not be undefined, but can be null.",
+  "16": "Super expression must either be null or a function"
+}

package-lock.json.REMOVED.git-id

@@ -63,7 +63,7 @@
     "@babel/preset-flow": "^7.9.0",
     "@babel/preset-typescript": "^7.9.0",
     "@babel/register": "^7.9.0",
-    "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
     "@types/jest": "^25.2.1",

package.json

@@ -14,12 +14,12 @@ const babelRuntimeVersion = pkg.dependencies['@babel/runtime'].replace(
   ''
 )
 
-const makeExternalPredicate = (externalArr) => {
+const makeExternalPredicate = externalArr => {
   if (externalArr.length === 0) {
     return () => false
   }
   const pattern = new RegExp(`^(${externalArr.join('|')})($|/)`)
-  return (id) => pattern.test(id)
+  return id => pattern.test(id)
 }
 
 export default [
@@ -29,21 +29,22 @@ export default [
     output: { file: 'lib/redux.js', format: 'cjs', indent: false },
     external: makeExternalPredicate([
       ...Object.keys(pkg.dependencies || {}),
-      ...Object.keys(pkg.peerDependencies || {}),
+      ...Object.keys(pkg.peerDependencies || {})
     ]),
     plugins: [
       nodeResolve({
-        extensions,
+        extensions
       }),
       typescript({ useTsconfigDeclarationDir: true }),
       babel({
         extensions,
         plugins: [
           ['@babel/plugin-transform-runtime', { version: babelRuntimeVersion }],
+          ['./scripts/mangleErrors.js', { minify: false }]
         ],
         babelHelpers: 'runtime'
-      }),
-    ],
+      })
+    ]
   },
 
   // ES
@@ -52,24 +53,25 @@ export default [
     output: { file: 'es/redux.js', format: 'es', indent: false },
     external: makeExternalPredicate([
       ...Object.keys(pkg.dependencies || {}),
-      ...Object.keys(pkg.peerDependencies || {}),
+      ...Object.keys(pkg.peerDependencies || {})
     ]),
     plugins: [
       nodeResolve({
-        extensions,
+        extensions
       }),
       typescript({ tsconfigOverride: noDeclarationFiles }),
       babel({
         extensions,
         plugins: [
           [
             '@babel/plugin-transform-runtime',
-            { version: babelRuntimeVersion, useESModules: true },
+            { version: babelRuntimeVersion, useESModules: true }
           ],
+          ['./scripts/mangleErrors.js', { minify: false }]
         ],
         babelHelpers: 'runtime'
-      }),
-    ],
+      })
+    ]
   },
 
   // ES for Browsers
@@ -78,25 +80,27 @@ export default [
     output: { file: 'es/redux.mjs', format: 'es', indent: false },
     plugins: [
       nodeResolve({
-        extensions,
+        extensions
       }),
       replace({
-        'process.env.NODE_ENV': JSON.stringify('production'),
+        'process.env.NODE_ENV': JSON.stringify('production')
       }),
       typescript({ tsconfigOverride: noDeclarationFiles }),
       babel({
         extensions,
         exclude: 'node_modules/**',
+        plugins: [['./scripts/mangleErrors.js', { minify: true }]],
+        skipPreflightCheck: true
       }),
       terser({
         compress: {
           pure_getters: true,
           unsafe: true,
           unsafe_comps: true,
-          warnings: false,
-        },
-      }),
-    ],
+          warnings: false
+        }
+      })
+    ]
   },
 
   // UMD Development
@@ -106,21 +110,22 @@ export default [
       file: 'dist/redux.js',
       format: 'umd',
       name: 'Redux',
-      indent: false,
+      indent: false
     },
     plugins: [
       nodeResolve({
-        extensions,
+        extensions
       }),
       typescript({ tsconfigOverride: noDeclarationFiles }),
       babel({
         extensions,
         exclude: 'node_modules/**',
+        plugins: [['./scripts/mangleErrors.js', { minify: false }]]
       }),
       replace({
-        'process.env.NODE_ENV': JSON.stringify('development'),
-      }),
-    ],
+        'process.env.NODE_ENV': JSON.stringify('development')
+      })
+    ]
   },
 
   // UMD Production
@@ -130,28 +135,30 @@ export default [
       file: 'dist/redux.min.js',
       format: 'umd',
       name: 'Redux',
-      indent: false,
+      indent: false
     },
     plugins: [
       nodeResolve({
-        extensions,
+        extensions
       }),
       typescript({ tsconfigOverride: noDeclarationFiles }),
       babel({
         extensions,
         exclude: 'node_modules/**',
+        plugins: [['./scripts/mangleErrors.js', { minify: true }]],
+        skipPreflightCheck: true
       }),
       replace({
-        'process.env.NODE_ENV': JSON.stringify('production'),
+        'process.env.NODE_ENV': JSON.stringify('production')
       }),
       terser({
         compress: {
           pure_getters: true,
           unsafe: true,
           unsafe_comps: true,
-          warnings: false,
-        },
-      }),
-    ],
-  },
+          warnings: false
+        }
+      })
+    ]
+  }
 ]

rollup.config.js

@@ -0,0 +1 @@
+d8b8502a52b248ac7e5ebc22f33a4763e05af8b2

scripts/mangleErrors.js.REMOVED.git-id

@@ -0,0 +1,15 @@
+/**
+ * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
+ *
+ * Do not require this module directly! Use normal throw error calls. These messages will be replaced with error codes
+ * during build.
+ * @param {number} code
+ */
+function formatProdErrorMessage(code: number) {
+  return (
+    `Minified Redux error #${code}; visit https://redux.js.org/Errors?code=${code} for the full message or ` +
+    'use the non-minified dev environment for full errors. '
+  )
+}
+
+export default formatProdErrorMessage

src/utils/formatProdErrorMessage.ts

@@ -10,7 +10,8 @@
     "@docusaurus/preset-classic": "2.0.0-alpha.70",
     "classnames": "2.2.6",
     "react": "16.13.0",
-    "react-dom": "16.13.0"
+    "react-dom": "16.13.0",
+    "url-search-params-polyfill": "^8.1.0"
   },
   "browserslist": {
     "production": [

website/package-lock.json.REMOVED.git-id

@@ -0,0 +1,62 @@
+import React from 'react'
+import Layout from '@theme/Layout'
+import { useLocation } from '@docusaurus/router'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import styles from './styles.module.css'
+import errorCodes from '../../../errors.json'
+import 'url-search-params-polyfill'
+
+function Errors() {
+  const location = useLocation()
+  const context = useDocusaurusContext()
+  const { siteConfig = {} } = context
+  const errorCode = new URLSearchParams(location.search).get('code')
+  const error = errorCodes[errorCode]
+
+  return (
+    <Layout
+      title={`${siteConfig.title} - A predictable state container for JavaScript apps.`}
+      description="A predictable state container for JavaScript apps."
+    >
+      <main className={styles.mainFull}>
+        <h1>Production Error Codes</h1>
+        <p>
+          When Redux is built and running in production, error text is replaced
+          by indexed error codes to save on bundle size. These errors will
+          provide a link to this page with more information about the error
+          below.
+        </p>
+        {error && (
+          <React.Fragment>
+            <p>
+              <strong>
+                The full text of the error you just encountered is:
+              </strong>
+            </p>
+            <code className={styles.errorDetails}>{error}</code>
+          </React.Fragment>
+        )}
+
+        <h2>All Error Codes</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>Code</th>
+              <th>Message</th>
+            </tr>
+          </thead>
+          <tbody>
+            {Object.keys(errorCodes).map(code => (
+              <tr>
+                <td>{code}</td>
+                <td>{errorCodes[code]}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </main>
+    </Layout>
+  )
+}
+
+export default Errors

website/package.json

@@ -41,3 +41,31 @@
   max-height: 16px;
   fill: var(--ifm-color-primary);
 }
+
+.mainFull {
+  padding: 34px 16px;
+  width: 100%;
+  max-width: var(--ifm-container-width);
+  margin: 0px auto;
+}
+.mainFull h1 {
+  font-size: 3rem;
+  color: var(--ifm-heading-color);
+  font-weight: var(--ifm-heading-font-weight);
+  line-height: var(--ifm-heading-line-height);
+}
+
+.mainFull p {
+  margin-bottom: var(--ifm-leading);
+  margin-top: 0;
+}
+
+.errorDetails {
+  color: #ff6464;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 30px 0;
+  font-weight: bold;
+  background-color: rgba(255, 100, 100, 0.1);
+  display: block;
+}