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
Closed

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

andrefox333 opened this issue Jan 14, 2017 · 29 comments

Comments

@andrefox333
Copy link

@andrefox333 andrefox333 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
Copy link

@kevinmartin kevinmartin 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
Copy link
Member

@justin808 justin808 commented Jan 29, 2017

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

@Quayle57
Copy link

@Quayle57 Quayle57 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
Copy link

@JorrandeWit JorrandeWit 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
Copy link

@Quayle57 Quayle57 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
Copy link
Contributor

@alecf alecf 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
Copy link

@TCotton TCotton 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
Copy link
Member

@justin808 justin808 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
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
Copy link

@ridem ridem commented Feb 3, 2017

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

@t47io
Copy link

@t47io t47io commented Feb 5, 2017

Hope this can be fixed soon,

@ridem
Copy link

@ridem ridem 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
Copy link

@arckosfr arckosfr 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
Copy link

@kuongknight kuongknight 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
Copy link

@ayleesedai ayleesedai 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
Copy link

@JulioC JulioC commented Feb 14, 2017

@ayleesedai would you mind sharing it?

@ayleesedai
Copy link

@ayleesedai ayleesedai 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
Copy link

@ridem ridem 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
Copy link
Member

@justin808 justin808 commented Feb 14, 2017

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

@ayleesedai
Copy link

@ayleesedai ayleesedai commented Feb 15, 2017

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

@ridem
Copy link

@ridem ridem commented Feb 15, 2017

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

@sinnbeck
Copy link

@sinnbeck sinnbeck 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
Copy link
Member

@justin808 justin808 commented Feb 17, 2017

2.0.0-beta.21 pushed to npm!

@justin808
Copy link
Member

@justin808 justin808 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
Copy link

@diondirza diondirza commented Feb 17, 2017

@justin808 this error still exist in beta latest version.

@justin808
Copy link
Member

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

@sinnbeck
Copy link

@sinnbeck sinnbeck 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
Copy link

@diondirza diondirza 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
Copy link
Member

@alexfedoseev alexfedoseev commented Feb 21, 2017

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

@diondirza Yep, will be updated later this week.

@justin808
Copy link
Member

@justin808 justin808 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.