Merge pull request #125 from CMSgov/staging

Docs: Fix IE 11 in production builds

package.json

@@ -81,7 +81,7 @@
     "through2": "^2.0.3",
     "tota11y": "^0.1.6",
     "vinyl-source-stream": "^1.1.0",
-    "webpack": "^3.5.3",
+    "webpack": "^3.5.5",
     "webpack-dev-middleware": "^1.12.0",
     "webpack-hot-middleware": "^2.18.2",
     "yargs": "^8.0.2",

packages/docs/src/scripts/components/Nav.jsx

@@ -35,7 +35,7 @@ const Nav = props => {
     <VerticalNav
       className='c-nav__list'
       items={expandSelectedItems(props.items, props.selectedId)}
-      selectedId={props.selectedId}
+      selectedId={props.selectedId ? props.selectedId : undefined}
     />
   );
 };

packages/docs/src/scripts/components/ReactComponentExample.jsx

@@ -9,14 +9,6 @@ import React from 'react';
 import reactElementToJSXString from 'react-element-to-jsx-string';
 require('prismjs/components/prism-jsx');
 
-// Add polyfills to fix react-element-to-jsx-string IE compatibility
-// github.com/algolia/react-element-to-jsx-string/issues/147
-require('core-js/fn/array/includes');
-require('core-js/fn/array/fill');
-require('core-js/fn/function/name');
-require('core-js/fn/object/get-own-property-symbols');
-require('core-js/fn/string/includes');
-
 class ReactComponentExample extends React.PureComponent {
   highlightedMarkup() {
     const markup = reactElementToJSXString(this.props.renderComponent(), {

packages/docs/src/scripts/helpers/polyfills.js

@@ -0,0 +1,10 @@
+// Add polyfills to fix react-element-to-jsx-string IE compatibility. These
+// are included in a separate file because they need ran before any other
+// code in the bundle to avoid causing issues with React in production mode.
+// - github.com/algolia/react-element-to-jsx-string/issues/147
+// - github.com/facebook/react/issues/8379#issuecomment-264867090
+require('core-js/fn/array/includes');
+require('core-js/fn/array/fill');
+require('core-js/fn/function/name');
+require('core-js/fn/object/get-own-property-symbols');
+require('core-js/fn/string/includes');

packages/docs/webpack.config.js

@@ -11,7 +11,10 @@ function createConfig(rootPath = '', hotReload = true) {
   let config = {
     context: __dirname,
     entry: {
-      index: ['./src/scripts/index.jsx'],
+      index: [
+        './src/scripts/helpers/polyfills.js',
+        './src/scripts/index.jsx'
+      ],
       example: ['./src/scripts/example.js']
     },
     output: {

yarn.lock

@@ -8795,9 +8795,9 @@ webpack-sources@^1.0.1:
     source-list-map "^2.0.0"
     source-map "~0.5.3"
 
-webpack@^3.5.3:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.5.3.tgz#e68653963bda146e212832c04a4d8041d2b4b8c8"
+webpack@^3.5.5:
+  version "3.5.5"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.5.5.tgz#3226f09fc8b3e435ff781e7af34f82b68b26996c"
   dependencies:
     acorn "^5.0.0"
     acorn-dynamic-import "^2.0.0"