React-starter-kit: react-optimize will cause a serious error

[MinJieLiu]

In webpack.config.js,react-optimize will cause a serious error.

presets: [
  ['env', {
    // Optimize React code for the production build
    // https://github.com/thejameskyle/babel-react-optimize
      ...isDebug ? [] : ['react-optimize'],
  ],
],

Reproduce the problem:

git clone https://github.com/kriasoft/react-starter-kit.git
yarn

/src/routes/admin/index.js Remove redirect

yarn run build -- --release && node build/server.js

Visit http://localhost:3000/admin

[frenzzy]

I'm unable to reproduce the issue with current master and node 7.9.0, demo.
The same with node 6.9.5, what node version do you use?

[MinJieLiu]

node v7.9 @frenzzy

[MinJieLiu]

This issue occurs after this submission
c47984d9fa917274ce4de87e72d35146ac4939d2

[langpavel]

I cannot reproduce too

[langpavel]

Can you publish branch on your public fork with changes causing this issue please?

[MinJieLiu]

I submitted the build folder
and you can run it.
https://github.com/MinJieLiu/react-starter-kit
@langpavel @frenzzy

[langpavel]

Confirmed. It does not happen in development, only in production build.

[langpavel]

All code samples work on client. but some does not work on SSR and only in production

What is really weird is fact, that almost same code behaves differently!

This must be issue with webpack plugins (some may be interfering)

This code works as expected:

diff --git a/src/routes/admin/index.js b/src/routes/admin/index.js
index e651363..195f839 100644
--- a/src/routes/admin/index.js
+++ b/src/routes/admin/index.js
@@ -11,7 +11,7 @@ import React from 'react';
 import Layout from '../../components/Layout';

 const title = 'Admin Page';
-const isAdmin = false;
+const isAdmin = true;

 export default {

This code does not work:

Does not matter if you comment out or delete lines.

diff --git a/src/routes/admin/index.js b/src/routes/admin/index.js
index e651363..addd5ee 100644
--- a/src/routes/admin/index.js
+++ b/src/routes/admin/index.js
@@ -18,9 +18,9 @@ export default {
   path: '/admin',

   async action() {
-    if (!isAdmin) {
-      return { redirect: '/login' };
-    }
+    // if (!isAdmin) {
+    //   return { redirect: '/login' };
+    // }

     const Admin = await require.ensure([], require => require('./Admin').default, 'admin');

I tried different notation, async import, it does not work too:

const Admin = (await import(/* webpackChunkName: "admin" */ './Admin')).default;

[frenzzy]

Looks like React components should not be mixed with async/await or generators inside single scope, for example:

// src/routes/admin/index.js
import React from 'react';
import Layout from '../../components/Layout';

const title = 'Admin Page';

export default {

  path: '/admin',

  action() {
    return require.ensure([], require => require('./Admin').default, 'admin')
      .then(Admin => ({ // simple function without async/await or generators
        title,
        chunk: 'admin',
        component: <Layout><Admin title={title} /></Layout>,
      }));
  },

};

[dmitru]

Thanks @frenzzy - your answer has solved the problem for me.
I wonder how you came up with it? :)

[frenzzy]

I just looked at the compiled code and played with it a bit :)