extract text webpack plugin issue
Closed this issue · 18 comments
sahil1989 commented
I am getting following error while running build
ERROR in ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
Module build failed: Error: Breaking change: extract now only takes a single argument. Either an options object *or* the loader(s).
Example: if your old code looked like this:
ExtractTextPlugin.extract('style-loader', 'css-loader')
You would change it to:
ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader' })
The available options are:
loader: string | object | loader[]
fallbackLoader: string | object | loader[]
publicPath: string
following is my package.json:
{
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/router": "3.2.1",
"core-js": "^2.4.1",
"ng2-popover": "0.0.13",
"primeng": "^1.1.2",
"reflect-metadata": "0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.25"
},
"devDependencies": {
"argv": "0.0.2",
"autoprefixer": "^6.2.2",
"bootstrap-loader": "~1.2.1",
"bootstrap-sass": "^3.3.7",
"browser-sync": "^2.9.11",
"browser-sync-spa": "^1.0.3",
"css-loader": "^0.23.1",
"css-to-string-loader": "^0.1.1",
"del": "^2.0.2",
"eslint": "^2.11.0",
"eslint-config-xo-space": "^0.12.0",
"eslint-loader": "^1.3.0",
"extract-text-webpack-plugin": "github:steinpilz/extract-text-webpack-plugin#type-error-investigations",
"file-loader": "^0.9.0",
"font-awesome": "^4.7.0",
"gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
"gulp-filter": "^4.0.0",
"gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
"gulp-sass": "^2.1.1",
"gulp-typescript": "^2.13.6",
"gulp-util": "^3.0.7",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.9.0",
"isparta-loader": "^2.0.0",
"jasmine-core": "^2.5.2",
"json-loader": "^0.5.4",
"karma": "^0.13.14",
"karma-chrome-launcher": "^0.2.3",
"karma-coverage": "^0.5.3",
"karma-jasmine": "^1.0.2",
"karma-junit-reporter": "^0.4.2",
"karma-phantomjs-launcher": "^1.0.1",
"karma-source-map-support": "^1.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-story-reporter": "^0.3.1",
"karma-webpack": "^1.7.0",
"ng2-bootstrap": "^1.1.16-10",
"node-sass": "^3.8.0",
"phantomjs-prebuilt": "^2.1.12",
"postcss-loader": "^0.8.0",
"resolve-url-loader": "^1.6.0",
"sass-loader": "^3.2.3",
"sass-resources-loader": "~1.1.0",
"style-loader": "^0.13.0",
"ts-loader": "^0.9.0",
"tslint": "^3.2.1",
"tslint-loader": "^2.1.0",
"typescript": "~2.1.4",
"typings": "^1.4.0",
"url-loader": "^0.5.7",
"webpack": "2.1.0-beta.22",
"webpack-dev-server": "^1.16.2",
"webpack-fail-plugin": "^1.0.5",
"yargs": "^5.0.0"
},
"scripts": {
"build": "gulp",
"serve": "gulp serve",
"serve:dist": "gulp serve:dist",
"test": "gulp test",
"test:auto": "gulp test:auto",
"postinstall": "typings prune && typings install"
},
"eslintConfig": {
"root": true,
"env": {
"browser": true,
"jasmine": true
},
"extends": [
"xo-space/esnext"
]
}
}
Following is my webpack-dist.conf
const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const NoErrorsPlugin = require('webpack-fail-plugin');
const autoprefixer = require('autoprefixer');
module.exports = {
module: {
loaders: [
{
test: /.json$/,
loaders: [
'json'
]
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style',
loader: 'css-loader'
})
},
{
test: /\.(sass|scss)$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style',
loader: ['css', 'resolve-url', 'sass', 'sass-resources']
})
},
{
test: /\.(woff|woff2)$/,
loader: 'url',
query: {
limit: 10000,
minetype: 'application/font-woff'
}
},
{
test: /\.(ttf|eot|svg|jpg|png)$/,
loader: 'url'
},
{
test: /\.ts$/,
exclude: /node_modules/,
loaders: [
'ts'
]
},
{
test: /\.html$/,
exclude: /index\.html$/,
loader: [
'html'
]
}
],
noParse: [ /zone\.js\/dist\/.+/, /angular2\/bundles\/.+/ ]
},
sassResources: conf.path.src('assets/styles/sass-resources.scss'),
plugins: [
//https://github.com/AngularClass/angular2-webpack-starter/issues/993 fixes typescript warning
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
__dirname
),
new webpack.optimize.OccurrenceOrderPlugin(),
NoErrorsPlugin,
new HtmlWebpackPlugin({
template: `${conf.path.src('index.html')}`,
inject: true,
appD: conf.getAppDID()
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
'root': JSON.stringify(conf.paths.root)
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {unused: true, dead_code: true} // eslint-disable-line camelcase
}),
new ExtractTextPlugin({filename: 'index-[contenthash].css', allChunks: true}),
new webpack.optimize.CommonsChunkPlugin({names: ['vendor', 'polyfills']})
],
postcss: () => [autoprefixer],
output: {
path: path.join(process.cwd(), conf.paths.dist),
filename: '[name]-[hash].js',
libraryTarget: 'umd'
},
resolve: {
extensions: [
'',
'.webpack.js',
'.web.js',
'.js',
'.ts'
]
},
debug: false,
bail: true,
entry: {
polyfills: `./${conf.path.src('polyfills')}`,
vendor: `./${conf.path.src('vendor')}`,
app: `./${conf.path.src('index')}`
},
ts: {
configFileName: 'tsconfig.json'
},
tslint: {
configuration: require('../tslint.json'),
formattersDirectory: '../node_modules/tslint-loader/formatters/',
failOnHint: true
}
};
Can someone guide, how to get rid of this error
sahil1989 commented
One more thing, I am not getting any error on my local machine (windows) but build fails on server i.e. a linux one
Judahmeek commented
You need to upgrade from bootstrap-loader v1 to v2. Bootstrap-loader's versions are meant to correspond to webpack's, thus using bootstrap-loader v1 with webpack v2 is a really bad idea.
sahil1989 commented
@Judahmeek after updating to version 2 of bootstrap loader, I am getting another error "Can't resolve sass-loader-resources". Can you suggest, what is wrong here
justin808 commented
@sahil1989 are you misspelling sass-loader-resources: https://github.com/shakacode/sass-resources-loader/
sahil1989 commented
@justin808 
This doesn't look like any spelling error. Could you please suggest.
I have searched the whole project and cannot find sass-loader-resources
Judahmeek commented
We'll need a stacktrace and/or a query string in order to figure out how & where sass-resources-loader is changing into sass-loader-resources. Might be related to #205 somehow?
sahil1989 commented
@Judahmeek, isn't the image above not enough, if not can you kindly guide me, how to generate the stack Trace.
sahil1989 commented
@Judahmeek Below is the complete stack trace:
'webpack:dist' errored after 9.02 s
[16:45:13] ModuleNotFoundError in plugin 'webpack'
Message:
Module not found: Error: Can't resolve 'sass-loader-resources' in 'D:\mdp-internaltools-app\node_modules\bootstrap-loader'
Details:
details: resolve 'sass-loader-resources' in 'D:\mdp-internaltools-app\node_modules\bootstrap-loader'
Parsed request is a module
using description file: D:\mdp-internaltools-app\node_modules\bootstrap-loader\package.json (relative path: .)
after using description file: D:\mdp-internaltools-app\node_modules\bootstrap-loader\package.json (relative path: .)
resolve as module
module variation sass-loader-resources-loader
D:\node_modules doesn't exist or is not a directory
D:\mdp-internaltools-app\node_modules\node_modules doesn't exist or is not a directory
looking for modules in D:\mdp-internaltools-app\node_modules
using description file: D:\mdp-internaltools-app\package.json (relative path: ./node_modules)
after using description file: D:\mdp-internaltools-app\package.json (relative path: ./node_modules)
using description file: D:\mdp-internaltools-app\package.json (relative path: ./node_modules/sass-loader-resources-loader)
as directory
D:\mdp-internaltools-app\node_modules\sass-loader-resources-loader doesn't exist
no extension
D:\mdp-internaltools-app\node_modules\sass-loader-resources-loader doesn't exist
.js
D:\mdp-internaltools-app\node_modules\sass-loader-resources-loader.js doesn't exist
.json
D:\mdp-internaltools-app\node_modules\sass-loader-resources-loader.json doesn't exist
looking for modules in D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules
using description file: D:\mdp-internaltools-app\node_modules\bootstrap-loader\package.json (relative path: ./node_modules)
after using description file: D:\mdp-internaltools-app\node_modules\bootstrap-loader\package.json (relative path: ./node_modules)
using description file: D:\mdp-internaltools-app\node_modules\bootstrap-loader\package.json (relative path: ./node_modules/sass-loader-resources-loader)
as directory
D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources-loader doesn't exist
no extension
D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources-loader doesn't exist
.js
D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources-loader.js doesn't exist
.json
D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources-loader.json doesn't exist
D:\node_modules doesn't exist or is not a directory
D:\mdp-internaltools-app\node_modules\node_modules doesn't exist or is not a directory
looking for modules in D:\mdp-internaltools-app\node_modules
using description file: D:\mdp-internaltools-app\package.json (relative path: ./node_modules)
after using description file: D:\mdp-internaltools-app\package.json (relative path: ./node_modules)
using description file: D:\mdp-internaltools-app\package.json (relative path: ./node_modules/sass-loader-resources)
as directory
D:\mdp-internaltools-app\node_modules\sass-loader-resources doesn't exist
no extension
D:\mdp-internaltools-app\node_modules\sass-loader-resources doesn't exist
.js
D:\mdp-internaltools-app\node_modules\sass-loader-resources.js doesn't exist
.json
D:\mdp-internaltools-app\node_modules\sass-loader-resources.json doesn't exist
looking for modules in D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules
using description file: D:\mdp-internaltools-app\node_modules\bootstrap-loader\package.json (relative path: ./node_modules)
after using description file: D:\mdp-internaltools-app\node_modules\bootstrap-loader\package.json (relative path: ./node_modules)
using description file: D:\mdp-internaltools-app\node_modules\bootstrap-loader\package.json (relative path: ./node_modules/sass-loader-resources)
as directory
D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources doesn't exist
no extension
D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources doesn't exist
.js
D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources.js doesn't exist
.json
D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources.json doesn't exist
missing: D:\node_modules,D:\node_modules,D:\mdp-internaltools-app\node_modules\node_modules,D:\mdp-internaltools-app\node_modules\node_modules,D:\mdp-internaltools-app\node_modules\sass-loader-resources-loader,D:\mdp-internaltools-app\node_modules\sass-loader-resources-loader,D:\mdp-internaltools-app\node_modules\sass-loader-resources-loader.js,D:\mdp-internaltools-app\node_modules\sass-loader-resources-loader.json,D:\mdp-internaltools-app\node_modules\sass-loader-resources,D:\mdp-internaltools-app\node_modules\sass-loader-resources,D:\mdp-internaltools-app\node_modules\sass-loader-resources.js,D:\mdp-internaltools-app\node_modules\sass-loader-resources.json,D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources-loader,D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources-loader,D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources-loader.js,D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources-loader.json,D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources,D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources,D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources.js,D:\mdp-internaltools-app\node_modules\bootstrap-loader\node_modules\sass-loader-resources.json
module: Module[1200]
origin: Module[1200]
dependencies: [object Object]
error: Error: Can't resolve 'sass-loader-resources' in 'D:\mdp-internaltools-app\node_modules\bootstrap-loader'
domain: [object Object]
domainThrown: true
[16:45:13] 'build' errored after 9.02 s
[16:45:13] The following tasks did not complete: other
[16:45:13] Did you forget to signal async completion?
$ webpack --display-error-details
bash: webpack: command not found
Let me know, if anything else is required?
sahil1989 commented
@Judahmeek @justin808 any update on this please. I am really stuck
justin808 commented
I have searched the whole project and cannot find sass-loader-resources
sass-resources-loader
sahil1989 commented
@justin808 yes sass-resources-loader is there, but don't know how it is getting converted to sass-loader-resources
justin808 commented
You'll have to track this down. Use grep.
Otherwise, take a look a this: http://www.shakacode.com/work/shakacode-coaching-plan.pdf
And we can screen share and help you.
Judahmeek commented
Sorry for disappearing on you, @sahil1989. If grep doesn't help, then you need to look for a dynamic require. Start by checking the query strings being input into bootstrap-loader. No one else has reported a similar issue, so I'm confident that the issue isn't Bootstrap-loader itself.
x-yuri commented
@justin808 This line replaces sass-resources with sass-loader-resources, since it mistakenly thinks it's sass without -loader suffix. With sass-resources-loader it doesn't work either. It gets turned into sass-loader-resources-loader.
x-yuri commented
@justin808 It is. Try to think what this code would do with sass-resources-loader or sass-resources:
const ensureLoadersSuffix = loadersArray => {
const loaderSuffixRegExp = new RegExp(
'^style-loader.*$|^css-loader.*$|^postcss-loader.*$|^sass-loader.*$|^resolve-url-loader.*$',
);
const suffixReplaceRegExp = new RegExp('^style|^css|^postcss|^sass|^resolve-url');
return loadersArray.map(loader => {
if (!loaderSuffixRegExp.test(loader)) {
return loader.replace(suffixReplaceRegExp, match => `${match}-loader`);
}
return loader;
});
};x-yuri commented
@justin808 Are you suggesting to make the PR? :) See just above.