marcalexiei marcalexiei - 4 years ago 143
Javascript Question

Webpack 2: Director router is not working after compilation process

What is the current behavior?

It seems that some parts of director router constructor function are removed causing an unexpected error.

NOTE: This issue was not present in Webpack version 1.14.0.

Reproduction
https://github.com/marcalexiei/director-webpack-issue

Instructions in the readme.

There are two branches:


  • "master" where the issue can be reproduced.

  • "web-pack-1-14-0" has the previous version and has no errors.



What is the expected behavior?
No errors are generated and router init is a function.

Configuration file

module.exports = {
entry: {
// app's entry point
app: './src/app.js',

},
output: {
publicPath: '/public/',
path: path.join(__dirname, 'public'),
pathinfo: true,
filename: '[name].bundle.js',
},
resolve: {
modules: [
path.join(__dirname, './') , // frontend-app
'node_modules'
],
extensions: ['.js'],
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',

exclude: /node_modules/,
},
],
},
};


System specs


  • Chrome 55.0.2883.95

  • Safari 10.0.3

  • Node 6.3.1

  • Webpack 2.2.1

  • MacOS 10.12.3


Answer Source

TLDR: Add

resolve: {
  mainFields: ['browserify', 'browser', 'module', 'main']
}

to your config.


Explanation:

In webpack1 (https://webpack.github.io/docs/configuration.html#resolve-packagemains), the default value for that field was:

["webpack", "browser", "web", "browserify", ["jam", "main"], "main"]

However, in webpack2 (https://webpack.js.org/configuration/resolve/#resolve-mainfields) the default value is:

["browser", "module", "main"]

Note that a few items are missing in webpack2 default values. In particular, browserify is not present.

This are the builds exported by director:

  "browserify": "./build/director",
  "main": "./lib/director",

./build/director is the browser compatible build, ./lib/director is the node one. You have to tell webpack2 to use ./build/director, hence the "browserify" entry in your config.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download