I have the React app with the following components: AppProvider and App. That is a design pattern I repeat quite often, and I am surprised that here (on AppProvider component) it throws error:

Property 'children' does not exist on type '{}'.

import React from "react";
import { combineReducers } from "redux";
import { configureStore } from "@reduxjs/toolkit";
import { HashRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";

import thunk from "redux-thunk";

import fetchReducer from "reduxware/reducers/fetchReducer";

const rootReducer = combineReducers({
  fetch: fetchReducer,
  
});

export const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(thunk),
});

const AppProvider: React.FC = ({children} ) => {
  return (
    <Provider store={store}>
          <Router basename={process.env.PUBLIC_URL}>{children}</Router> 
    </Provider>
  );
};

export default AppProvider;
export type RootStateType = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

The file above is nearly 1: 1 copied from another project where it works. I suspect it could be something with dependencies, or TS configuration then (but these are also copied from working sources). So, please have a look also here, just give me a hint where to look for.

As per my previous actions, I have removed node modules as whole and installed again, also

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.6",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "lodash": "^4.17.21",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-router-redux": "^4.0.8",
    "react-scripts": "5.0.0",
    "redux": "^4.2.0",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.3.0",
    "typescript": "^4.4.4",
    "web-vitals": "^0.2.4",
    "workbox-background-sync": "^5.1.4",
    "workbox-broadcast-update": "^5.1.4",
    "workbox-cacheable-response": "^5.1.4",
    "workbox-core": "^5.1.4",
    "workbox-expiration": "^5.1.4",
    "workbox-google-analytics": "^5.1.4",
    "workbox-navigation-preload": "^5.1.4",
    "workbox-precaching": "^5.1.4",
    "workbox-range-requests": "^5.1.4",
    "workbox-routing": "^5.1.4",
    "workbox-strategies": "^5.1.4",
    "workbox-streams": "^5.1.4"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.176",
    "@types/react-dom": "^18.0.8",
    "@types/react-redux": "^7.1.22",
    "@types/react-router-dom": "^5.3.2",
    "babel-jest": "^27.4.6",
    "gh-pages": "^3.2.3"
  },
  "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"
    ]
  }
}

{
    "compilerOptions": {
        "target": "ES2015",
        "downlevelIteration": true,
        "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",
        "baseUrl": "src",
        "paths": {
            "types/*": ["types/*"],
            "hooks/*": ["hooks/*"],
            "models/*": ["models/*"],
            "components/*": ["components/*"],
            "js/*": ["js/*"],
            "icons/*": ["Icons/*"],
            "styles/*": ["styles/*"],
            "images/*": ["images/*"],
            "countries/*": ["countries/*"]
        }
    },
    "include": ["src"]
}

CodePudding user response：

The type signature for React.FC has changed in a recent version of React.

The children prop was removed from React.FunctionComponent (React.FC) so you have to declare it explicitly in your component properties.

You can either pass it in via a interface, or like below.

React.FC<{ children: ReactNode }>