Missing [path] in module.less files [webpack 4]

[wbern]

my.module.less in chrome devtools Before webpack 4.1.1

var escape = require("../../../node_modules/css-loader/lib/url/escape.js");
exports = module.exports = require("../../../node_modules/css-loader/lib/css-base.js")(true);
// imports


// module
exports.push([module.id, ".app-controllers-___header-module__header___...snip

// exports
exports.locals = {
	"header": "app-controllers-___header-module__header___2cDAd",
	"link": "app-controllers-___header-module__link___9ZF3f",
	"title": "app-controllers-___header-module__title___3zdsk",
	"versionName": "app-controllers-___header-module__versionName___P3mUm",
	"loggedInUser": "app-controllers-___header-module__loggedInUser___2g4NC",
	"settingsAndInfo": "app-controllers-___header-module__settingsAndInfo___3tMjw",
	"usernameLabel": "app-controllers-___header-module__usernameLabel___12VlL",
	"userOptionsList": "app-controllers-___header-module__userOptionsList___392Md",
	"userOptionsListItem": "app-controllers-___header-module__userOptionsListItem___1axLL",
	"readonlyLabel": "app-controllers-___header-module__readonlyLabel___3TM1g",
	"outdatedStyle": "app-controllers-___header-module__outdatedStyle___1Hj_P",
	"outdatedLink": "app-controllers-___header-module__outdatedLink___3w-ME"
};

After webpack 4.1.1:

var escape = require("../../../node_modules/css-loader/lib/url/escape.js");
exports = module.exports = require("../../../node_modules/css-loader/lib/css-base.js")(true);
// imports


// module
exports.push([module.id, ".___header-module__header_...snip
// exports
exports.locals = {
	"header": "___header-module__header___2hFEv",
	"link": "___header-module__link___3788-",
	"title": "___header-module__title___1ltkk",
	"versionName": "___header-module__versionName___PiO_N",
	"loggedInUser": "___header-module__loggedInUser___3rJB5",
	"settingsAndInfo": "___header-module__settingsAndInfo___3En63",
	"usernameLabel": "___header-module__usernameLabel___2IGNx",
	"userOptionsList": "___header-module__userOptionsList___NyxVd",
	"userOptionsListItem": "___header-module__userOptionsListItem___3U7ZZ",
	"readonlyLabel": "___header-module__readonlyLabel___1XVj-",
	"outdatedStyle": "___header-module__outdatedStyle___2aBI2",
	"outdatedLink": "___header-module__outdatedLink___3RjtB"
};

My rule:

{
    test: /\.module\.less$/,
    use: [
        {
            loader: "style-loader",
            options: { sourceMap: true }
        },
        {
            loader: "css-loader",
            options: {
                sourceMap: true,
                modules: true,
                importLoaders: 1,
                localIdentName: "[path]___[name]__[local]___[hash:base64:5]"
            }
        },
        {
            loader: "postcss-loader",
            options: {
                sourceMap: true,
                plugins: loader => [
                    require("postcss-import")({
                        root: loader.resourcePath
                    }),
                    require("postcss-cssnext")({
                        warnForDuplicates: false
                    }),
                    require("postcss-csso")({
                        zindex: false
                    })
                ]
            }
            // publicPath: ""
        },
        {
            loader: "less-loader",
            options: { sourceMap: true }
        }
    ]
};

I'm guessing here that [path] is the item missing in the output. Any thoughts? Is this a bug?

[myxious]

Same here. Also seems like the hash part doesn't match as well anymore.

[CurtisHumphrey]

This is an example of what I have: react-css-modules generates: CoreLayout__root_1jCh_ css-loader generates: CoreLayout__root___1Glqn

The hashes are not matching

[gajus]

I have not switched to webpack v4 myself. Cannot comment. Ensure that context is configured correctly. Assuming you have, this will require further inspection.

Assuming this is incompatibility with v4, then PR is welcome.

[MuYunyun]

@gajus I'm not sure how to configure the context in the .babelrc, Can you provide a demo ? Thanks.

[gajus]

@gajus I'm not sure how to configure the context in the .babelrc, Can you provide a demo ? Thanks.

https://github.com/gajus/babel-plugin-react-css-modules/blob/master/demo/webpack.config.js#L28

[MuYunyun]

It's said the context is only to configure in the webpack, not in the .babelrc, is right ?

[gajus]

You need to configure context in webpack and Babel.

How you configure Babel is up to you (you can use .babelrc.js; you shouldn't use .babelrc because the value of the context is dynamic).

[MuYunyun]

Thanks for explaining. It seems there is bug using webpack4. I've configured the context in the webpack. Howver the xx_xx_xxxxx can't be found in the

<div class='xx_xx_xxxxx'>
  123
</div>;

[cyseria]

This is an example of what I have: react-css-modules generates: CoreLayout__root_1jCh_ css-loader generates: CoreLayout__root___1Glqn

The hashes are not matching

I got the same error.

It seems that there isn't a bug of webpack4. It happens when the webpack config files and babel configuration files are in different directories. Maybe you can console.log and compare them :)

[GytisT]

This is an example of what I have: react-css-modules generates: CoreLayout__root_1jCh_ css-loader generates: CoreLayout__root___1Glqn The hashes are not matching

I got the same error.

It seems that there isn't a bug of webpack4. It happens when the webpack config files and babel configuration files are in different directories. Maybe you can console.log and compare them :)

For anybody else stuck with same issue!

You most likely use css-loader ^4, hashes are different because of that. css-loader ^4 uses md4 for a hash, but this package uses md5. It was explained by another person here: https://github.com/gajus/babel-plugin-react-css-modules/issues/291

Now for the solution:

Original developer of this package seems to have abandoned further development, however @birdofpreyru has fixed issue at his fork: https://github.com/birdofpreyru/babel-plugin-react-css-modules as well as released package at https://www.npmjs.com/package/@dr.pogodin/babel-plugin-react-css-modules

Solved issues for me. Setting context for the webpack and babel's plugin did not do anything for me and it makes sense, because context is set to cwd by default, which was correct in my case.