From ee213b389808922f3e1e9a9269dc76ea8709d284 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Wed, 19 Sep 2018 18:20:26 +0900
Subject: [PATCH] chore: use custom .babelrc

Gatsby's default .babelrc is configured in a manner that automatically imports Babel polyfills
based on usage of corresponding API.

Such Babel polyfills are loaded after RHL imports `react` module and before page bundle generated by Gatsby
imports `react-dom` module, which causes `react` and `react-dom` referring to different Symbol class object,
triggering gatsbyjs/gatsby#7003.

Refs #24.
---
 .babelrc           | 40 ++++++++++++++++++++++++++++++++++++++++
 gatsby-node.js     | 23 +----------------------
 src/pages/404.js   |  1 +
 src/pages/index.js |  2 ++
 4 files changed, 44 insertions(+), 22 deletions(-)
 create mode 100644 .babelrc

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000000..1f4610cb16
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,40 @@
+{
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        loose: true,
+        modules: false,
+        useBuiltIns: false,
+        shippedProposals: true,
+        targets: {
+          browsers: [">0.25%", "not dead"],
+        },
+      },
+    ],
+    [
+      "@babel/preset-react",
+      {
+        useBuiltIns: false,
+        pragma: "React.createElement",
+      },
+    ],
+  ],
+  plugins: [
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        loose: true,
+      },
+    ],
+    "@babel/plugin-syntax-dynamic-import",
+    "babel-plugin-macros",
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        helpers: true,
+        regenerator: true,
+      },
+    ],
+  ],
+}
diff --git a/gatsby-node.js b/gatsby-node.js
index 952bfb5990..2bfcd7ac6d 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -86,31 +86,10 @@ exports.createPages = ({ actions, graphql }) => {
 
 exports.onCreateWebpackConfig = ({ actions, getConfig, stage }) => {
   const config = getConfig();
-  const { entry, module } = config;
+  const { module } = config;
   const { rules } = module;
-  const { commons } = entry || {};
-  const appIndex = !commons ? -1 : commons.findIndex(item => /app$/i.test(item));
   actions.replaceWebpackConfig({
     ...config,
-    entry: stage !== 'develop' || appIndex < 0 ? entry : {
-      ...entry,
-      commons: [
-        // Ensure loading polyfills before RHL loads `react` module
-        // This prevents a condition where `Symbol` polyfill loaded
-        // after `react` is loaded and before `react-dom` is loaded
-        // which makes `react` and `react-dom` refer to different `Symbol` definitions.
-        //
-        // Refs:
-        // https://github.com/gatsbyjs/gatsby/issues/7003
-        // https://github.com/facebook/react/issues/8379#issuecomment-263962787
-        //
-        // The problem seems to happen only in development environment (see below link)
-        // and thus we patch `entry` WebPack config only for development environment.
-        // https://github.com/carbon-design-system/carbon-website-gatsby/issues/24#issuecomment-421593414
-        path.resolve(__dirname, 'src/polyfills/index.js'),
-        ...commons,
-      ],
-    },
     module: {
       ...module,
       rules: [
diff --git a/src/pages/404.js b/src/pages/404.js
index 71d68b57e4..2462baccdf 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Layout from "../components/layouts";
 import FourOhFour from "../components/404";
 
+import '../polyfills';
 
 class NotFoundPage extends React.Component {
   render() {
diff --git a/src/pages/index.js b/src/pages/index.js
index 3569a15463..5f15d6ad2a 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -14,6 +14,8 @@ import resourcesIll from '../content/homepage/images/resources.png';
 import styleIll from '../content/homepage/images/style.png';
 import scatter from '../content/homepage/images/scatter.svg';
 
+import '../polyfills';
+
 class IndexPage extends React.Component {
 
   componentDidMount() {