I have this > 5 years old Angular 1.5.8 project developed by someone else, using webpack 2.7.0. It currently fails building. The error seems to be encountered at the very first .css file, which happens to be angular-material.css:
[96] ./~/angular-material/angular-material.css 1.04 kB {0} [built] [failed] [1 error]
Further down that line I get two warnings:
WARNING in DedupePlugin: This plugin was removed from webpack. Remove it from your configuration.
WARNING in webpack: Using NoErrorsPlugin is deprecated.
Use NoEmitOnErrorsPlugin instead.
... and then a bunch of similar errors (more than 500 lines), of which I only present the first one:
ERROR in ./src/styles/main.less
Module build failed: ModuleBuildError: Module build failed: LoaderRunnerError: Module 'D:\sgn\www\_g\test\node_modules\less\index.js' is not a loader (must have normal or pitch function)
at loadLoader (D:\sgn\www\_g\test\node_modules\loader-runner\lib\loadLoader.js:43:20)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
at D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:176:18
at loadLoader (D:\sgn\www\_g\test\node_modules\loader-runner\lib\loadLoader.js:47:3)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
at D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:176:18
at loadLoader (D:\sgn\www\_g\test\node_modules\loader-runner\lib\loadLoader.js:47:3)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at runLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
at NormalModule.doBuild (D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModule.js:179:3)
at NormalModule.build (D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModule.js:268:15)
at Compilation.buildModule (D:\sgn\www\_g\test\node_modules\webpack\lib\Compilation.js:146:10)
at D:\sgn\www\_g\test\node_modules\webpack\lib\Compilation.js:433:9
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:253:5
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:99:14
at D:\sgn\www\_g\test\node_modules\tapable\lib\Tapable.js:268:11
at NormalModuleFactory.<anonymous> (D:\sgn\www\_g\test\node_modules\webpack\lib\CompatibilityPlugin.
js:52:5)
at NormalModuleFactory.applyPluginsAsyncWaterfall (D:\sgn\www\_g\test\node_modules\tapable\lib\Tapab
le.js:272:13)
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:74:11
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:205:8
at processTicksAndRejections (internal/process/task_queues.js:79:11)
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModule.js:192:19
at D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:172:11
at loadLoader (D:\sgn\www\_g\test\node_modules\loader-runner\lib\loadLoader.js:43:11)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
at D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:176:18
at loadLoader (D:\sgn\www\_g\test\node_modules\loader-runner\lib\loadLoader.js:47:3)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
at D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:176:18
at loadLoader (D:\sgn\www\_g\test\node_modules\loader-runner\lib\loadLoader.js:47:3)
at iteratePitchingLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at runLoaders (D:\sgn\www\_g\test\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
at NormalModule.doBuild (D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModule.js:179:3)
at NormalModule.build (D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModule.js:268:15)
at Compilation.buildModule (D:\sgn\www\_g\test\node_modules\webpack\lib\Compilation.js:146:10)
at D:\sgn\www\_g\test\node_modules\webpack\lib\Compilation.js:433:9
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:253:5
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:99:14
at D:\sgn\www\_g\test\node_modules\tapable\lib\Tapable.js:268:11
at NormalModuleFactory.<anonymous> (D:\sgn\www\_g\test\node_modules\webpack\lib\CompatibilityPlugin.
js:52:5)
at NormalModuleFactory.applyPluginsAsyncWaterfall (D:\sgn\www\_g\test\node_modules\tapable\lib\Tapab
le.js:272:13)
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:74:11
at D:\sgn\www\_g\test\node_modules\webpack\lib\NormalModuleFactory.js:205:8
at processTicksAndRejections (internal/process/task_queues.js:79:11)
@ ./src/app/app.js 41:0-30
The first thing I tried was to remove all the ^ combinators from all dependencies in package.json, which looks like this:
{
"name": "***",
"version": "1.0.0",
"description": "***",
"main": "app.js",
"scripts": {
"build": "webpack --progress --profile",
"dev": "webpack-dev-server --inline --open --progress --colors --watch"
},
"author": "Dovydas Martusevicius",
"license": "MIT",
"dependencies": {
"ajv": "^4.11.2",
"angular": "1.5.8",
"angular-animate": "1.5.8",
"angular-aria": "1.5.8",
"angular-chart.js": "1.1.1",
"angular-chartjs": "0.0.5",
"angular-material": "^1.1.0",
"angular-material-data-table": "0.10.9",
"angular-messages": "1.5.8",
"angular-sanitize": "1.5.8",
"angular-ui-bootstrap": "2.4.0",
"angular-ui-router": "0.3.1",
"animate.css": "3.5.1",
"babel-polyfill": "6.13.0",
"less": "^3.9.0",
"moment": "2.17.1",
"normalize.css": "4.2.0"
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015-native-modules": "^6.9.4",
"css-loader": "^0.24.0",
"extract-text-webpack-plugin": "^2.0.0-beta.3",
"file-loader": "^0.9.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.22.0",
"less-loader": "^2.2.3",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.1",
"webpack": "^2.7.0",
"webpack-dev-server": "^1.15.0"
}
}
...and, frankly, I was expecting it to build when I made sure those exact versions of its dependencies are used. But the error persists.
The second thing I tried was to downgrade node. I attempted building it with 13.11.0 (initially), 12.18.3, 8.11.3 and 5.12.0.
I'm not great with webpack in general, but when it comes to v2.* I'm totally lost.
Here's the webpack config:
'use strict';
//Modules
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
//Environment
const env = process.env.npm_lifecycle_event;
var isTest = env === 'test' || env === 'test-watch';
var isProd = env === 'build';
module.exports = {
devtool: 'source-map',
entry: {
app: './src/app/app.js'
},
devServer: {
outputPath: path.join(__dirname, 'src'),
contentBase: "./src"
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: isProd ? '' : 'http://localhost:8080/',
filename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js',
chunkFilename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js'
},
resolve: {
// you can load named modules from any dirs you want.
// attempts to find them in the specified order.
modules: [
'./src/lib',
'node_modules'
]
},
module: {
loaders: [
//HTML Files
{
test: /\.html$/,
loader: 'html-loader'
},
//Transpile ES6 to ES5
{
test: /\.js$/,
include: path.join(__dirname, 'src'),
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: [
["es2015", {"module": false}]
]
}
},
//Extract Normal CSS
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css-loader?sourceMap!autoprefixer')
},
//Bundle Less into CSS Code
{
test: /\.less$/,
loader: ExtractTextPlugin.extract('css-loader?sourceMap!autoprefixer!less?sourceMap')
},
//Images
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file-loader'
}
]
},
plugins : (() => {
let plugins = [];
//Render Index.html, Extract CSS
plugins.push(
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'body'
}),
// Write out CSS bundle to its own file:
new ExtractTextPlugin({
filename: 'css/styles.css',
allChunks: true})
);
//If prod do extra stuff
if (isProd) {
plugins.push(
// Only emit files when there are no errors
new webpack.NoErrorsPlugin(),
// Dedupe modules in the output
new webpack.optimize.DedupePlugin(),
// Minimize JS
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false
},
sourceMap: true
})
/*new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}])*/
)
}
return plugins;
})()
};
I've spent considerable time reading github issues related to webpack and its loaders but haven't come across anything that would hint me into the right direction.
Thanks for your time looking into this and any suggestions you might have.
If the issue is solely related to a particular module then you can do following things,
1 - Reinstall that particular module ( delete followed by install ).
2 - Try upgrading or downgrading the module version.
Considering that the project is 5 years old at this point, I guess changing the version might solve your issue.