Warning in webpack - critical dependency

[tomasztomys]

./node_modules/detect-browser/index.js 3:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

only in v4, in v3.0.1 it's okey

[DamonOehlman]

@tomasztomys Thanks for the report. Just wondering if you could provide a few more details on your environment configuration, such as a partial webpack.config.js file (i.e. just the bits that don't expose important stuff about your project).

[tomasztomys]

config.js

module.exports = {
  context: path.resolve(__dirname, '../'),
  stats: {
    children: false
  },
  entry: [
    '@babel/polyfill',
    path.resolve(__dirname, '../src/index.js'),
    path.resolve(__dirname, '../src/styles/index.scss')
  ],
  module: {
    rules: [
      {
        test: /(\.jpg|\.png|\.otf|\.woff|\.woff2|\.ttf|\.eot)$/,
        loader: 'file-loader'
      },
      {
        test: /\.svg$/,
        loader: 'file-loader',
        include: /node_modules/
      },
      {
        test: /\.svg$/,
        loader: 'raw-loader',
        exclude: /node_modules/
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, '../build')
  },
  plugins: [
    new webpack.ProvidePlugin({
      moment: 'moment'
    }),
    new HtmlWebpackPlugin({
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
      title: DEFAULT_PAGE_TITLE,
      template: path.resolve(__dirname, '../src/index.html')
    }),
    new ScriptExtHtmlWebpackPlugin({
      defaultAttribute: 'defer'
    }),
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /pl/)
  ],
  }
};

and dev.config.js (merged with config.js)

const path = require('path');
const merge = require('webpack-merge');
const Webpack = require('webpack');

const config = require('./config');

const port = process.env.npm_package_config_port;
const publicPath = process.env.npm_package_config_public_path;

module.exports = merge(config, {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'src'),
    compress: true,
    hot: true,
    historyApiFallback: true,
    publicPath: '/',
    port: port
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        use: [
          {
            loader: 'babel-loader',
          }
        ],
        exclude: /node_modules/
      },
      {
        test: /\.s?css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              sourceMap: true,
            }
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 2
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            }
          }
        ]
      }
    ]
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
    publicPath: publicPath
  },
  plugins: [
    new Webpack.NoEmitOnErrorsPlugin(),
    // do not emit compiled assets that include errors
    new Webpack.LoaderOptionsPlugin({
      debug: true
    }),
    new Webpack.HotModuleReplacementPlugin()
  ],
});

[DamonOehlman]

Cool thanks - it's pretty late here (in Australia), but I'll try to take a look first thing tomorrow and put a small repro case together to see if I can work out what is going on.

[bertrand-riviere]

hello,
i have the same warning than @tomasztomys and use the same kind of config (babel-loader, @babel/polyfill, etc..)
(thanks for this nice project!)

[severi]

this also happens when using the create-react-app https://github.com/facebook/create-react-app

[cs-NET]

It appears that because "require" is passed in as a variable via your factory constructor webpack has no way of knowing how it may be used therefore cannot optimize dependencies.

Does "require" even need to be passed into factory constructor as it does not appear to be used?

[DamonOehlman]

@cs-NET That explains everything. And no, not at all. The only reason it's done that was is that I opted to go with a umd transpilation target from typescript. This is mainly because a few people in the requirejs landscape have wanted to be able to use detect-browser also.

I haven't yet actually published this anywhere, so I think it's safe to switch typescript back to the commonjs transpilation. Later on I can create an override as a separate build and put generate the UMD build as part of a separate release pipeline (see #83) and everybody wins :)

I'll just go through that repro process now to validate this fixes it. Once I'm sure I'll publish a 4.0.1 fix release.

[DamonOehlman]

Thanks for the information and assistance in getting this sorted. @severi nice tip using create-react-app - definitely made reproing everything much faster.

4.0.1 has now landed and I expect that it will fix this issue nicely. Let me know if it doesn't though.