Cómo Solucionar el Error "eslintrc file is a commonjs module it may be converted to an es module"
Cuando trabajas con ESLint, es posible que te encuentres con el siguiente error: "eslintrc file is a commonjs module it may be converted to an es module". Este mensaje puede ser confuso, especialmente si no estás familiarizado con las diferencias entre los módulos CommonJS y los módulos ECMAScript (ESM). En este artículo, vamos a desglosar qué significa este error y cómo puedes solucionarlo.
¿Qué significa este error?
Este error aparece cuando ESLint detecta que tu archivo de configuración .eslintrc está escrito en el formato de módulo CommonJS (usando module.exports) en lugar de utilizar el formato de módulo ECMAScript (usando export).
Desde la introducción de los módulos ECMAScript en JavaScript, muchas herramientas han comenzado a adoptar este nuevo estándar para la interoperabilidad y consistencia del código. ESLint, como una herramienta moderna de linting, también ha comenzado a soportar y recomendar el uso de los módulos ESM.
Soluciones posibles
Existen dos formas principales de resolver este error, dependiendo de cómo prefieras estructurar tu archivo de configuración de ESLint.
1. Convertir .eslintrc.js a un módulo ECMAScript
Si estás usando un archivo eslintrc.js, lo más probable es que esté escrito usando la sintaxis de CommonJS, algo como esto:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
rules: {
// tus reglas personalizadas aquí
},
};
Para solucionar el error, debes convertirlo a un módulo ECMAScript utilizando la sintaxis export default:
export default {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
rules: {
// tus reglas personalizadas aquí
},
};
2. Renombrar el archivo de configuración a .eslintrc.json o .eslintrc.yaml
Otra opción es cambiar el formato del archivo de configuración a JSON o YAML, que no dependen de ningún tipo de módulo (CommonJS o ESM). Puedes crear un archivo .eslintrc.json con un contenido similar a este:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
// tus reglas personalizadas aquí
}
}O bien, podrías usar YAML:
env:
browser: true
es2021: true
extends:
- eslint:recommended
- plugin:react/recommended
parserOptions:
ecmaVersion: 12
sourceType: module
rules:
# tus reglas personalizadas aquí3. Forzar ESLint a utilizar CommonJS
Si, por alguna razón, prefieres seguir usando CommonJS en tu archivo de configuración, podrías intentar forzar a ESLint a interpretarlo correctamente agregando un comentario en la parte superior del archivo:
// @ts-check
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
rules: {
// tus reglas personalizadas aquí
},
};Sin embargo, ten en cuenta que esta no es la solución recomendada a largo plazo, ya que la comunidad JavaScript se está moviendo hacia el uso de módulos ESM como estándar.
Conclusión
Este error es una indicación de que ESLint y, en general, la comunidad JavaScript, están migrando hacia el uso de módulos ECMAScript (ESM). La mejor solución a largo plazo es adoptar el formato de módulo ESM para asegurar la compatibilidad y seguir las mejores prácticas modernas. Si bien cambiar a ESM puede requerir algunos ajustes, es un paso hacia una mayor interoperabilidad y mantenimiento del código en el futuro.
Jorge García
Fullstack developer