Use gatsby-plugin-asias-imports to resolve React

docs/gatsby-config.js

@@ -1,3 +1,5 @@
+const path = require('path')
+
 module.exports = {
   siteMetadata: {
     title: 'Primer CSS',
@@ -26,6 +28,15 @@ module.exports = {
         trackingId: 'UA-126681523-2',
         anonymize: true
       }
+    },
+    {
+      resolve: `gatsby-plugin-alias-imports`,
+      options: {
+        alias: {
+          'styled-components': path.resolve(__dirname, 'node_modules', 'styled-components'),
+          'react': path.resolve(__dirname, 'node_modules', 'react'),
+        }
+      }
     }
   ]
 }

docs/package-lock.json

@@ -9222,6 +9222,14 @@
         }
       }
     },
+    "gatsby-plugin-alias-imports": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-alias-imports/-/gatsby-plugin-alias-imports-1.0.5.tgz",
+      "integrity": "sha512-q58JrSjuVNh4NApamqElR0zqwm55FOb9vFAVb2i2ftPRu0uYzWJkbOz2IN3vSw7a+5PmGzX7VL8XDFXlNHrMNA==",
+      "requires": {
+        "@babel/runtime": "^7.2.0"
+      }
+    },
     "gatsby-plugin-catch-links": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-2.2.1.tgz",

docs/package.json

@@ -18,6 +18,7 @@
     "autoprefixer": "^9.6.1",
     "chroma-js": "^2.0.6",
     "gatsby": "^2.10.4",
+    "gatsby-plugin-alias-imports": "^1.0.5",
     "gatsby-plugin-google-analytics": "^2.1.7",
     "gatsby-plugin-sass": "^2.1.0",
     "gatsby-plugin-svgr": "^2.0.2",

package.json

@@ -44,8 +44,8 @@
   },
   "devDependencies": {
     "@octokit/rest": "^16.34.0",
-    "@storybook/addon-viewport": "5.0.11",
-    "@storybook/react": "5.0.11",
+    "@storybook/addon-viewport": "5.3.18",
+    "@storybook/react": "5.3.18",
     "autoprefixer": "9.4.7",
     "code-blocks": "^1.1.0",
     "colorette": "^1.1.0",