require !== null results in Cannot find module "."

[johann-sonntagbauer]

• bug report

Webpack version:
2.1.0-beta.13

Please tell us about your environment:
Windows 8.1

Current behavior:
import 'moment-jdateformatparser';

In the resulting bundle all occurrences of require are replaced. But the null check in the following if statement is replaced in a faulty way.

original

  if (typeof this.moment === 'undefined' && typeof require !== 'undefined' && require !== null) {
    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { //Check if the environment is Node.js
      hookMoment(require('moment')); //if it is, we have to require it different (without the surrounding Array)
    } else {
      require(['moment'], function (moment) {
        hookMoment(moment);
      });
    }
  } else {
    hookMoment(this.moment);
  }

It seems that the mechanism evaluates the require statement without any module and generates the module not found error clause.

bundle output

      if (typeof this.moment === 'undefined' && "function" !== 'undefined' && !(function webpackMissingModule() { var e = new Error("Cannot find module \".\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()) !== null) {
        if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { //Check if the environment is Node.js
          hookMoment(__webpack_require__(27)); //if it is, we have to require it different (without the surrounding Array)
        } else {
          Promise.resolve().catch(function(err) { __webpack_require__.oe(err); }).then(function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(27)]; (function (moment) {
            hookMoment(moment);
          }.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));});
        }
      } else {
        hookMoment(this.moment);
      }

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.

var webpackConfig = {
  devtool: 'cheap-source-map',

  resolve: {
    extensions: ['', '.js']
  },
  module: {
    loaders: [
      {test: /\.scss$/, loader: 'raw'},
      {test: /\.css$/, loader: 'raw'},
      {test: /\.json$/, loader: 'json'},
      {test: /\.(mp4|svg|png|jpg|gif|otf|eot|ttf|woff|woff2)$/, loader: 'url'},
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015', 'stage-2'],
          plugins: ['babel-plugin-espower']
        },
        include: [path.join(__dirname, 'src'), path.join(__dirname, 'spec')]
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      React: 'react',
      TestUtils: 'react/lib/ReactTestUtils',
      Promise: 'bluebird'
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
    new webpack.NoErrorsPlugin(),
  ],
  externals: {
    'cheerio': 'window',
    'react/addons': true,
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true
  },
  stats: {
    colors: true
  }
};

• What is the expected behavior?
  That only the require reference is replaced by the mechanism like so

require !== null   ->    __webpack_require__ != null

or something related to that.

• Browser: [all ]
• Language: [ES6/7 | ES5 ]

[johann-sonntagbauer]

Now I am confused. I added following plugin and it seems to work now
new webpack.ContextReplacementPlugin(/moment-jdateformatparser/, /moment-jdateformatparser\.js/),
but i don't understand why.

the resulting bundle now containes

      if (typeof this.moment === 'undefined' && "function" !== 'undefined' && __webpack_require__(885) !== null) {
        if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { //Check if the environment is Node.js
          hookMoment(__webpack_require__(27)); //if it is, we have to require it different (without the surrounding Array)
        } else {
          Promise.resolve().catch(function(err) { __webpack_require__.oe(err); }).then(function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(27)]; (function (moment) {
            hookMoment(moment);
          }.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));});
        }
      } else {
        hookMoment(this.moment);
      }

which replaces the require reference with __webpack_require__(885) which seems to be a reference on its own module.

Is that the way to fix that issue?

[bensleveritt]

Ah, good someone else has this problem too.

The Cesium lib is using an if (require.toUrl) check to define loading behaviour, but Webpack replaces it with the aforementioned error message. The expected behaviour is to replace it with __webpack_require__ or so.

[polarmutex]

@bensleveritt
Had the same issue with cesium, but it looks like setting
unknownContextCritical: false,
unknownContextRegExp: /^./.*$/

got it working with webpack2

[manuelnas]

Hey @bryall I tried adding your RegExp but webpack says it's invalid (Unexpected token) at the second dot. I tried escaping the middle slash (unknownContextRegExp: /^.\/.*$/) which does remove the previous error but generates an out of memory error instead. How'd you get this working?

[0181532686cf4a31163be0bf3e6bb6732bf]

Same problem here

[0181532686cf4a31163be0bf3e6bb6732bf]

@manuelnas I tried escaping too and it worked for me. I'm using webpack 2.3.3

[luZheng-1122]

I am working on this problem for over 2days, and I just made it through by hardcoding the URL string in 'require' instead of passing on a variable:
change:
const data = require(URL);
to:
const data = require('./file.json');

I know the hard-code is bad, but I cannot find any other solution to it.
It would be very grateful if someone could fix it.

[alexander-akait]

webpack@2 is officially deprecated. Closing due to inactivity. Please test with latest version and feel free to recreate issue if problem still exists. Thanks!