Webpack2 and ExtractText plugin

[fkrauthan]

Hey I am using the latest version of webpack2 and the extract text plugin but I can't get it working.

ERROR in ./~/font-awesome-webpack/index.loader.js!./src/client/theme/font-awesome.config.prod.js
Module not found: Error: Can't resolve '[object Object],[object Object],[object Object],[object Object]' in '/Users/fkrauthan/IntellijWorkspace/program-portal/hyperwallet-program-portal/src/client/theme'
 @ ./~/font-awesome-webpack/index.loader.js!./src/client/theme/font-awesome.config.prod.js 1:0-339
 @ multi bootstrap-sass-loader!./src/client/theme/bootstrap.config.prod.js font-awesome-webpack!./src/client/theme/font-awesome.config.prod.js simple-line-icons-webpack!./src/client/theme/simple-line-icons.config.prod.js ./src/client.js

Any ideas what I need to do? I've already tried the below to versions:

fontAwesomeConfig.styleLoader = ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: "css-loader?importLoaders=1&sourceMap!less-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true",
});

as well as

fontAwesomeConfig.styleLoader = ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: [
        {
            loader: "css-loader",
            options: {
                modules: true,
                importLoaders: 1,
            },
        },
        {
            loader: "less-loader",
            options: {
                outputStyle: "expanded",
                sourceMap: true,
                sourceMapContents: true,
            },
        },
    ],
});

both resulting in that same error message.

[MatthewFairbank]

Having the same issue as well. Running webpack 2.2.1 and

module.exports = { styleLoader: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader!less-loader" }),

[fkrauthan]

I wrote a small helper function.

function encodeLoader(loader) {
    if (typeof loader === "string") {
        return loader;
    }

    if (typeof loader.options !== "undefined") {
        const query = Object
            .keys(loader.options)
            .map(function map(param) {
                return `${encodeURIComponent(param)}=${encodeURIComponent(loader.options[param])}`;
            })
            .join("&");
        return `${loader.loader}?${query}`;
    }
    return loader.loader;
}

module.exports = function buildExtractStylesLoader(loaders) {
    const extractTextLoader = encodeLoader(loaders[0]);
    const fallbackLoader = encodeLoader(loaders[1]);

    const restLoaders = loaders
        .slice(2)
        .map(function map(loader) {
            if (typeof loader === "string") {
                return loader;
            }
            return encodeLoader(loader);
        });

    return [
        extractTextLoader,
        fallbackLoader,
        ...restLoaders,
    ].join("!");
};

So my font-awesome-config.js looks like this

const buildExtractStylesLoader = require("./buildExtractStylesLoader");

const fontAwesomeConfig = require("./font-awesome.config.js");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
fontAwesomeConfig.styleLoader = buildExtractStylesLoader(ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: ["css-loader", "less-loader"],
}));

module.exports = fontAwesomeConfig;

But I feel like there should be a more elegant solution.

P.s.: My function can also deal with options without any trouble as it converts them to query parameters if needed.

[leozcx]

The helper function works for me