Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#280 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
babel, javascript, react
Área
frontend, tooling

Línea de trabajo

Comienza con la configuración de module-resolver en .babelrc y el ejemplo de compose; después inspecciona requireCssModule.js en getTokens y fetch, junto con la llamada a postcss-modules-parser mostrada en el stack trace. Reproduce los casos de alias y rutas relativas y determina si la resolución de compose debería usar los alias configurados; se considera terminado cuando el caso del alias se resuelve sin el error ENOENT y los imports relativos existentes siguen funcionando.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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 https://github.com/gajus/babel-plugin-react-css-modules/issues/46#issuecomment-414130223

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?

Lenguaje dominante
JavaScript
Estrellas
2k
Forks
159
Sin PR fusionados en 30 d

Preparar el entorno

Aún no hemos revisado los archivos de configuración de este proyecto. Empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de gajus/babel-plugin-react-css-modules

Todos los issues de gajus/babel-plugin-react-css-modules

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.