ESLint: PayloadAction not found in '#reduxjs/toolkit'(import/named) - react-redux

Question

I'm currently building a React app with Redux-toolkit on TypeScript, which was created using create-react-app & I'm getting this error in every Reducer file in my project:
ESLint: PayloadAction not found in '#reduxjs/toolkit'(import/named)
Here is one described for example
Code:
import {createSlice, PayloadAction} from "#reduxjs/toolkit" // An error is coming from here
export interface IInitialState {
isDisSignUp: boolean
}
const initialState: IInitialState = {
isDisSignUp: true,
}
export const buttonSlice = createSlice({
name: "button",
initialState,
reducers: {
disSignUpButton(state, action: PayloadAction<boolean>) {
state.isDisSignUp = action.payload
},
},
})
export default buttonSlice.reducer
My .eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended",
"plugin:import/recommended",
"prettier"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"ecmaVersion": "latest",
"sourceType": "module",
"project": "tsconfig.json"
},
"plugins": ["react", "#typescript-eslint", "react-hooks", "import"],
"rules": {
"indent": [
"error",
4,
{
"SwitchCase": 1
}
],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "double"],
"semi": ["error", "never"],
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/jsx-filename-extension": [
1,
{
"extensions": [".tsx"]
}
],
"import/prefer-default-export": "off",
"import/extensions": [
"error",
"ignorePackages",
{
"ts": "never",
"tsx": "never"
}
]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".jsx", ".js", ".ts", ".tsx"]
},
"typescript": {
"alwaysTryTypes": true
}
}
}
}
My .tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"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"]
}
My package.json
{
"name": "test_task__myself2",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.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",
"#types/react-redux": "^7.1.24",
"#types/react-router-dom": "^5.3.3",
"#typescript-eslint/eslint-plugin": "^5.30.7",
"#typescript-eslint/parser": "^5.30.7",
"axios": "^0.27.2",
"classnames": "^2.3.1",
"dotenv": "^16.0.1",
"email-validator": "^2.0.4",
"eslint-plugin-react": "^7.20.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"redux": "^4.2.0",
"sass": "^1.54.0",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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": {
"eslint": "^7.2.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-typescript": "^2.7.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react-hooks": "^4",
"node-sass": "^7.0.1",
"prettier": "^2.6.2"
}
}
Edit
This solution helped me:
Edit .eslintrc.json
"settings": {
"import/parsers": {
"#typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"typescript": {
"alwaysTryTypes": true
}
}
}

Answer 1

Try :
import type {PayloadAction} from "#reduxjs/toolkit"

Answer 2

Try using this, it worked for me
import {createSlice, PayloadAction} from "toolkit"
If this doesn't work, try editing some parts of file to this:
"settings": {
"import/parsers": {
"#typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"typescript": {
"alwaysTryTypes": true
}
}
}