Skip to content

Using aliases with composes and babel-plugin-module-resolver does not works #280

Open
@pstenstrm

Description

@pstenstrm

I'm trying to replace react-css-modules with this plugin. Most things work or have a simple solution, except for our use of aliases when composing classes. Previously we've used webpack and postcss-import to resolve the aliases, I don't expect that to work with a babel plugin.

@imports still work with aliases, even if I can't compose classes from a file loaded with @import. I can still do composes: button from '../button.css as long as the path is relative.

I've tried to set up the babel module-resolver by this comment #46 (comment)

My config in .babelrc looks like this:

{
	"presets": [
		"@babel/preset-react"
	],
	"plugins": [
		[
			"module-resolver",
			{
				"root": [
					"../apps"
				],
				"alias": {
					"@constants": "../shared/constants",
					"@shared": "../shared",
					"@common": "./common",
				}
			}
		],
		["react-css-modules", {
			"exclude": "node_modules",
			"handleMissingStyleName": "warn",
			"filetypes": {
				".pcss": {
					"syntax": ""
				}
			}
		}],
	],

If I compose a class like this:

.button {
	composes: reset-button from '@common/styles/elements/button.css';
}

I get this error, as it tries to load the path as relative.

ERROR in ./src/app/components/Panel/Participants/Participant/Participant.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open '/[rootpath]/apps/src/app/components/Panel/Participants/Participant/@common/styles/elements/button.css'
	at Object.openSync (fs.js:443:3)
	at readFileSync (fs.js:343:35)
	at getTokens (/[rootpath]/apps/node_modules/babel-plugin-react-css-modules/dist/requireCssModule.js:74:58)
	at fetch (/[rootpath]/apps/node_modules/babel-plugin-react-css-modules/dist/requireCssModule.js:100:12)
	at /[rootpath]/apps/node_modules/postcss-modules-parser/lib/index.js:74:20

Am I mistaken when I expect babel-plugin-react-css-modules to respect rules set with babel-plugin-module-resolver in compose statements?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions