Webpack 2.7.0 LoaderRunnerError: Модуль '*\node_modules\less\index.js' не является загрузчиком (должен иметь нормальную функцию или функцию шага)
У меня есть проект Angular 1.5.8 возрастом более 5 лет, разработанный кем-то другим с использованием webpack
2.7.0. В настоящее время он не строится. Ошибка, кажется, обнаруживается в самом начале
.css файл, который оказывается
angular-material.css:
[96] ./~/angular-material/angular-material.css 1.04 kB {0} [built] [failed] [1 error]
Далее по этой строке я получаю два предупреждения:
WARNING in DedupePlugin: This plugin was removed from webpack. Remove it from your configuration.
WARNING in webpack: Using NoErrorsPlugin is deprecated.
Use NoEmitOnErrorsPlugin instead.
... а потом еще куча похожих ошибок (более 500 строк), из которых я представляю только первую:
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
Первым делом я попытался удалить все
^ комбинаторы из всех зависимостей в package.json, который выглядит так:
{
"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"
}
}
... и, честно говоря, я ожидал, что он будет построен, когда убедился, что используются именно эти версии его зависимостей. Но ошибка сохраняется.
Второе, что я попробовал, - это понизить версию узла. Я попытался построить его с помощью
13.11.0 (первоначально),
12.18.3,
8.11.3 и
5.12.0.
Я не очень хорошо разбираюсь в webpack, но когда дело доходит до
v2.* Я совершенно потерялся.
Вот конфигурация веб-пакета:
'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;
})()
};
Я потратил много времени на чтение проблем github, связанных с webpack и его загрузчиками, но не нашел ничего, что указывало бы мне в правильном направлении.
Спасибо, что уделили время изучению этого и любых предложений, которые у вас могут быть.
1 ответ
Если проблема связана исключительно с конкретным модулем, вы можете сделать следующее:
1 - Переустановите этот конкретный модуль (удалите, а затем установите).
2 - Попробуйте обновить или понизить версию модуля.
Учитывая, что на данный момент проекту 5 лет, я думаю, изменение версии может решить вашу проблему.