bootstrap-loader: bootstrap-loader fails when extractStyles is enabled (set to true)

@t47io In case it temporarily helps someone, this is what you can do to get it to work:

• Add a "postinstall": "./fix-bootstrap-loader.sh" entry to your package.json.
• In the same folder, make a file called fix-bootstrap-loader.sh with the following content:

# Ensure we have npm
if ! hash npm 2>/dev/null; then
  echo 'No NPM installed!'
  exit 1
fi

FILEPATH="node_modules/bootstrap-loader/lib/utils/buildExtractStylesLoader.js"

BEFORE="return ExtractTextPlugin.extract({ fallbackLoader: fallbackLoader, loader: restLoaders });"
AFTER="return [ ExtractTextPlugin.loader().loader + '?omit\&remove',    fallbackLoader,    restLoaders  ].join('!');"

if ! cat ${FILEPATH} 2>/dev/null | grep -q "${AFTER}"; then
  echo 'Fixing bootstrap-loader.'
  sed -i.bak "s|${BEFORE}|${AFTER}|g" "${FILEPATH}"
fi

• npm install
• Open node_modules/bootstrap-loader/lib/utils/buildExtractStylesLoader.js and make sure that the end has been properly edited

This fix is just the PR I just made.

This works with the latest ExtractTextPlugin (2.0.0-rc.2 and 2.0.0-rc.3) and the latest bootstrap-loader (beta 20). AFAIK the webpack version has no influence over that bug.

Hope this can be fixed soon,

This seems to have been cause by a change between extract-text-webpack-plugin versions Beta 5 and RC 0

The commit: https://github.com/webpack-contrib/extract-text-webpack-plugin/commit/74b86e0221096c682538472b455118179b7991a3

I switched back to Beta 5 and it works fine now.

@JulioC here it is, I didn’t attach it before, because it’s not a masterpiece of coding, but it works fine. @ridem’s sh script is more sofisticated: it creates a backup copy of the original file and check for npm existance. Anyway:

The package.json section:

  "scripts": {
    "postinstall": "node fix-bootstrap-loader.js"
  }

And the fix-bootstrap-loader.js:

var fs = require('fs');

var theFile = './node_modules/bootstrap-loader/lib/utils/buildExtractStylesLoader.js';

fs.readFile(theFile, 'utf-8', function(err, data){
	if (err) throw err; // do something her: console.log for example

	var result = data.replace("return ExtractTextPlugin.extract({ fallbackLoader: fallbackLoader, loader: restLoaders });", "return [ ExtractTextPlugin.loader().loader + '?omit\&remove',    fallbackLoader,    restLoaders  ].join('!');");

	fs.writeFile(theFile, result, 'utf8', function (err) {
		if (err) throw err; // do something her: console.log for example
	});
});

Hello,

Don’t know if it came from the same bug (the error output seems to be same), but my build output is not working (already test with extract-text-webpack-plugin@beta5, it was worse than this) :

ERROR in ./~/bootstrap-loader/lib/bootstrap.loader.js?extractStyles!./~/bootstrap-loader/no-op.js
Module not found: Error: Can't resolve '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]./lib/bootstrap.styles.loader.js' in '/home/arckosfr/Saedbox-web/node_modules/bootstrap-loader'
 @ ./~/bootstrap-loader/lib/bootstrap.loader.js?extractStyles!./~/bootstrap-loader/no-op.js 1:21-1047
 @ ./~/bootstrap-loader/extractStyles.js
 @ multi font-awesome-loader bootstrap-loader/extractStyles tether ./src/main.js

EDIT: all is working with your fix script. !

@alecf this code will solve that problem

ExtractTextPlugin.extract = (before, loader, options) => {
  if (typeof loader === 'string') {
    return [
      ExtractTextPlugin.loader(Object.assign({ omit: before.split('!').length, extract: true, remove: true }, options)),
      before,
      loader
    ].join('!');
  } else {
    options = loader;
    loader = before;
    return [
      ExtractTextPlugin.loader(Object.assign({ remove: true }, options)),
      loader
    ].join('!');
  }
};

However, this seems to be a separate issue with Webpack 2, ExtractTextPlugin and production builds; and it is not an issue exclusively reserved for bootstrap-loader

I state this because I’m working on the same bug. There is a long thread here about the same error: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/250

The problem seems to be that ExtractTextPlugin is now always returning an array of objects, rather than an array of strings.

I think it used to return:

[ 'style-loader', 'css-loader', '...']

and now it returns

[{ loader: 'style-loader', options: {...} }, { loader: 'css-loader', options: {...} } ]

It seems like https://github.com/shakacode/bootstrap-loader/blob/master/src/utils/buildExtractStylesLoader.js could perhaps be adjusted to handle both arrays of strings and objects?