Halo...
In my React.js app, I got this error in my webpack.config.js from eslint
Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: webpack.config.js.
The file must be included in at least one of the projects provided.
That error message is pointing the first line of my webpack.config.js file. Here is my webpack file.
const HTMLWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: `${__dirname}/public/index.html`,
filename: "index.html",
inject: "body",
});
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
},
],
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 8192,
},
},
],
},
],
},
output: {
filename: "transformed.js",
path: `${__dirname}/build`,
publicPath: "/",
},
resolve: {
alias: {
"@": path.resolve("src"),
"@routes": path.resolve("src/client/routes"),
"@lib": path.resolve("src/client/lib"),
"@designTokens": path.resolve("src/client/lib/designTokens"),
"@constants": path.resolve("src/client/lib/constants"),
"@assets": path.resolve("src/client/assets"),
"@context": path.resolve("src/client/context"),
"@components": path.resolve("src/client/components"),
},
},
plugins: [HTMLWebpackPluginConfig],
devServer: {
historyApiFallback: true,
host: "dev.thinkfast.app",
port: 8080,
https: {
key: "../_cert/thinkfast.react.key.pem", // <<< cert key file
cert: "../_cert/thinkfast.react.cert.pem", // <<< cert file
},
},
};And this is my .eslintrc.json file.
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"react-app",
"react-app/jest",
"airbnb",
"airbnb-typescript",
"plugin:import/typescript",
"plugin:prettier/recommended"
],
"overrides": [
{
"files": ["*.ts", "*.tsx"], // Your TypeScript files extension
// As mentioned in the comments, you should extend TypeScript plugins here,
// instead of extending them outside the `overrides`.
// If you don't want to extend any rules, you don't need an `extends` attribute.
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking"
],
"parserOptions": {
"project": ["./tsconfig.json"] // Specify it only for TypeScript files
}
}
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": ["react", "@typescript-eslint", "prettier"],
"rules": {
"import/prefer-default-export": 0,
"jsx-a11y/anchor-is-valid": "off",
"jsx-a11y/click-events-have-key-events": 0,
"jsx-a11y/mouse-events-have-key-events": 0,
"jsx-a11y/no-noninteractive-element-interactions": "off",
"jsx-a11y/no-static-element-interactions": 0,
"react/forbid-prop-types": 0,
"react/jsx-filename-extension": ["off"],
"react/jsx-uses-react": ["off"],
"react/react-in-jsx-scope": ["off"],
"react/jsx-props-no-spreading": ["off"],
"react/no-unescaped-entities": 0,
"no-case-declarations": "off",
"no-shadow": "off",
"no-plusplus": "off",
"prefer-rest-params": ["off"],
"prettier/prettier": ["error", {}, {}],
"react/no-danger": ["off"]
},
"settings": {
"import/resolver": {
"webpack": {
"config": "./webpack.config.js"
}
}
}
}And this is my tsconfig.json file.
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"exclude": ["./webpack.config.js"]
}And this is my package.json file.
{
"name": "my-app",
"homepage": "https://thinkfast.app:8080",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/css": "^11.9.0",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"axios": "^0.27.2",
"eslint-import-resolver-webpack": "^0.13.2",
"moment": "^2.29.3",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint --color .",
"lint:fix": "eslint --fix --color .",
"prepare": "husky install"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.28.0",
"@typescript-eslint/parser": "^5.28.0",
"babel-loader": "^8.2.5",
"eslint": "^7.32.0 || ^8.2.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"html-loader": "^3.1.2",
"html-webpack-plugin": "^5.5.0",
"husky": "^8.0.0",
"prettier": "^2.7.1",
"url-loader": "^4.1.1",
"webpack": "^5.73.0"
"webpack-cli": "^4.10.0"
}
}I'm really stuck with that error because that is blocking the Husky precommit hook. I know I can bypass it, but I'm afraid that'll cause more problems. Been looking other "parserOptions.project" issues on google, still can't find the matching solution.
Thank you very much!