Type '{ children: () => Element; history: History<unknown>; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ConnectedRouter<unknown>> & Readonly<ConnectedRouterProps<unknown>>'.

[Umar-Farooq-Shafi]

package.json

{ "name": "baroque", "version": "0.1.0", "private": true, "dependencies": { "@craco/craco": "^6.1.1", "connected-react-router": "^6.0.0", "history": "^4.7.2", "merge": "1.2.1", "@popperjs/core": "^2.11.5", "react": "18.1.0", "react-dom": "18.1.0", "react-icons": "^4.2.0", "react-redux": "8.0.1", "react-router": "5.3.3", "react-router-dom": "6.3.0", "react-scripts": "^5.0.1", "redux": "4.0.4", "redux-thunk": "2.3.0", "svgo": "1.3.0" }, "devDependencies": { "@axe-core/react": "^4.4.2", "@tailwindcss/postcss7-compat": "^2.1.0", "@types/history": "^4.7.2", "@types/jest": "24.0.19", "@types/node": "12.11.6", "@types/react": "18.0.9", "@types/react-dom": "18.0.4", "@types/react-redux": "7.1.24", "@types/react-router": "5.1.2", "@types/react-router-dom": "5.1.0", "@types/reactstrap": "8.0.6", "@typescript-eslint/parser": "^2.5.0", "autoprefixer": "^9.8.6", "cross-env": "6.0.3", "eslint-plugin-flowtype": "^3.13.0", "eslint-plugin-import": "2.18.2", "eslint-plugin-jsx-a11y": "6.2.3", "eslint-plugin-react": "7.16.0", "eslint-plugin-react-hooks": "^4.5.0", "nan": "^2.14.1", "postcss": "^7.0.35", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0", "typescript": "3.6.4" }, "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject", "lint": "eslint ./src//*.ts ./src//*.tsx" }, "eslintConfig": { "extends": "react-app" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] }

index.tsx `import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; import { Provider } from 'react-redux'; import { createBrowserHistory } from 'history';

import configureStore from './store/configureStore'; import App from './App'; import registerServiceWorker from './registerServiceWorker';

import './index.css';

// Create browser history to use in the Redux store const baseUrl = document .getElementsByTagName('base')[0] .getAttribute('href') as string; const history = createBrowserHistory({ basename: baseUrl });

// Get the application-wide store instance, prepopulating with state from the server where available. const store = configureStore(history);

const rootElement = document.getElementById('root')!; const root = ReactDOM.createRoot(rootElement);

// render the dom root.render( <React.StrictMode> <Provider store={store}> <App history={history} /> </Provider> </React.StrictMode>, );

registerServiceWorker();

// aria checking if (process.env.NODE_ENV !== 'production') { const { default: axe } = require('@axe-core/react'); axe(React, ReactDOM, 1000); } `

app.tsx

`import * as React from 'react';

import { History } from 'history'; import { ConnectedRouter } from 'connected-react-router';

import './custom.css'; import routes from './routes';

interface AppProps { history: History; }

export default ({ history }: AppProps) => { return <ConnectedRouter history={history}>{routes}</ConnectedRouter>; };`

routes/index.tsx

`import * as React from 'react';

import { Routes, Route } from 'react-router-dom';

const Layout = React.lazy(() => import('../components/Layout'));

const Home = React.lazy(() => import('../components/Home')); const Sale = React.lazy(() => import('../components/Pages/Sale')); const Bottoms = React.lazy(() => import('../components/Pages/Bottoms')); const Collection = React.lazy(() => import('../components/Pages/Collections')); const Dupattas = React.lazy(() => import('../components/Pages/Dupatas')); const Pret = React.lazy(() => import('../components/Pages/Pret')); const Unstitched = React.lazy(() => import('../components/Pages/Unstitched'));

export default () => ( <Layout> <React.Suspense fallback={

loading...

}> <Routes> <Route path='/' element={<Home />} /> <Route path='/sale' element={<Sale />} /> <Route path='/collections' element={<Collection />} /> <Route path='/unstitched' element={<Unstitched />} /> <Route path='/pret' element={<Pret />} /> <Route path='/dupattas' element={<Dupattas />} /> <Route path='/bottoms' element={<Bottoms />} /> </Routes> </React.Suspense> </Layout> );`

[Kalsyc]

Facing same problem

[athomann]

I believe this is because of React 18 changing typing for children

[tanzeelrana]

same issue, anyone found out whats going on ?

[foscjos2]

@tanzeelrana as mentioned above, react 18 changed the typing for children. AFAIK the children prop used to be included by default, now its not. You need to either add it manually to your props interface (something like "children?: React.ReactNode | undefined;") OR wrap your props in React.PropsWithChildren (React.PropsWithChildren<YourProps>).

What that likely means in the scope of this library, is that until the maintainer updates the props for his interfaces to include the children prop, this library is incompatible with react 18.

[kg-currenxie]

For now, you can use patch-package to do the change locally:

Example diff: (v6.7.0)

diff --git a/node_modules/connected-react-router/index.d.ts b/node_modules/connected-react-router/index.d.ts
index c56beb1..5d59f58 100644
--- a/node_modules/connected-react-router/index.d.ts
+++ b/node_modules/connected-react-router/index.d.ts
@@ -91,7 +91,7 @@ declare module 'connected-react-router' {
   }
 
   export class ConnectedRouter<S = LocationState> extends React.Component<
-    ConnectedRouterProps<S>,
+    React.PropsWithChildren<ConnectedRouterProps<S>>,
     {}
   > {}
 

The TSC error went away for me :)