Fix server side rendering error

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [Unreleased]
 ### Added
 - Implement `Options` component. (#33)
+- Add webpack target `node` (#36)
 
 ## [0.0.1] - 2019-01-18
 - Initial release.

packages/web-ui/src/Book/LandscapeBook/styles.ts

@@ -1,4 +1,3 @@
-import css from "@emotion/css";
 import { TextAlignProperty } from "csstype";
 
 export const landscapeBook = {

packages/web-ui/styleguide.config.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const { parse: propsParser } = require('react-docgen-typescript');
-const webpackConfig = require('./webpack.config');
+const webpackConfig = require('./webpack.config.web');
 const pkg = require('./package.json');
 
 module.exports = {

packages/web-ui/webpack.config.common.js

@@ -0,0 +1,54 @@
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const { CheckerPlugin } = require('awesome-typescript-loader');
+const path = require('path');
+
+const srcDir = path.join(__dirname, 'src');
+const outDir = path.join(__dirname, 'dist');
+
+module.exports = {
+  entry: path.join(srcDir, 'index.ts'),
+  output: {
+    path: outDir,
+  },
+  mode: 'production',
+  devtool: 'source-map',
+  externals: {
+    react: 'react',
+    'react-dom': 'react-dom',
+    'react-dom/server': 'react-dom/server',
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.(ts|tsx)$/,
+        include: srcDir,
+        use: ['tslint-loader'],
+      },
+      {
+        test: /\.(ts|tsx)$/,
+        include: srcDir,
+        use: ['babel-loader', 'awesome-typescript-loader'],
+      },
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              prettier: false,
+              svgo: false,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin([outDir]),
+    new CheckerPlugin(),
+  ],
+};

packages/web-ui/webpack.config.js

@@ -1,56 +1,7 @@
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-const { CheckerPlugin } = require('awesome-typescript-loader');
-const path = require('path');
+const webConfig = require('./webpack.config.web');
+const nodeConfig = require('./webpack.config.node');
 
-const srcDir = path.join(__dirname, 'src');
-const outDir = path.join(__dirname, 'dist');
-
-module.exports = {
-  entry: path.join(srcDir, 'index.ts'),
-  output: {
-    path: outDir,
-    filename: 'index.js',
-    libraryTarget: 'commonjs2',
-  },
-  mode: 'production',
-  devtool: 'source-map',
-  externals: {
-    react: 'react',
-    'react-dom': 'react-dom',
-    'react-dom/server': 'react-dom/server',
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx'],
-  },
-  module: {
-    rules: [
-      {
-        enforce: 'pre',
-        test: /\.(ts|tsx)$/,
-        include: srcDir,
-        use: ['tslint-loader'],
-      },
-      {
-        test: /\.(ts|tsx)$/,
-        include: srcDir,
-        use: ['babel-loader', 'awesome-typescript-loader'],
-      },
-      {
-        test: /\.svg$/,
-        use: [
-          {
-            loader: '@svgr/webpack',
-            options: {
-              prettier: false,
-              svgo: false,
-            },
-          },
-        ],
-      },
-    ],
-  },
-  plugins: [
-    new CleanWebpackPlugin([outDir]),
-    new CheckerPlugin(),
-  ],
-};
+module.exports = [
+  webConfig,
+  nodeConfig,
+];

packages/web-ui/webpack.config.node.js

@@ -0,0 +1,13 @@
+const _ = require('lodash');
+const commonConfig = require('./webpack.config.common');
+
+module.exports = _.merge({},
+  commonConfig,
+  {
+    target: 'node',
+    output: {
+      filename: 'index.node.js',
+      libraryTarget: 'commonjs2',
+    },
+  },
+);

packages/web-ui/webpack.config.web.js

@@ -0,0 +1,12 @@
+const _ = require('lodash');
+const commonConfig = require('./webpack.config.common');
+
+module.exports = _.merge({},
+  commonConfig,
+  {
+    output: {
+      filename: 'index.js',
+      libraryTarget: 'commonjs2',
+    },
+  },
+);