Updates/nov dec

.eslintrc.js

@@ -12,6 +12,10 @@ module.exports = {
         'plugin:prettier/recommended',
         'plugin:security/recommended',
     ],
+    globals: {
+        __BROWSER__: true,
+        __SERVER__: true,
+    },
     plugins: ['babel', 'import', 'prettier', 'flowtype', 'security'],
     settings: {
         'import/resolver': {

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 2.1.0 (2018-12-17)
+
+-   Replaced deprecated `react-router-redux` with `connected-react-router`
+-   Update all dependencies to their most recent version
+-   Renamed `__CLIENT__` global to `__BROWSER__`
+-   Added missing `__SERVER__` and `__BROWSER__` globals to ESLint config
+-   Using `exportOnlyLocals: true` instead of `require('css-loader/locals')` in `loaders.js` since it was changed in css-loader
+-   Fixed an incorrect babel-plugin ([182d46f](182d46fc344c9687315acb06adf2aa209c6ba0dd) thanks [andriibyk](https://github.com/andriibyk))
+-   Removed an unnecessary double `require.resolve` ([ea2dfdd](https://github.com/manuelbieh/react-ssr-setup/commit/ea2dfdd84acd2b005ccef40000708275f388b4e6) thanks [andriibyk](https://github.com/andriibyk))
+-   Fixed #26 () (thanks [gswirrl](https://github.com/gswirrl))
+
 ## 2.0.2 (2018-10-26)
 
 -   Added eslint-plugin-react-hooks

config/webpack.config.js/loaders.js

@@ -68,8 +68,9 @@ const cssModuleLoaderServer = {
     test: cssModuleRegex,
     use: [
         {
-            loader: require.resolve('css-loader/locals'),
+            loader: require.resolve('css-loader'),
             options: {
+                exportOnlyLocals: true,
                 camelCase: true,
                 importLoaders: 1,
                 modules: true,

config/webpack.config.js/plugins.js

@@ -12,7 +12,7 @@ const client = [
     new webpack.DefinePlugin(env.stringified),
     new webpack.DefinePlugin({
         __SERVER__: 'false',
-        __CLIENT__: 'true',
+        __BROWSER__: 'true',
     }),
     new MiniCssExtractPlugin({
         filename:
@@ -27,7 +27,7 @@ const client = [
 const server = [
     new webpack.DefinePlugin({
         __SERVER__: 'true',
-        __CLIENT__: 'false',
+        __BROWSER__: 'false',
     }),
 ];
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ssr-setup",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "author": "Manuel Bieh <node@manuelbieh.de> (https://github.com/manuelbieh)",
   "license": "MIT",
   "engines": {
@@ -38,91 +38,91 @@
   "dependencies": {
     "body-parser": "^1.18.3",
     "chalk": "^2.4.1",
-    "cors": "^2.8.4",
-    "dotenv": "^6.1.0",
+    "connected-react-router": "^6.0.0",
+    "cors": "^2.8.5",
+    "dotenv": "^6.2.0",
     "express": "^4.16.4",
     "express-manifest-helpers": "^0.5.0",
     "history": "^4.7.2",
-    "i18next": "^12.0.0",
-    "react": "^16.6.0",
-    "react-dom": "^16.6.0",
+    "i18next": "^13.0.0",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
     "react-helmet": "^5.2.0",
-    "react-i18next": "^8.1.2",
-    "react-redux": "^5.1.0",
+    "react-i18next": "^8.4.0",
+    "react-redux": "^6.0.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
-    "react-router-redux": "^5.0.0-alpha.9",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
     "serve-static": "^1.13.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.1.0",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.2.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
     "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-env": "^7.2.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
-    "@svgr/webpack": "^3.1.0",
-    "autoprefixer": "^9.3.1",
+    "@svgr/webpack": "^4.1.0",
+    "autoprefixer": "^9.4.3",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.4",
-    "babel-plugin-named-asset-import": "^0.2.2",
+    "babel-plugin-named-asset-import": "^0.2.3",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "cross-env": "^5.2.0",
-    "css-hot-loader": "^1.4.1",
-    "css-loader": "^1.0.0",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.6.0",
-    "eslint": "^5.7.0",
-    "eslint-config-prettier": "^3.1.0",
+    "css-hot-loader": "^1.4.3",
+    "css-loader": "^2.0.1",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
+    "eslint": "^5.10.0",
+    "eslint-config-prettier": "^3.3.0",
     "eslint-config-wiremore": "^2.2.1",
-    "eslint-plugin-babel": "^5.2.1",
-    "eslint-plugin-flowtype": "^3.0.0",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-flowtype": "^3.2.0",
     "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.10.0",
     "eslint-plugin-react-hooks": "^0.0.0",
     "eslint-plugin-security": "^1.4.0",
     "file-loader": "^2.0.0",
-    "flow-bin": "^0.84.0",
-    "husky": "^1.1.2",
+    "flow-bin": "^0.89.0",
+    "husky": "^1.2.1",
     "install-deps-postmerge": "^1.0.2",
     "jest": "^23.6.0",
-    "lint-staged": "^7.3.0",
-    "mini-css-extract-plugin": "^0.4.4",
-    "nodemon": "^1.18.3",
-    "opn-cli": "^3.1.0",
-    "plop": "^2.1.0",
+    "lint-staged": "^8.1.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "nodemon": "^1.18.9",
+    "opn-cli": "^4.0.0",
+    "plop": "^2.2.0",
     "postcss-assets": "^5.0.0",
-    "postcss-custom-properties": "^8.0.8",
+    "postcss-custom-properties": "^8.0.9",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "postcss-nested": "^4.1.0",
+    "postcss-nested": "^4.1.1",
     "postcss-normalize": "^7.0.1",
-    "prettier": "^1.14.3",
-    "puppeteer": "^1.9.0",
-    "react-dev-utils": "^6.0.5",
+    "prettier": "^1.15.3",
+    "puppeteer": "^1.11.0",
+    "react-dev-utils": "^6.1.1",
     "redux-mock-store": "^1.5.3",
-    "regenerator-runtime": "^0.12.1",
+    "regenerator-runtime": "^0.13.1",
     "rimraf": "^2.6.2",
     "stats-webpack-plugin": "^0.7.0",
     "url-loader": "^1.1.2",
-    "webpack": "^4.23.1",
+    "webpack": "^4.27.1",
     "webpack-bundle-analyzer": "^3.0.3",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10",
     "webpack-hot-middleware": "^2.24.3",
     "webpack-manifest-plugin": "^2.0.4",
     "webpack-node-externals": "^1.7.2",
-    "write-file-webpack-plugin": "^4.4.1"
+    "write-file-webpack-plugin": "^4.5.0"
   }
 }

scripts/build.js

@@ -3,7 +3,7 @@ const rimraf = require('rimraf');
 
 const webpackConfig = require('../config/webpack.config.js')(process.env.NODE_ENV || 'production');
 const paths = require('../config/paths');
-const { logMessage, compilerPromise } = require('./utils');
+const { logMessage, compilerPromise, sleep } = require('./utils');
 
 const { choosePort } = require('react-dev-utils/WebpackDevServerUtils');
 
@@ -22,6 +22,7 @@ const generateStaticHTML = async () => {
 
     script.on('start', async () => {
         try {
+            await sleep(2000);
             const browser = await puppeteer.launch();
             const page = await browser.newPage();
             await page.goto(`http://localhost:${port}`);

scripts/utils.js

@@ -19,7 +19,10 @@ const compilerPromise = (name, compiler) => {
     });
 };
 
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
 module.exports = {
-    logMessage,
     compilerPromise,
+    logMessage,
+    sleep,
 };

src/client/index.js

@@ -1,13 +1,14 @@
 import React from 'react';
-import createHistory from 'history/createBrowserHistory';
 import { hydrate } from 'react-dom';
 import { Provider } from 'react-redux';
-import { ConnectedRouter as Router, routerMiddleware } from 'react-router-redux';
+import { ConnectedRouter as Router, routerMiddleware } from 'connected-react-router';
+import { configureStore } from '../shared/store';
 import App from '../shared/App';
 import IntlProvider from '../shared/i18n/IntlProvider';
-import { configureStore } from '../shared/store';
+import createHistory from '../shared/store/history';
+
+const browserHistory = createHistory();
 
-const browserHistory = window.browserHistory || createHistory();
 const store =
     window.store ||
     configureStore({
@@ -31,8 +32,7 @@ if (process.env.NODE_ENV === 'development') {
         module.hot.accept();
     }
 
-    if (!window.store || !window.browserHistory) {
-        window.browserHistory = browserHistory;
+    if (!window.store) {
         window.store = store;
     }
 }

src/shared/store/app/selectors.js

@@ -5,4 +5,7 @@ import type { AppT, LocaleT } from './types';
 
 export const app = (state: { app: AppT }): AppT => state.app;
 
-export const getLocale = createSelector([app], (app): LocaleT => app.locale);
+export const getLocale = createSelector(
+    [app],
+    (app): LocaleT => app.locale
+);

src/shared/store/history.js

@@ -0,0 +1,17 @@
+import createMemoryHistory from 'history/createMemoryHistory';
+import createBrowserHistory from 'history/createBrowserHistory';
+
+// import { createBrowserHistory, createMemoryHistory } from 'history';
+
+export const createUniversalHistory = () => {
+    if (__BROWSER__) {
+        const history = window.browserHistory || createBrowserHistory();
+        if (process.env.NODE_ENV === 'development' && !window.browserHistory) {
+            window.browserHistory = history;
+        }
+        return history;
+    }
+    return createMemoryHistory();
+};
+
+export default createUniversalHistory;

src/shared/store/rootReducer.js

@@ -1,11 +1,13 @@
 import { combineReducers } from 'redux';
-import { routerReducer as router } from 'react-router-redux';
-
+import { connectRouter } from 'connected-react-router';
+import createHistory from './history';
 import app from './app/reducer';
 
+const history = createHistory();
+
 const rootReducer = combineReducers({
     app,
-    router,
+    router: connectRouter(history),
 });
 
 export default rootReducer;