Critical dependency: the request of a dependency is an expression -- react-universal-component

Question

Warning:

[HMR] bundle has 2 warnings
client.js:189 ./node_modules/babel-plugin-universal-import/universalImport.js 33:18-37
Critical dependency: the request of a dependency is an expression
 @ ./src/routes/index.js
 @ ./src/app-root.js
 @ multi babel-runtime/regenerator webpack-hot-middleware/client?reload=true ./src/app-root.js
./node_modules/react-universal-component/dist/utils.js 59:11-29
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/react-universal-component/dist/index.js
 @ ./src/routes/index.js
 @ ./src/app-root.js
 @ multi babel-runtime/regenerator webpack-hot-middleware/client?reload=true ./src/app-root.js

App-root.js

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Routes from './routes';

function render(Component) {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('react-root')
  );
}

render(Routes);

if (module.hot) {
  module.hot.accept('./routes/index.js', () => {
    const NewRoutes = require('./routes/index.js').default;

    render(NewRoutes);
  });
}

src/routes/index.js

import React from 'react';
import { hot } from 'react-hot-loader';
import universal from 'react-universal-component';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { Switch } from 'react-router';

const UniversalComponent = universal(({ page }) =>
  import(`../components/${page}`)
);

const Routes = () => (
  <Router>
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About Me</Link>

      <Switch>
        <Route exact path="/">
          <UniversalComponent page="counter" />
        </Route>

        <Route exact path="/about">
          <UniversalComponent page="about-me" />
        </Route>
      </Switch>
    </div>
  </Router>
);

export default hot(module)(Routes);

webpack.dev.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  mode: 'development',
  devtool: 'source-map',

  entry: {
    // We want our client to reload in case a module doesn't recognise that it's parent changed
    vendor: ['react', 'react-dom'],
    main: [
      'babel-runtime/regenerator',
      'webpack-hot-middleware/client?reload=true',
      './src/app-root.js',
    ],
  },

  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name]-[hash:8].js',
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.js/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
        exclude: /node_modules/,
      },

      {
        test: /\.css/,
        use: [
          {
            loader: 'style-loader',
          },

          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: true,
              localIdentName: '[name]--[local]--[hash:base64:8]',
            },
          },
        ],
      },

      {
        test: /\.scss/,
        use: [
          {
            loader: 'style-loader',
          },

          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: true,
            },
          },

          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },

      {
        test: /\.html/,
        use: [
          {
            loader: 'html-loader',
            options: {
              attrs: ['img:src'],
            },
          },
        ],
      },

      {
        test: /\.(jpg|gif|png)/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name]-[hash:8].[ext]',
            },
          },
        ],
      },
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
      },
    }),
    // new BundleAnalyzerPlugin({
    //   generateStatsFile: true,
    // }),
  ],

  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'initial',
          minChunks: 2,
        },
      },
    },
  },

  devServer: {
    contentBase: 'dist',
    overlay: true,
    stats: {
      colors: true,
    },
    hot: true,
  },
};

Versions

"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-universal-import": "^3.0.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"express": "^4.16.3",
"express-static-gzip": "^0.3.2",
"nodemon": "^1.18.3",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-universal-component": "^3.0.0",
"webpack": "^4.16.2",
"webpack-cli": "^3.1.0",
"webpack-dev-middleware": "^3.1.3",
"webpack-hot-middleware": "^2.22.3"

I have no clue why am I seeing this warning when I am using react-universal-component. I only see this when HMR is enabled and when I use react-universal-component.

Solution

I think it is the latest [email protected], install [email protected] and it will run without the warning.