monnef monnef - 23 days ago 82
Javascript Question

Webpack suddenly broke

A week ago it was working fine. Now, without any changes (same PC and exactly same files - no diff against repo), after

npm install
it is no longer working and crashing with following error:

user@machine:~/workspace/work/project$ npm run build

> project@0.0.1 build /some_outer_path/some_path/workspace/work/project
> rimraf dist && webpack --progress --profile --bail

10% building modules 3/12 modules 9 active ...h-fe/node_modules/quill/dist/quill.jsModuleNotFoundError: Module not found: Error: Can't resolve 'css' in '/some_outer_path/some_path/workspace/work/project'
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/lib/Compilation.js:232:38
at onDoneResolving (/some_outer_path/some_path/workspace/work/project/node_modules/webpack/lib/NormalModuleFactory.js:40:20)
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/lib/NormalModuleFactory.js:159:21
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:3853:9
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:484:16
at iteratorCallback (/some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:1082:13)
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:988:16
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:3850:13
at apply (/some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:41:25)
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:76:12
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:484:16
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:1161:9
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:484:16
at iteratorCallback (/some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:1082:13)
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:988:16
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:1158:13
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/lib/NormalModuleFactory.js:216:19
at onResolved (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/Resolver.js:70:11)
at loggingCallbackWrapper (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at afterInnerCallback (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
at loggingCallbackWrapper (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at Resolver.applyPluginsAsyncSeriesBailResult1 (/some_outer_path/some_path/workspace/work/project/node_modules/tapable/lib/Tapable.js:108:46)
at innerCallback (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
at loggingCallbackWrapper (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at /some_outer_path/some_path/workspace/work/project/node_modules/tapable/lib/Tapable.js:210:15
at /some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:39:4
at loggingCallbackWrapper (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at afterInnerCallback (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
at loggingCallbackWrapper (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at Resolver.applyPluginsAsyncSeriesBailResult1 (/some_outer_path/some_path/workspace/work/project/node_modules/tapable/lib/Tapable.js:108:46)
resolve 'css' in '/some_outer_path/some_path/workspace/work/project'
Parsed request is a module
using description file: /some_outer_path/some_path/workspace/work/project/package.json (relative path: .)
after using description file: /some_outer_path/some_path/workspace/work/project/package.json (relative path: .)
resolve as module
/some_outer_path/some_path/workspace/work/node_modules doesn't exist or is not a directory
/some_outer_path/some_path/workspace/node_modules doesn't exist or is not a directory
/some_outer_path/some_path/node_modules doesn't exist or is not a directory
/some_outer_path/node_modules doesn't exist or is not a directory
/mnt/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /some_outer_path/some_path/workspace/work/project/node_modules
using description file: /some_outer_path/some_path/workspace/work/project/package.json (relative path: ./node_modules)
after using description file: /some_outer_path/some_path/workspace/work/project/package.json (relative path: ./node_modules)
using description file: /some_outer_path/some_path/workspace/work/project/package.json (relative path: ./node_modules/css)
as directory
/some_outer_path/some_path/workspace/work/project/node_modules/css doesn't exist
no extension
/some_outer_path/some_path/workspace/work/project/node_modules/css doesn't exist
.js
/some_outer_path/some_path/workspace/work/project/node_modules/css.js doesn't exist
.json
/some_outer_path/some_path/workspace/work/project/node_modules/css.json doesn't exist

/some_outer_path/some_path/workspace/work/project/node_modules/webpack/lib/Compilation.js:197
_this.errors.push(err);
^
TypeError: Cannot read property 'errors' of null
at errorAndCallback (/some_outer_path/some_path/workspace/work/project/node_modules/webpack/lib/Compilation.js:197:9)
at errorOrWarningAndCallback (/some_outer_path/some_path/workspace/work/project/node_modules/webpack/lib/Compilation.js:228:13)
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/lib/Compilation.js:232:12
at onDoneResolving (/some_outer_path/some_path/workspace/work/project/node_modules/webpack/lib/NormalModuleFactory.js:40:20)
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/lib/NormalModuleFactory.js:159:21
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:3853:9
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:484:16
at iteratorCallback (/some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:1082:13)
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:988:16
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:3850:13
at apply (/some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:41:25)
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:76:12
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:484:16
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:1161:9
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:484:16
at iteratorCallback (/some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:1082:13)
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:988:16
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/node_modules/async/dist/async.js:1158:13
at /some_outer_path/some_path/workspace/work/project/node_modules/webpack/lib/NormalModuleFactory.js:216:19
at onResolved (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/Resolver.js:70:11)
at loggingCallbackWrapper (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at afterInnerCallback (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
at loggingCallbackWrapper (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at Resolver.applyPluginsAsyncSeriesBailResult1 (/some_outer_path/some_path/workspace/work/project/node_modules/tapable/lib/Tapable.js:108:46)
at innerCallback (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/Resolver.js:125:19)
at loggingCallbackWrapper (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at /some_outer_path/some_path/workspace/work/project/node_modules/tapable/lib/Tapable.js:210:15
at /some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:39:4
at loggingCallbackWrapper (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at afterInnerCallback (/some_outer_path/some_path/workspace/work/project/node_modules/enhanced-resolve/lib/Resolver.js:138:10)

npm ERR! Linux 4.4.0-45-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.8.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! project@0.0.1 build: `rimraf dist && webpack --progress --profile --bail`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the project@0.0.1 build script 'rimraf dist && webpack --progress --profile --bail'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the project package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! rimraf dist && webpack --progress --profile --bail
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs project
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls project
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /some_outer_path/some_path/workspace/work/project/npm-debug.log


webpack.config.js (mostly from this seed - https://github.com/preboot/angular2-webpack/):

// Helper: root() is defined at the bottom
var path = require('path');
var webpack = require('webpack');

// Webpack Plugins
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;

/**
* Env
* Get npm lifecycle event to identify the environment
*/
var ENV = process.env.npm_lifecycle_event;
var isTestWatch = ENV === 'test-watch';
var isTest = ENV === 'test' || isTestWatch;
var isProd = ENV === 'build';

module.exports = function makeWebpackConfig() {
/**
* Config
* Reference: http://webpack.github.io/docs/configuration.html
* This is the object where all configuration gets set
*/
var config = {};

/**
* Devtool
* Reference: http://webpack.github.io/docs/configuration.html#devtool
* Type of sourcemap to use per build type
*/
if (isProd) {
config.devtool = 'source-map';
}
else if (isTest) {
config.devtool = 'inline-source-map';
}
else {
config.devtool = 'eval-source-map';
}

/**
* Entry
* Reference: http://webpack.github.io/docs/configuration.html#entry
*/
config.entry = isTest ? {} : {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts' // our angular app
};

/**
* Output
* Reference: http://webpack.github.io/docs/configuration.html#output
*/
config.output = isTest ? {} : {
path: root('dist'),
publicPath: isProd ? '/' : 'http://localhost:8080/',
filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js',
chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js'
};

/**
* Resolve
* Reference: http://webpack.github.io/docs/configuration.html#resolve
*/
config.resolve = {
// only discover files that have those extensions
extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'],
};

var atlOptions = '';
if (isTest && !isTestWatch) {
// awesome-typescript-loader needs to output inlineSourceMap for code coverage to work with source maps.
atlOptions = 'inlineSourceMap=true&sourceMap=false';
}

/**
* Loaders
* Reference: http://webpack.github.io/docs/configuration.html#module-loaders
* List: http://webpack.github.io/docs/list-of-loaders.html
* This handles most of the magic responsible for converting modules
*/
config.module = {
rules: [
// Support for .ts files.
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader?' + atlOptions, 'angular2-template-loader', '@angularclass/hmr-loader'],
exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
},

// copy those assets to output
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file?name=fonts/[name].[hash].[ext]?'
},

// Support for *.json files.
{test: /\.json$/, loader: 'json'},

// Support for CSS as raw text
// use 'null' loader in test mode (https://github.com/webpack/null-loader)
// all css in src/style will be bundled in an external css file
{
test: /\.css$/,
exclude: root('src', 'app'),
loader: isTest ? 'null' : ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: ['css', 'postcss']
})
},
// all css required in src/app files will be merged in js files
{test: /\.css$/, include: root('src', 'app'), loader: 'raw!postcss'},

// support for .scss files
// use 'null' loader in test mode (https://github.com/webpack/null-loader)
// all css in src/style will be bundled in an external css file
{
test: /\.(scss|sass)$/,
exclude: root('src', 'app'),
loader: isTest ? 'null' : ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: ['css', 'postcss', 'sass']
})
},
// all css required in src/app files will be merged in js files
{test: /\.(scss|sass)$/, exclude: root('src', 'style'), loader: 'raw!postcss!sass'},

// support for .html as raw text
// todo: change the loader to something that adds a hash to images
{test: /\.html$/, loader: 'raw', exclude: root('src', 'public')}
]
};

if (isTest && !isTestWatch) {
// instrument only testing sources with Istanbul, covers ts files
config.module.rules.push({
test: /\.ts$/,
enforce: 'post',
include: path.resolve('src'),
loader: 'istanbul-instrumenter-loader',
exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/]
});
}

// if (!isTest || !isTestWatch) {
// // tslint support
// config.module.rules.push({
// test: /\.ts$/,
// enforce: 'pre',
// loader: 'tslint'
// });
// }

/**
* Plugins
* Reference: http://webpack.github.io/docs/configuration.html#plugins
* List: http://webpack.github.io/docs/list-of-plugins.html
*/
config.plugins = [
// Define env variables to help with builds
// Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({
// Environment helpers
'process.env': {
ENV: JSON.stringify(ENV)
}
}),

// Workaround needed for angular 2 angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
root('./src') // location of your src
),

// Tslint configuration for webpack 2
new webpack.LoaderOptionsPlugin({
options: {
/**
* Apply the tslint loader as pre/postLoader
* Reference: https://github.com/wbuchwalter/tslint-loader
*/
tslint: {
emitErrors: false,
failOnHint: false
},
/**
* Sass
* Reference: https://github.com/jtangelder/sass-loader
* Transforms .scss files to .css
*/
sassLoader: {
//includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
},
/**
* PostCSS
* Reference: https://github.com/postcss/autoprefixer-core
* Add vendor prefixes to your css
*/
postcss: [
autoprefixer({
browsers: ['last 2 version']
})
]
}
})

// new webpack.ProvidePlugin({Quill: 'Quill'})
];

if (!isTest && !isProd) {
config.plugins.push(new DashboardPlugin());
}

if (!isTest && !isTestWatch) {
config.plugins.push(
new ForkCheckerPlugin(),

// Generate common chunks if necessary
// Reference: https://webpack.github.io/docs/code-splitting.html
// Reference: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
new CommonsChunkPlugin({
name: ['vendor', 'polyfills']
}),

// Inject script and link tags into html files
// Reference: https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
template: './src/public/index.html',
chunksSortMode: 'dependency'
}),

// Extract css files
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Disabled when in test mode or not in build mode
new ExtractTextPlugin({filename: 'css/[name].[hash].css', disable: !isProd})
);
}

// Add build specific plugins
if (isProd) {
config.plugins.push(
// Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
// Only emit files when there are no errors
new webpack.NoErrorsPlugin(),

// // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
// // Dedupe modules in the output
// new webpack.optimize.DedupePlugin(),

// Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
// Minify all javascript, switch loaders to minimizing mode
new webpack.optimize.UglifyJsPlugin({sourceMap: true, mangle: {keep_fnames: true}}),

// Copy assets from the public folder
// Reference: https://github.com/kevlened/copy-webpack-plugin
new CopyWebpackPlugin([{
from: root('src/public')
}])
);
}

/**
* Dev server configuration
* Reference: http://webpack.github.io/docs/configuration.html#devserver
* Reference: http://webpack.github.io/docs/webpack-dev-server.html
*/
config.devServer = {
contentBase: './src/public',
historyApiFallback: true,
quiet: true,
stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose
};

return config;
}();

// Helper functions
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}


Any idea what could broke and why? How to fix it?

Edit1: webpack version is 2.1.0-beta.25 2.1.0-beta.26 (Edit3)

Edit2: The seed is not working as well (just to be crystal clear - it was working fine a week ago too). It is crashing with this error:

ERROR in ./src/polyfills.ts
Module build failed: TypeError: Can't add property fileName, object is not extensible
at Object.Linter (/some_outer_path/some_path/workspace/work/angular2-webpack-official/node_modules/tslint/lib/tslint.js:12:23)

ERROR in ./src/vendor.ts
Module build failed: TypeError: Can't add property fileName, object is not extensible
at Object.Linter (/some_outer_path/some_path/workspace/work/angular2-webpack-official/node_modules/tslint/lib/tslint.js:12:23)

ERROR in ./src/main.ts
Module build failed: TypeError: Can't add property fileName, object is not extensible
at Object.Linter (/some_outer_path/some_path/workspace/work/angular2-webpack-official/node_modules/tslint/lib/tslint.js:12:23)


It is a same error I get if I allow ts-lint in my project. But I think ts-lint is just crashing on wrong input (something else in a chain broke it earlier).

I am pretty sure I did not change node or npm. I really don't have a clue. Here are project dependencies:

"dependencies": {
"@angular/common": "2.1.0",
"@angular/compiler": "2.1.0",
"@angular/core": "2.1.0",
"@angular/forms": "2.1.0",
"@angular/http": "2.1.0",
"@angular/platform-browser": "2.1.0",
"@angular/platform-browser-dynamic": "2.1.0",
"@angular/router": "3.1.0",
"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^2.0.0",
"@ngrx/router-store": "^1.2.5",
"@ngrx/store": "^2.2.1",
"@ngrx/store-devtools": "^3.2.1",
"angular2-google-maps": "^0.15.0",
"angular2-recaptcha": "^0.3.2",
"core-js": "^2.4.1",
"lodash": "^4.16.4",
"ng2-translate": "^3.1.3",
"primeng": "^1.0.0-rc.3",
"quill": "^1.1.3",
"ramda": "^0.22.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"tsmonad": "^0.6.1",
"zone.js": "^0.6.21"
},
"devDependencies": {
"@angularclass/hmr": "^1.0.1",
"@angularclass/hmr-loader": "^3.0.2",
"@types/core-js": "^0.9.0",
"@types/jasmine": "^2.2.29",
"@types/node": "^6.0.38",
"@types/protractor": "^1.5.16",
"@types/selenium-webdriver": "2.44.26",
"angular2-template-loader": "^0.4.0",
"autoprefixer": "^6.3.2",
"awesome-typescript-loader": "^2.2.4",
"codelyzer": "0.0.26",
"copy-webpack-plugin": "^3.0.0",
"css-loader": "^0.25.0",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"file-loader": "^0.9.0",
"html-loader": "^0.4.0",
"html-webpack-plugin": "^2.8.1",
"istanbul-instrumenter-loader": "^0.2.0",
"jasmine-core": "^2.3.4",
"jasmine-spec-reporter": "^2.4.0",
"json-loader": "^0.5.3",
"karma": "1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.0.3",
"karma-phantomjs-launcher": "^1.0.0",
"karma-remap-istanbul": "0.2.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "1.8.0",
"node-sass": "^3.4.2",
"null-loader": "0.1.1",
"phantomjs-prebuilt": "^2.1.4",
"postcss-loader": "^0.13.0",
"protractor": "^3.1.1",
"raw-loader": "0.5.1",
"remap-istanbul": "^0.6.4",
"rimraf": "^2.5.1",
"sass-loader": "^4.0.0",
"shelljs": "^0.7.0",
"style-loader": "^0.13.0",
"ts-helpers": "^1.1.1",
"tslint": "^3.4.0",
"tslint-loader": "^2.1.0",
"typedoc": "^0.4.4",
"typescript": "2.0.3",
"url-loader": "^0.5.6",
"webpack": "^2.1.0-beta.25",
"webpack-dashboard": "^0.1.8",
"webpack-dev-server": "2.1.0-beta.9"
}

Answer

Are you sure you're not running beta26? If you ran npm install in the last 8 hours you could have got the new release with breaking changes how loaders are resolved

Run
./node_modules/.bin/webpack -v

If you have beta26 you need to append "-loader" to every loader name or add "-loader" the resolveLoader.moduleExtions

In youre case i would change file to file-loader loader: 'file-loader?name=fonts/[name].[hash].[ext]?

You can also opt-in the old way by specifying moduleExtensions explicitly on the resolveLoader object

resolveLoader: {
    moduleExtensions: ['-loader']
}

I just had this similar problem myself

Webpack v2.1.0-beta.26 release notes

Breaking Changes:

-loader is no longer automatically added when resolving loaders

This was removed because it often lead to problems.

You can still opt-in to the old behavior with the resolveLoader.moduleExtensions configuration option.