Actualmente estoy configurando un repetitivo con React, Typescript, componentes con estilo, paquete web, etc. y recibo un error al intentar ejecutar eslint:
Error: debe usar la importación para cargar el módulo ES
Aquí hay una versión más detallada del error:
/Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts 0:0 error Parsing error: Must use import to load ES Module: /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js require() of ES modules is not supported. require() of /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/package.json
El error ocurre en cada uno de mis archivos .js y .ts/ .tsx donde solo uso import
o el archivo ni siquiera tiene una importación. Entiendo lo que dice el error, pero no tengo idea de por qué se lanza cuando, de hecho, solo uso importaciones o incluso ninguna importación en algunos archivos.
Aquí está mi paquete.json donde activé el linter para que no use npm run lint:eslint:quiet
:
{ "name": "my-react-boilerplate", "version": "1.0.0", "description": "", "main": "index.tsx", "directories": { "test": "test" }, "engines": { "node": ">=14.0.0" }, "type": "module", "scripts": { "build": "webpack --config webpack.prod.js", "dev": "webpack serve --config webpack.dev.js", "lint": "npm run typecheck && npm run lint:css && npm run lint:eslint:quiet", "lint:css": "stylelint './src/**/*.{js,ts,tsx}'", "lint:eslint:quiet": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet", "lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern", "lint:eslint:fix": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet --fix", "test": "cross-env NODE_ENV=test jest --coverage", "test:watch": "cross-env NODE_ENV=test jest --watchAll", "typecheck": "tsc --noEmit", "precommit": "npm run lint" }, "lint-staged": { "*.{ts,tsx,js,jsx}": [ "npm run lint:eslint:fix", "git add --force" ], "*.{md,json}": [ "prettier --write", "git add --force" ] }, "husky": { "hooks": { "pre-commit": "npx lint-staged && npm run typecheck" } }, "resolutions": { "styled-components": "^5" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.5.4", "@babel/plugin-proposal-class-properties": "^7.5.0", "@babel/preset-env": "^7.5.4", "@babel/preset-react": "^7.0.0", "@types/history": "^4.7.6", "@types/react": "^17.0.29", "@types/react-dom": "^17.0.9", "@types/react-router": "^5.1.17", "@types/react-router-dom": "^5.1.5", "@types/styled-components": "^5.1.15", "@typescript-eslint/eslint-plugin": "^5.0.0", "babel-cli": "^6.26.0", "babel-eslint": "^10.0.2", "babel-loader": "^8.0.0-beta.6", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "clean-webpack-plugin": "^4.0.0", "dotenv-webpack": "^7.0.3", "error-overlay-webpack-plugin": "^1.0.0", "eslint": "^8.0.0", "eslint-config-airbnb": "^18.2.0", "eslint-config-prettier": "^8.3.0", "eslint-config-with-prettier": "^6.0.0", "eslint-plugin-compat": "^3.3.0", "eslint-plugin-import": "^2.25.2", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-react": "^7.14.2", "eslint-plugin-react-hooks": "^4.2.0", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.3.2", "husky": "^7.0.2", "prettier": "^2.4.1", "raw-loader": "^4.0.2", "style-loader": "^3.3.0", "stylelint": "^13.13.1", "stylelint-config-recommended": "^5.0.0", "stylelint-config-styled-components": "^0.1.1", "stylelint-processor-styled-components": "^1.10.0", "ts-loader": "^9.2.6", "tslint": "^6.1.3", "typescript": "^4.4.4", "url-loader": "^4.1.1", "webpack": "^5.58.2", "webpack-cli": "^4.2.0", "webpack-dev-server": "^4.3.1", "webpack-merge": "^5.3.0" }, "dependencies": { "history": "^4.10.0", "process": "^0.11.10", "react": "^17.0.1", "react-dom": "^17.0.1", "react-router-dom": "^5.2.0", "styled-components": "^5.2.1" } }
Aquí está mi archivo .eslintrc:
{ "extends": ["airbnb", "prettier"], "parser": "babel-eslint", "plugins": ["prettier", "@typescript-eslint"], "parserOptions": { "ecmaVersion": 8, "ecmaFeatures": { "experimentalObjectRestSpread": true, "impliedStrict": true, "classes": true } }, "env": { "browser": true, "node": true, "jest": true }, "rules": { "arrow-body-style": ["error", "as-needed"], "class-methods-use-this": 0, "react/jsx-filename-extension": 0, "global-require": 0, "react/destructuring-assignment": 0, "import/named": 2, "linebreak-style": 0, "import/no-dynamic-require": 0, "import/no-named-as-default": 0, "import/no-unresolved": 2, "import/prefer-default-export": 0, "semi": [2, "always"], "max-len": [ "error", { "code": 80, "ignoreUrls": true, "ignoreComments": true, "ignoreStrings": true, "ignoreTemplateLiterals": true } ], "new-cap": [ 2, { "capIsNew": false, "newIsCap": true } ], "no-param-reassign": 0, "no-shadow": 0, "no-tabs": 2, "no-underscore-dangle": 0, "react/forbid-prop-types": [ "error", { "forbid": ["any"] } ], "import/no-extraneous-dependencies": ["error", { "devDependencies": true }], "react/jsx-no-bind": [ "error", { "ignoreRefs": true, "allowArrowFunctions": true, "allowBind": false } ], "react/no-unknown-property": [ 2, { "ignore": ["itemscope", "itemtype", "itemprop"] } ] } }
Y no estoy seguro si es relevante, pero también mi archivo tsconfig.eslint.json:
{ "extends": "./tsconfig.json", "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"], "exclude": ["node_modules/**", "build/**", "coverage/**"] }
¿No estás seguro de si alguien se ha encontrado con esto antes? Buscar en Google el error no presenta ningún foro útil o errores planteados, la mayoría de ellos simplemente indican que no se debe usar require
en sus archivos, lo cual no soy.
Creo que el problema es que está tratando de usar el analizador obsoleto babel-eslint , actualizado por última vez hace un año, que parece que no es compatible con los módulos ES6. La actualización al último analizador parece funcionar, al menos para la pelusa simple.
Entonces, haz esto:
"babel-eslint": "^10.0.2",
a "@babel/eslint-parser": "^7.5.4",
. Esto funciona con el código anterior, pero puede ser mejor usar la última versión, que en el momento de escribir este artículo es la 7.16.3.npm i
desde una terminal/símbolo del sistema en la carpeta"parser": "babel-eslint",
a "parser": "@babel/eslint-parser",
"requireConfigFile": false,
a la sección parserOptions (debajo "ecmaVersion": 8,
) (necesitaba esto o babel estaba buscando archivos de configuración que no tengo)Luego, para mí, con solo sus dos archivos de configuración, el error desaparece y obtengo los errores de pelusa apropiados.
"@babel/eslint-parser" depende de "@babel/core". Así que después de "npm install @babel/eslint-parser -S", deberías npm i @babel/core -S