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

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

Open
pstenstrm opened this issue Dec 12, 2019 · 0 comments

Comments

@pstenstrm
Copy link

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?

@pstenstrm pstenstrm changed the title Using compose with babel-plugin-module-resolver alias does not work Using aliases with compose babel-plugin-module-resolver alias does not work Dec 12, 2019
@pstenstrm pstenstrm changed the title Using aliases with compose babel-plugin-module-resolver alias does not work Using aliases with compose babel-plugin-module-resolver alias does not works Dec 12, 2019
@pstenstrm pstenstrm changed the title Using aliases with compose babel-plugin-module-resolver alias does not works Using aliases with composes and babel-plugin-module-resolver alias does not works Dec 12, 2019
@pstenstrm pstenstrm changed the title Using aliases with composes and babel-plugin-module-resolver alias does not works Using aliases with composes and babel-plugin-module-resolver does not works Dec 12, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant