Attempting to fix webpack build

Author: jxnblk

.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": [
     "env",
-    "stage-0"
+    "stage-0",
+    "react"
   ]
 }

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "prepublish": "babel src --out-dir dist",
     "start": "webpack-dev-server",
-    "build": "static-react site/App.js > site/index.html && NODE_ENV=production webpack -p",
+    "build": "NODE_ENV=production webpack -p --progress --colors",
+    "static": "static-react site/App.js > site/index.html",
     "deploy": "gh-pages -d site",
     "test": "ava"
   },

site/App.js

@@ -17,7 +17,7 @@ const initialState = {
   color: colors[4]
 }
 
-module.exports = createProvider(initialState)(props => (
+const App = createProvider(initialState)(props => (
   x(Wrap)([
     x(Style)(),
     x(Nav)(),
@@ -29,3 +29,5 @@ module.exports = createProvider(initialState)(props => (
     ])
   ])
 ))
+
+module.exports = App

site/Bar.js

@@ -3,11 +3,13 @@ const { connect } = require('funcup')
 const { Box } = require('../src')
 
 const map = s => ({ color: s.color })
-module.exports = connect(map)(props => x(Box)({
+
+const Bar = connect(map)(props => x(Box)({
   my: 2,
   css: {
     width: 64,
     height: 4,
     backgroundColor: props.color[5]
   }
 }))
+module.exports = Bar

site/Border.js

@@ -2,11 +2,12 @@ const x = require('reaxe')
 const { connect } = require('funcup')
 const { Box } = require('../src')
 
-module.exports = connect()(props => x(Box)({
+const Border = connect()(props => x(Box)({
   ...props,
   css: {
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: props.color[5]
   }
 }))
+module.exports = Border

site/Button.js

@@ -2,7 +2,7 @@ const x = require('reaxe')
 const { connect } = require('funcup')
 const { Button } = require('../src')
 
-module.exports = props => x(Button)({
+const Btn = props => x(Button)({
   ...props,
   css: {
     fontSize: 12,
@@ -20,3 +20,5 @@ module.exports = props => x(Button)({
     }
   }
 })
+
+module.exports = Btn

site/Container.js

@@ -1,10 +1,12 @@
 const x = require('reaxe')
 const { Box } = require('../src')
 
-module.exports = props => x(Box)({
+const Container = props => x(Box)({
   ...props,
   mx: 'auto',
   css: {
     maxWidth: 1024
   }
 })
+
+module.exports = Container

site/Examples.js

@@ -19,7 +19,7 @@ const {
 } = axs
 const Style = require('./Style')
 
-module.exports = connect()(props => {
+const Examples = connect()(props => {
   const scope = Object.assign({}, axs, {
     color: props.color
   })
@@ -93,6 +93,8 @@ module.exports = connect()(props => {
   ])
 })
 
+module.exports = Examples
+
 const grid = {
   name: 'Responsive Grid',
   code: `<Flex.wrap>

site/Features.js

@@ -7,7 +7,7 @@ const {
 } = require('../src')
 const Bar = require('./Bar')
 
-module.exports = props => x.section([
+const Features = props => x.section([
   x(Flex.wrap)({ mx: -2, my: 4 }, ...features.map(feature => (
     x(Box)({ px: 2, py: 3,  w: [ 1, 1/2 ] }, ...[
       x(Bar)(),
@@ -17,6 +17,8 @@ module.exports = props => x.section([
   )))
 ])
 
+module.exports = Features
+
 const features = [
   {
     heading: 'Responsive Typography and Layout',

site/Footer.js

@@ -8,7 +8,7 @@ const NavLink = require('./NavLink')
 const Logo = require('./Logo')
 const { inc } = require('./updaters')
 
-module.exports = connect()(props => x(Color)({
+const Footer = connect()(props => x(Color)({
   is: 'footer',
   color: props.color[5]
 }, ...[
@@ -41,3 +41,5 @@ module.exports = connect()(props => x(Color)({
     }),
   ]),
 ]))
+
+module.exports = Footer

site/Header.js

@@ -11,7 +11,7 @@ const {
 const Button = require('./Button')
 const { inc } = require('./updaters')
 
-module.exports = connect()(props => (
+const Header = connect()(props => (
   x(Box)({
     py: 4,
     css: {
@@ -64,3 +64,5 @@ module.exports = connect()(props => (
     ])
   ])
 ))
+
+module.exports = Header

site/Nav.js

@@ -10,7 +10,7 @@ const Logo = require('./Logo')
 const NavLink = require('./NavLink')
 const { nav } = x
 
-module.exports = connect()(props => nav([
+const Nav = connect()(props => nav([
   x(Color)({
     color: props.color[5]
   }, ...[
@@ -23,3 +23,5 @@ module.exports = connect()(props => nav([
     ])
   ])
 ]))
+
+module.exports = Nav

site/NavLink.js

@@ -1,7 +1,7 @@
 const x = require('reaxe')
 const { Text } = require('../src')
 
-module.exports = props => x(Text)({
+const NavLink = props => x(Text)({
   ...props,
   is: 'a',
   css: {
@@ -17,3 +17,5 @@ module.exports = props => x(Text)({
     }
   }
 })
+
+module.exports = NavLink

site/Wrap.js

@@ -1,7 +1,9 @@
 const x = require('reaxe')
 const { Box } = require('../src')
 
-module.exports = props => x(Box)({
+const Wrap = props => x(Box)({
   ...props,
   px: [ 2, null, 3, 4 ]
 })
+
+module.exports = Wrap

webpack.config.js

@@ -1,6 +1,8 @@
 const path = require('path')
 
 module.exports = {
+  devtool: false,
+
   entry: './site/entry.js',
 
   output: {