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