Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Umar-Farooq-Shafi opened this issue May 23, 2022 · 5 comments

Comments

@Umar-Farooq-Shafi
Copy link

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>



</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 {routes};
};`

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 () => (

<React.Suspense fallback={

loading...
}>

<Route path='/' element={} />
<Route path='/sale' element={} />
<Route path='/collections' element={} />
<Route path='/unstitched' element={} />
<Route path='/pret' element={} />
<Route path='/dupattas' element={} />
<Route path='/bottoms' element={} />

</React.Suspense>

);`

@Umar-Farooq-Shafi Umar-Farooq-Shafi changed the title Type '{ children: () => Element; history: History<unknown>; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ConnectedRouter<unknown>> & Readonly<ConnectedRouterProps<unknown>>'. Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ConnectedRouter<unknown>> & Readonly<ConnectedRouterProps<unknown>>'. Type '{ children: () => Element; history: History<unknown>; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ConnectedRouter<unknown>> & Readonly<ConnectedRouterProps<unknown>>'. May 23, 2022
@Kalsyc
Copy link

Kalsyc commented Jun 6, 2022

Facing same problem

@athomann
Copy link

athomann commented Jun 6, 2022

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

@tanzeelrana
Copy link

same issue, anyone found out whats going on ?

@foscjos2
Copy link

foscjos2 commented Aug 1, 2022

@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).

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
Copy link

kg-currenxie commented Aug 10, 2022

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants