This experimental syntax requires enabling the parser plugin: 'classPrivateMethods' - eslint

I am getting this error. There are a few similar cases that I have seen in Stackoverflow, but I checked and tried everything and the solutions didn't work.
The project itself works, it is just when I try to use pkg, I am getting the error:
> pkg src/index.js --target=latest-win-x64 --out-path ./dist --config pkg.json
:
:
> Error! This experimental syntax requires enabling the parser plugin: 'classPrivateMethods' (441:2)
E:\Proj\node_modules\node-webpmux\webp.js
All solutions basically say to add plugin-proposal-class-properties and plugin-proposal-private-methods, and specify them in the project json files (eslint, babel, package). I did that, and it doesn't help.
package.json:
"devDependencies": {
"#babel/core": "^7.14.8",
"#babel/eslint-parser": "^7.14.7",
"#babel/plugin-proposal-class-properties": "^7.14.5",
"#babel/plugin-proposal-private-methods": "^7.14.5",
"#babel/preset-env": "^7.14.8",
"#babel/preset-react": "^7.14.5",
"eslint": "^7.31.0"
},
.eslintrc.json:
{
"extends": "eslint:recommended",
"parser": "#babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module",
"babelOptions": {
"plugins": ["#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-private-methods"]
}
},
"plugins": [
"classPrivateMethods",
"classPrivateProperties",
"babel"
],
"env": {
"node": true
},
"rules": {
"no-console": 0,
"no-unused-vars": 1,
"babel/semi": 1
}
}
.babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties"
]
]
}
.pkg.json:
{
"name": "WA chatbot",
"version": "1.0.0",
"pkg": {
"assets": "./assets"
}
}
node version: v14.15.3
yarn: v1.22.10
Is there a solution for this?

Related

Cannot find module 'eslint-plugin-eslint' error

I'm setting up a new project with React in Javascript environment.
I creatd a project through CRA(version 18.2.0), and I am configuring ESLint and Prettier environments.
However, when I ran npm run start after setting the configuration, the error occurred.
What could be the workaround?
Failed to load plugin 'eslint' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-eslint'
And this is my ESLint setup.
//.eslintrc.js
module.exports = {
env: {
browser: true,
es2020: true,
},
extends: [
"plugin:import/errors",
"plugin:import/warnings",
"plugin:prettier/recommended",
"plugin:eslint/recommended",
"plugin:react/recommended", // Uses the recommended rules from #eslint-plugin-react
"prettier",
],
parserOptions: {
ecmaVersion: "latest", // Allows for the parsing of modern ECMAScript features
sourceType: "module", // Allows for the use of imports
ecmaFeatures: {
jsx: true, // Allows for the parsing of JSX
},
},
rules: {
"react/prop-types": "off",
"no-extra-semi": "error",
"react/jsx-filename-extension": [1, { extensions: ["js", "jsx"] }],
"arrow-parens": ["warn", "as-needed"],
"no-unused-vars": "warn",
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "prod" ? "warn" : "off",
"import/prefer-default-export": ["off"],
"react-hooks/exhaustive-deps": ["warn"],
"react/jsx-props-no-spreading": [1, { custom: "ignore" }],
"react/jsx-key": "warn",
"react/react-in-jsx-scope": "off",
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never"
}
],
},
}
//package.json
"devDependencies": {
"eslint": "^8.2.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0"
}
how can i solve it?
if you did not eject your CRA, you do not need to install eslint yourself as it is in dependency of react-script. Pls check how to extend default eslint config here:
https://create-react-app.dev/docs/setting-up-your-editor/#extending-or-replacing-the-default-eslint-config

ESlint errors while using yarn#berry with create-react-app and TypeScript

recently in project that I'm starting from scratch I met a problem that I can't get quite solved. I'm not an expert in pnp, actually was setting up this for the first time just now.
We decided to use yarn#berry with zero-installs setup, I did also setup an eslint, prettier, husky with commitlint and started the app.
So, after any .tsx file save this error comes up:eslint plugin error
Here is my .eslintrc.json
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"react-app",
"react-app/jest",
"airbnb",
"airbnb-typescript",
"plugin:import/typescript"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": ["react", "#typescript-eslint"],
"rules": {
"react/react-in-jsx-scope": ["off"],
"react/jsx-uses-react": ["off"],
"react/no-array-index-key": ["off"],
"react/jsx-props-no-spreading": ["warn"],
"react/no-unescaped-entities": ["off"],
"react/function-component-definition": [
2,
{
"namedComponents": "arrow-function",
"unnamedComponents": "arrow-function"
}
]
}
}
And when I do install this single library manually it starts to ask for next plugin that ESlint extends from.

eslint import/order react typescript

I want to configure eslint import/order to a custom configuration, but I cannot make it work in react typescript files.
Here is my rule:
"import/order":[
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups":[{
"pattern": "react",
"group": "external",
"position": "before"
}],
"pathGroupsExcludedImportTypes": ["react"],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive":true
}
}
]
.eslintrc.json file:
{
"parser": "#typescript-eslint/parser",
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 6,
"project": "./tsconfig.json"
},
"env": {
"browser": true,
"jest": true,
"es6": true
},
"extends": [
"airbnb-typescript",
"airbnb/hooks",
"prettier",
"prettier/react",
"plugin:#typescript-eslint/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"plugin:jest/recommended",
"prettier/#typescript-eslint",
"plugin:prettier/recommended"
],
"plugins": [
"react",
"react-hooks",
"import",
"#typescript-eslint",
"prettier",
"jest"
],
"rules": {
"no-console": 2,
"prettier/prettier": [
"error",
{
"singleQuote": true
}
],
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "off",
"react/jsx-filename-extension": [
"off"
],
"react/jsx-closing-bracket-location": [
1,
"tag-aligned"
],
"import/no-extraneous-dependencies": 1,
"import/order":[
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups":[{
"pattern": "react",
"group": "external",
"position": "before"
}],
"pathGroupsExcludedImportTypes": ["react"],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive":true
}
}
]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".ts", ".tsx"],
"moduleDirectory": [
"node_modules",
"src/"
]
},
"typescript": {
"alwaysTryTypes": true
}
},
"react": {
"version": "detect"
}
}
}
Current package.json dependencies
"#typescript-eslint/eslint-plugin": "^4.9.1",
"#typescript-eslint/parser": "^4.9.1",
"eslint": "7.2.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-prettier": "^7.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.2.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "4.0.0",
Also in tsconfig.json
"baseUrl": "src",
The rule works fine in .ts files:
rule-working-ts
But it does not work with .tsx files.
Fixed by adding this dependency
yarn add -D eslint-import-resolver-typescript

eslint-plugin-testing-library is not catching lint errors

I'm trying to add eslint-plugin-testing library to a project to catch common errors in our #testing-library/react tests. I've followed the instruction steps, yet I cannot get it to catch errors in the test files.
For example, I manually turn on the no-debug rule, add a debug() statement in a .test.tsx file, and run the linter. It does not catch any mistakes in the file.
If I break rules from other plugins, they are caught, so I suspect I may have something wrong in how I added the testing-library plugin to my config.
package.json
{
"dependencies": {
"react": "16.12.0",
"react-dom": "16.12.0"
},
"devDependencies": {
"#babel/core": "7.7.0",
"#babel/preset-react": "7.0.0",
"#babel/preset-typescript": "7.1.0",
"#testing-library/react": "9.1.3",
"#typescript-eslint/eslint-plugin": "2.15.0",
"#typescript-eslint/parser": "2.15.0",
"eslint": "6.8.0",
"eslint-plugin-cypress": "2.10.3",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.19.0",
"eslint-plugin-react-hooks": "2.3.0",
"eslint-plugin-testing-library": "3.0.0",
"typescript": "3.7.3"
}
}
.eslintrc
{
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"modules": true
}
},
"env": {
"browser": true,
"es6": true,
"jasmine": true,
"jest": true,
"jquery": true,
"node": true
},
"plugins": [
"#typescript-eslint",
"jsx-a11y",
"react-hooks",
"react",
"testing-library"
],
"extends": [
"eslint:recommended",
"plugin:jsx-a11y/recommended",
"plugin:react/recommended",
"plugin:testing-library/recommended"
],
"rules": {
"#typescript-eslint/no-unused-vars-experimental": "off",
"no-unused-vars": "off",
"react-hooks/exhaustive-deps": "warn",
"react-hooks/rules-of-hooks": "error",
"react/display-name": "off",
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"react/prop-types": "off",
"testing-library/no-await-sync-query": "error",
"testing-library/no-debug": "error"
},
"settings": {
"react": {
"version": "detect"
}
}
}
Couple of things I've seen in your setup:
you are using "plugin:testing-library/recommended" preset, but the best one for React is "plugin:testing-library/react" as it will enable recommended + react ones. That will enable all the rules with "React" badge under configuration columns
after you change this, you can remove both rules you manually added in your eslint config as they are automatically enabled by react preset
I'm not sure what you mean by "If I break rules from other plugins, they are caught". Let me know if enabling react preset fix this for you. If not, it would be nice to have a small repo to reproduce the error.

npm run dev won't start server

I'm trying to do a "npm run dev", but it's not starting a server. I thought that it was supposed to and open up http://127.0.0.1:8000. How do I get it to do that? "npm start" works and goes to my localhost. I looked for an answer, but couldn't find anything. If anyone can help me out or give me a link to an answer, I'd appreciate it. I'm new here. Thanks. If it helps:
npm -v
6.4.1
node -v
v10.13.0
webpack -v
4.20.2
package.json:
{
"name": "cocos-skeleton",
"description": "",
"version": "1.0.0",
"main": "main.js",
"author": "",
"license": "UNLICENSED",
"private": true,
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"lint": "cross-env eslint src",
"test": "cross-env jest --passWithNoTests",
"test:watch": "cross-env jest --passWithNoTests --watch --notify",
"test:coverage": "cross-env jest --coverage",
"config": "cross-env webpack --config tools/webpack/webpack.config.js",
"bundle": "cross-env npm run config -- --mode production",
"bundle:watch": "cross-env npm run config -- --mode development --watch --progress --display-error-details",
"compile": "cross-env cocos compile",
"start": "cross-env cocos run",
"dev": "cross-env npm run bundle:watch & npm run start",
"refresh": "cross-env npm run compile && npm run start",
"release": "cross-env cocos run -m release"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"linters": {
"*.js": [
"eslint --fix",
"jest --bail --findRelatedTests",
"git add"
]
},
"ignore": [
"**/frameworks/**/*.js"
]
},
"dependencies": {
"#babel/polyfill": "^7.0.0",
"howler": "^2.0.15",
"lodash": "^4.17.11",
"prando": "^3.0.3"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.3",
"babel-loader": "^8.0.0",
"babel-plugin-lodash": "^3.3.4",
"cross-env": "^5.2.0",
"eslint": "^5.6.1",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.14.0",
"husky": "^1.1.0",
"jest": "^23.6.0",
"lint-staged": "^7.3.0",
"lodash-webpack-plugin": "^0.11.5",
"prettier-eslint": "^8.8.2",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"eslintConfig": {
"parser": "babel-eslint",
"extends": "airbnb-base",
"globals": {
"cc": true,
"ccui": true
},
"env": {
"browser": true,
"jest": true
},
"rules": {
"func-names": [
"error",
"as-needed"
],
"no-console": [
"error",
{
"allow": [
"warn",
"error",
"assert"
]
}
],
"complexity": [
"error",
5
],
"max-params": [
"error",
5
],
"max-depth": [
"error",
4
],
"max-statements": [
"error",
20
],
"max-lines-per-function": [
"error",
50
],
"max-classes-per-file": [
"error",
1
],
"max-nested-callbacks": [
"error",
3
],
"max-statements-per-line": [
"error",
{
"max": 1
}
]
}
},
"jest": {
"bail": true,
"coverageThreshold": {
"global": {
"branches": 0,
"functions": 0,
"lines": 0,
"statements": 0
}
},
"collectCoverageFrom": [
"src/**/*.js"
],
"moduleNameMapper": {
"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|cur)$": "<rootDir>/src/lib/mocks/FileMock.js"
}
},
"babel": {
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "usage",
"targets": {
"ie": "11"
}
}
]
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
},
"prettier": {
"singleQuote": true,
"trailingComma": "all",
"printWidth": 100
}
}
webpack.config.js:
const { join } = require('path');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const { dependencies } = require('../../package.json');
const sourcePath = join(`${__dirname}/../../src`);
module.exports = {
entry: { main: './src/index.js', vendor: Object.keys(dependencies) },
optimization: { splitChunks: { name: 'vendor', minChunks: 2 } },
module: {
rules: [
{
test: /\.js$/,
include: sourcePath,
loader: 'babel-loader',
options: {
presets: [
[
'#babel/preset-env',
{
useBuiltIns: 'usage',
targets: {
ie: 11,
},
},
],
],
plugins: ['#babel/plugin-proposal-class-properties', 'lodash'],
},
},
],
},
plugins: [new LodashModuleReplacementPlugin()],
};
I think this one might help you
Difference between npm run dev and npm run production
If you try to build front-end in the server. You could try npm run build or npm run production. Try it

Resources