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 carbon-design-system#24.

.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,
+      },
+    ],
+  ],
+}

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: [

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() {

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() {