Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
andrefox333 opened this issue Jan 14, 2017 · 29 comments

Comments

Projects
None yet
@andrefox333
Copy link

commented Jan 14, 2017

All is well until I turn on extractStyles... Any ideas?

ERROR in ./~/bootstrap-loader/lib/bootstrap.loader.js?extractStyles!./~/bootstrap-loader/no-op.js
Module not found: Error: Can't resolve '[object Object]./lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"preBootstrapCustomizations":"/Users/andrerecinto/projects/mount-everest/scss/pre-customizations.scss","bootstrapCustomizations":"/Users/andrerecinto/projects/mount-everest/scss/customizations.scss","appStyles":"/Users/andrerecinto/projects/mount-everest/scss/styles.scss","useFlexbox":true,"extractStyles":true,"styleLoaders":["style-loader","css-loader","postcss-loader","sass-loader"],
"styles":["mixins","normalize","print","reboot","type","images","code","grid","tables","forms","buttons","transitions","dropdown","button-group","input-group","custom-forms","nav","navbar", "card","breadcrumb","pagination","jumbotron","alert","progress","media","list-group","responsive-embed","close","badge","modal","tooltip","popover","carousel","utilities"],
"scripts":["alert","button","carousel","collapse","dropdown","modal","popover","scrollspy","tab","tooltip","util"], 
"configFilePath":"/Users/andrerecinto/projects/mount-everest/.bootstraprc","bootstrapPath":"/Users/andrerecinto/projects/mount-everest/node_modules/bootstrap","bootstrapRelPath":"../bootstrap"}' in '/Users/andrerecinto/projects/mount-everest/node_modules/bootstrap-loader'
 @ ./~/bootstrap-loader/lib/bootstrap.loader.js?extractStyles!./~/bootstrap-loader/no-op.js 1:21-1417
@kevinmartin

This comment has been minimized.

Copy link

commented Jan 29, 2017

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

The commit: webpack-contrib/extract-text-webpack-plugin@74b86e0

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

@justin808

This comment has been minimized.

Copy link
Member

commented Jan 29, 2017

Please let me know what your findings are. I'm happy to consider a PR.

@justin808 justin808 added the question label Jan 29, 2017

@Quayle57

This comment has been minimized.

Copy link

commented Jan 31, 2017

I have the same problem with

extract-text-webpack-plugin@1.0.1

Module not found: Error: Cannot resolve module '[object Object]./lib/bootstrap.styles.loader.js' in /home/user/work/project/node_modules/bootstrap-loader
 @ ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js 1:21-1087

I'm using Bootstrap@4.0.0-alpha.6 and webpack@1.14.0

@JorrandeWit

This comment has been minimized.

Copy link

commented Jan 31, 2017

Related issue in the extract-text-webpack-plugin: link.

Bootstrap@4 only seems to work fine with extract-text-webpack-plugin@2.0.0-beta., just like KevinMartin said.

@Quayle57

This comment has been minimized.

Copy link

commented Feb 1, 2017

Yes but I need to use this with webpack1 :/
Furthermore, the link is now closed saying that the loader should be the one to fix the problem :

bebraw commented a day ago
We discussed about this. It's actually a font-awesome-loader issue to fix now as ExtractTextPlugin won't emit a string by design (problematic with function based configuration). So instead of hacking around with a custom toString we'll document how to fix the loader instead.

@alecf

This comment has been minimized.

Copy link
Contributor

commented Feb 2, 2017

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?

@TCotton

This comment has been minimized.

Copy link

commented Feb 2, 2017

@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: webpack-contrib/extract-text-webpack-plugin#250

@justin808

This comment has been minimized.

Copy link
Member

commented Feb 3, 2017

@TCotton I'd like to get bootstrap-loader v2.0.0 out which relies on Webpack V2 and put V1 into only CRIT fixes from now on.

Any chance that you want to update the dependencies on master and put together a final PR for V2.0.0?

Any other volunteers?

gimdongwoo added a commit to gimdongwoo/react-redux-universal-hot-boilerplate that referenced this issue Feb 3, 2017

ridem added a commit to ridem/bootstrap-loader that referenced this issue Feb 3, 2017

Fix of the ExtractTextPlugin bug
This is a quick fix to get compatibility with the latest `webpack` (2.2.1) and the latest `extract-text-webpack-plugin`. Should fix shakacode#238
@ridem

This comment has been minimized.

Copy link

commented Feb 3, 2017

I gave it a try by submitting a PR that fixes things for me. Let me know!

@t47io

This comment has been minimized.

Copy link

commented Feb 5, 2017

Hope this can be fixed soon,

@ridem

This comment has been minimized.

Copy link

commented Feb 7, 2017

@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.

@arckosfr

This comment has been minimized.

Copy link

commented Feb 8, 2017

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. !

@kuongknight

This comment has been minimized.

Copy link

commented Feb 11, 2017

I have same issue, i switch to extract-text-webpack-plugin@2.0.0-beta-5 but it not work
I edit follow @t47io, it work fine :)

@ayleesedai

This comment has been minimized.

Copy link

commented Feb 13, 2017

I tried @ridem solution and it works fine for me.
But I just made a little change, since my team develops on Windows and our continous integration builder is on Linux, so we had path and execution permission problems: I made a javascript script and run it with node, instead of using a sh file.

@JulioC

This comment has been minimized.

Copy link

commented Feb 14, 2017

@ayleesedai would you mind sharing it?

@ayleesedai

This comment has been minimized.

Copy link

commented Feb 14, 2017

@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
	});
});
@ridem

This comment has been minimized.

Copy link

commented Feb 14, 2017

Nice! I feel so old school now with my sed command that I had to tweak to get it to work on both Linux and macOS

@justin808

This comment has been minimized.

Copy link
Member

commented Feb 14, 2017

@ridem @ayleesedai @JulioC Should this get a PR?

@ayleesedai

This comment has been minimized.

Copy link

commented Feb 15, 2017

@justin808 Working fine for me, so it's a yes.

@ridem

This comment has been minimized.

Copy link

commented Feb 15, 2017

There's been a merge of the solution into master by #259

@Resin01

This comment has been minimized.

Copy link

commented Feb 16, 2017

Is is possible to get this new version into NPM?
I have tried this in my package.json but it loads the wrong data.
"bootstrap-loader": "shakacode/bootstrap-loader",

@justin808

This comment has been minimized.

Copy link
Member

commented Feb 17, 2017

2.0.0-beta.21 pushed to npm!

@justin808

This comment has been minimized.

Copy link
Member

commented Feb 17, 2017

Over the next few weeks, @alexfedoseev, @Judahmeek, and I will get this all sorted and make the official 2.0 version of bootstrap-loader!

@diondirza

This comment has been minimized.

Copy link

commented Feb 17, 2017

@justin808 this error still exist in beta latest version.

@justin808

This comment has been minimized.

Copy link
Member

commented Feb 17, 2017

@diondirza Try the config of the examples, paying attention to the versions:

https://github.com/shakacode/bootstrap-loader/blob/master/examples/basic/package.json

@Resin01

This comment has been minimized.

Copy link

commented Feb 17, 2017

@diondirza If i run npm update it installs the 2.0.0-beta.20 instead of 2.0.0-beta.21. I simply deleted the folder and used npm install after which I got the right version (if I run npm update it downgrades again)

@diondirza

This comment has been minimized.

Copy link

commented Feb 17, 2017

@justin808 I think that was false alarm, after I wrote that comment I have switched back to beta.20 and rebuild my app again with no error, after you replied I try to re install beta.21 again and did rebuild and now the error is gone. weird, huh
anyway I got error unmeet peer dependency for eslint-plugin-jsx-a11y, should it be using 4.0.0? I think your eslint-config-shakacode need to be updated, because latest eslint-config-airbnb need eslint-plugin-jsx-a11y@^4.0.0

@Resin01 I run update with command yarn add bootstrap-loader@2.0.0-beta.21

@alexfedoseev

This comment has been minimized.

Copy link
Member

commented Feb 21, 2017

I think your eslint-config-shakacode need to be updated

@diondirza Yep, will be updated later this week.

@justin808

This comment has been minimized.

Copy link
Member

commented May 4, 2017

See release 2.1 for alpha 6 support.

@justin808 justin808 closed this May 4, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.