title: Critical dependency: the request of a dependency is an expression -- react-universal-component
body: <p><strong>Warning:</strong></p>
  <pre><code>[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
  </code></pre>
  <p><strong>App-root.js</strong></p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { AppContainer } from 'react-hot-loader';
  import Routes from './routes';
  
  function render(Component) {
    ReactDOM.render(
      &lt;AppContainer&gt;
        &lt;Component /&gt;
      &lt;/AppContainer&gt;,
      document.getElementById('react-root')
    );
  }
  
  render(Routes);
  
  if (module.hot) {
    module.hot.accept('./routes/index.js', () =&gt; {
      const NewRoutes = require('./routes/index.js').default;
  
      render(NewRoutes);
    });
  }
  </code></pre>
  <p><strong>src/routes/index.js</strong></p>
  <pre><code>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 }) =&gt;
    import(`../components/${page}`)
  );
  
  const Routes = () =&gt; (
    &lt;Router&gt;
      &lt;div&gt;
        &lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;
        &lt;Link to=&quot;/about&quot;&gt;About Me&lt;/Link&gt;
  
        &lt;Switch&gt;
          &lt;Route exact path=&quot;/&quot;&gt;
            &lt;UniversalComponent page=&quot;counter&quot; /&gt;
          &lt;/Route&gt;
  
          &lt;Route exact path=&quot;/about&quot;&gt;
            &lt;UniversalComponent page=&quot;about-me&quot; /&gt;
          &lt;/Route&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    &lt;/Router&gt;
  );
  
  export default hot(module)(Routes);
  </code></pre>
  <p><strong>webpack.dev.js</strong></p>
  <pre><code>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,
    },
  };
  </code></pre>
  <p><strong>Versions</strong></p>
  <pre><code>&quot;babel-plugin-syntax-dynamic-import&quot;: &quot;^6.18.0&quot;,
  &quot;babel-plugin-transform-runtime&quot;: &quot;^6.23.0&quot;,
  &quot;babel-plugin-universal-import&quot;: &quot;^3.0.0&quot;,
  &quot;babel-preset-env&quot;: &quot;^1.7.0&quot;,
  &quot;babel-preset-react&quot;: &quot;^6.24.1&quot;,
  &quot;express&quot;: &quot;^4.16.3&quot;,
  &quot;express-static-gzip&quot;: &quot;^0.3.2&quot;,
  &quot;nodemon&quot;: &quot;^1.18.3&quot;,
  &quot;react&quot;: &quot;^16.4.1&quot;,
  &quot;react-dom&quot;: &quot;^16.4.1&quot;,
  &quot;react-router&quot;: &quot;^4.3.1&quot;,
  &quot;react-router-dom&quot;: &quot;^4.3.1&quot;,
  &quot;react-universal-component&quot;: &quot;^3.0.0&quot;,
  &quot;webpack&quot;: &quot;^4.16.2&quot;,
  &quot;webpack-cli&quot;: &quot;^3.1.0&quot;,
  &quot;webpack-dev-middleware&quot;: &quot;^3.1.3&quot;,
  &quot;webpack-hot-middleware&quot;: &quot;^2.22.3&quot;
  </code></pre>
  <p>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.</p>