Skip to content
This repository has been archived by the owner. It is now read-only.

ERROR in ./~/bootstrap-loader/lib/bootstrap.loader.js?extractStyles!./~/bootstrap-loader/no-op.js #364

Closed
pavelekNET opened this issue Jan 26, 2017 · 23 comments

Comments

Projects
None yet
6 participants
@pavelekNET
Copy link

commented Jan 26, 2017

After updating to rc0 from 2.0.0-beta.5:

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 'C:\PROJECTS\UCB_IMPRESTO_FE\node_modules\bootstrap-loader'
@ .//bootstrap-loader/lib/bootstrap.loader.js?extractStyles!.//bootstrap-loader/no-op.js 1:21-594
@ ./~/bootstrap-loader/extractStyles.js
@ ./src/vendors.ts

@MNorgren

This comment has been minimized.

Copy link

commented Jan 27, 2017

I am having a similiar issue since the RC version was released. My builds are appear to be breaking on the new "getLoaderWithQuery(loader)" method. angular-cli depends on the most recent version ^2.0.0-beta.4 and since this upgrade, I can no longer build my project.

Error:
Module build failed : error : Cannot find module 'C:\MyProject\node_modules\css-loader\index.js?sourcemap&minimize'

How can I get around this issue for the time being?

@pitakill

This comment has been minimized.

Copy link

commented Jan 27, 2017

I can confirm this in one of my projects.

I'm working on OS X Sierra (10.2.2) if relevant.

And see a output similar to @pavelekNET:

If the full output of the error is needed, i'm glad to put it.

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?{"bootstrapVersion":3,"preBootstrapCustomizations":

Thank you for your effort and project. :)

@bebraw

This comment has been minimized.

Copy link
Contributor

commented Jan 27, 2017

Can you try extract through use instead of loader? Let me know how it goes.

@gplume

This comment has been minimized.

Copy link

commented Jan 27, 2017

Same issue here with font-awesome-loader. It breaks with the same error since 2.0.0-rc.0.
I have to keep beta.4 to build my projects.
What is use instead of loader ?

@bebraw

This comment has been minimized.

Copy link
Contributor

commented Jan 27, 2017

@gplume use: ExtractTextPlugin.extract(...). That's the new syntax.

@gplume

This comment has been minimized.

Copy link

commented Jan 27, 2017

OK. Didn't know that! It works as before with use...
thanks!
[edit] I spoke too fast, css stays in .js then.... but I guess it's somewhere else that I should adapt the config or it's inside font-awesome-loader?

@bebraw

This comment has been minimized.

Copy link
Contributor

commented Jan 28, 2017

@gplume Can you set up a small standalone project to study?

@gplume

This comment has been minimized.

Copy link

commented Jan 28, 2017

Interresting that rc.1 throws a different error now :

..../extract-text-webpack-plugin/schema/validator.js:10
                throw new Error(ajv.errorsText());

Here's a gist with rc.0, move it to beta.4 and it compile, then with rc.0/1 you have the errors:
https://gist.github.com/gplume/c935111fc9634583a43936f309a424ba

@bebraw

This comment has been minimized.

Copy link
Contributor

commented Jan 28, 2017

@gplume Can you replace loader: ExtractTextPlugin.extract with use: ExtractTextPlugin.extract as instructed above? loader won't work anymore.

It would be ideal if you could provide something to run as it's very hard to debug otherwise.

@gplume

This comment has been minimized.

Copy link

commented Jan 28, 2017

How about the gist ? It runs ok if you pin to beta.4 or below. Only rc.x produce the error.
example gist
Same errors with use:

@bebraw

This comment has been minimized.

Copy link
Contributor

commented Jan 28, 2017

@gplume Why do you have options: '/dist/' at extract? That field isn't supported by the schema.

@gplume

This comment has been minimized.

Copy link

commented Jan 28, 2017

Yes sorry it was a try... usually it's not here. I've moved the whole gist locally to use: and now I have webpack issues like :

 - configuration.module.rules[0].use should be one of these:
   non-empty string | function | object { loader?, options?, query? } | function | [non-empty string | function | object { loader?, options?, query? }]

Are you sure we have to move loader: to use: everywhere?
I guess I need some more reading for v2 but the webpack docs is sometimes... well I won't say it, it's a great great tool anyway!

@bebraw

This comment has been minimized.

Copy link
Contributor

commented Jan 29, 2017

@gplume Can you set up an entire repository for me to clone? It's easier for me to see what's going on then. Note that you should use loader within the plugin definition itself. The error sounds like something else, though.

@gplume

This comment has been minimized.

Copy link

commented Jan 29, 2017

I thought the zipped gist could help? I've updated it to make use of use: and pinned it to beta.4.
npm install && npm run build put you into context.
As soon as you upgrade extract-text plugin to rc.x, it fails.

@bebraw

This comment has been minimized.

Copy link
Contributor

commented Jan 29, 2017

@gplume Ok, got it.

The issue happens because font-awesome-loader has a line like this in its pitch phase:

  var styleLoaderCommand = 'require(' + JSON.stringify('-!' + styleLoader + '!' +
      require.resolve('./font-awesome-styles.loader.js') + '!' + configFilePath) + ');';

Since extract returns an object now, it will stringify it as [object Object],[object Object],[object Object],[object Object] for the loader query and that won't obviously work here since we don't support that form at the moment.

@insin Any thoughts on this? It's a little tricky as probably have to choose either the current format (array of objects) or the old one (querystring). The new format is handy for use, but it breaks loaders like font-awesome-loader and there's no way to support both.

bebraw added a commit to bebraw/extract-text-webpack-plugin that referenced this issue Jan 29, 2017

fix - Implement custom `toString` for `extract`
This should fix the behavior with loaders that rely on pitching. Since
it needs to deal with a string, `extract` should return the loader in a
query format as well.

The change allows the `extract` to be used with `loader` field again.

There's one gotcha - the current solution doesn't handle functions
(postcss) in any special way. That may require further thinking.

Closes webpack-contrib#364.
Closes webpack-contrib#370.
@bebraw

This comment has been minimized.

Copy link
Contributor

commented Jan 29, 2017

@gplume Here's a potential fix if you want to try it out, #374 .

bebraw added a commit to bebraw/extract-text-webpack-plugin that referenced this issue Jan 29, 2017

fix - Implement custom `toString` for `extract`
This should fix the behavior with loaders that rely on pitching. Since
it needs to deal with a string, `extract` should return the loader in a
query format as well.

The change allows the `extract` to be used with `loader` field again.

There's one gotcha - the current solution doesn't handle functions
(postcss) in any special way. That may require further thinking.

Closes webpack-contrib#364.
Closes webpack-contrib#370.
@bebraw

This comment has been minimized.

Copy link
Contributor

commented Jan 31, 2017

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.

@wzup

This comment has been minimized.

Copy link

commented Feb 23, 2017

@bebraw
No, it's not font-awesome-loader. I don't have font-awesome-loader and I have the error.

$ NODE_ENV='production' node_modules/.bin/webpack --config webpack.conf.js --progress -p --display-depth --colors --display-chunks

C:\Users\user\app\node_modules\extract-text-webpack-plugin\schema\validator.js:11
                throw new Error(ajv.errorsText());
                ^

Error: data['fallback'] should NOT have additional properties
    at validate (C:\Users\user\app\node_modules\extract-text-webpack-plugin\schema\validator.js:11:9)
    at Function.ExtractTextPlugin.extract (C:\Users\user\app\node_modules\extract-text-webpack-plugin\index.js:190:3)
    at Object.<anonymous> (C:\Users\user\app\webpack\production.browser.js:103:40)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)

A list of modules I use:

            'jquery',
            'react',
            'react-dom',
            'react-sticky',
            'material-ui',
            'react-redux',
            'react-router',
            'redux-thunk',
            'redux-logger',
            'rc-slider',
            'react-addons-css-transition-group',
            'classnames',

Error is thrown here:

            {
                // test: /^.*\.local\.scss$/i, // is a shortcut to Rule.resource.test
                // exclude: '', // is a shortcut to Rule.resource.exclude
                // include: '', //  is a shortcut to Rule.resource.include
                resource: {
                    test: /^.*\.local\.scss$/i,
                    // exclude: '',
                    include: [
                        path.resolve(__dirname, '..', 'assets/sass'),
                    ]
                },
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        'css-loader?modules&importLoaders=1&minimize&localIdentName=[hash]',
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: function () {
                                    return [
                                        // require('precss'),
                                        require('autoprefixer')
                                    ];
                                }
                            }
                        },
                        'sass-loader'
                    ],
                }),
                // enforce: '',
            },
@bebraw

This comment has been minimized.

Copy link
Contributor

commented Feb 23, 2017

@wzup There's not enough information to tell what's wrong. I would need the plugin definition at least to tell why the validation is failing.

@wzup

This comment has been minimized.

Copy link

commented Feb 23, 2017

@bebraw I've updated my prev post

@bebraw

This comment has been minimized.

Copy link
Contributor

commented Feb 23, 2017

@wzup Are you absolutely sure you are using rc3? rc2 would throw in the line your trace points to.

@wzup

This comment has been minimized.

Copy link

commented Feb 23, 2017

@bebraw

Exactly it was rc2. Thank you very much for your quick response. Re-installation of the plugin solved the issue.

$ npm rm extract-text-webpack-plugin --save-dev
$ npm install --save-dev extract-text-webpack-plugin@beta

Am working on two apps with similar webpack configs and just couldn't understand why one compiles all right and the other doesn't. Didn't notice the version difference.

extract text plugin error - sublime text - 2017-02-24 00 09 15

@bebraw

This comment has been minimized.

Copy link
Contributor

commented Feb 23, 2017

@wzup No worries. Cool to hear you got it. 👍

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