Getting a typescript error when defining any type of simple react functional component with any number of props, including using FC, ComponentWithChildren etc...
Here's a minimal reproduction
type Props = {
className?: string;
};
const Horizontal: Props = ({ className = undefined }) => (
<div />
);
Gives me the error
Type '({ className }: { className?: undefined; }) => Element' has no properties in common with type 'Props'.ts(2559)
I don't understand this is how i always defined components. Is there something new in typescript that i don't know about?
{
"name": "call-mvp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"#types/classnames": "^2.3.1",
"#types/jest": "^27.5.1",
"#types/node": "^16.11.36",
"#types/react": "^18.0.9",
"#types/react-dom": "^18.0.4",
"#types/react-measure": "^2.0.8",
"#types/react-router-dom": "^5.3.3",
"#types/styled-components": "^5.1.25",
"classnames": "^2.3.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-measure": "^2.5.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",
"typescript": "^4.6.4",
"web-vitals": "^2.1.4"
},
"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"
]
}
}
you can change it to:
const Horizontal: FC = ({ className = undefined } : Props)
This should work :
const Horizontal = ({ className = undefined } : Props) => ....
Related
I am using Leaflet to display a map and I want to create a marker wherever the user clicks. The marker should have a popup open by default and this is where I am having trouble.
/src/components/mapcontainer/popup.component.tsx:
import { Map, Popup as LeafletPopup } from "leaflet";
import { useRef } from "react";
import { Popup } from "react-leaflet";
import "./popup.style.scss";
type Props = {
map: Map;
};
const Popmenu = ({ map }: Props) => {
const popupRef = useRef<LeafletPopup>(null);
popupRef.current && map.openPopup(popupRef.current);
return (
<Popup ref={popupRef.current}>
<div className="popup">
<button> Set as start</button>
<button> Set as destination</button>
</div>
</Popup>
);
};
export default Popmenu;
Typescript will throw and error at this line <Popup ref={popupRef.current}> saying:
TS2322: Type 'Popup | null' is not assignable to type 'Ref<Popup> | undefined'.
Type 'Popup' is not assignable to type 'Ref<Popup> | undefined'.
13 |
14 | return (
> 15 | <Popup ref={popupRef.current}>
| ^^^
Question: How can I create a ref to a Popup?
Live demo: https://codesandbox.io/p/github/Hasan-aga/bike-router/draft/agitated-bessie?file=%2Fsrc%2Fcomponents%2Fmapcontainer%2Fpopup.component.tsx
Here is my package.json (TLDR I have installed #types/leaflet#1.9.0):
{
"name": "bike-router",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^29.2.0",
"#types/node": "^18.11.3",
"#types/react": "^18.0.21",
"#types/react-dom": "^18.0.6",
"leaflet": "^1.9.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.1.0",
"react-scripts": "5.0.1",
"sass": "^1.55.0",
"typescript": "^4.8.4",
"web-vitals": "^2.1.4"
},
"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": {
"#types/leaflet": "^1.9.0"
}
}
Hey I am using #devexpress/dx-react-scheduler, but i got stuck in an issue.
This is my Demo component
import * as React from 'react';
import Paper from '#mui/material/Paper';
import { ViewState } from '#devexpress/dx-react-scheduler';
import {
Scheduler,
DayView,
Appointments,
} from '#devexpress/dx-react-scheduler-material-ui';
const currentDate = '2018-11-01';
const schedulerData = [
{ startDate: '2018-11-01T09:45', endDate: '2018-11-01T11:00', title: 'Meeting' },
{ startDate: '2018-11-01T12:00', endDate: '2018-11-01T13:30', title: 'Go to a gym' },
];
export default () => (
<Paper>
<Scheduler
data={schedulerData}
>
<ViewState
currentDate={currentDate}
/>
<DayView
startDayHour={9}
endDayHour={14}
/>
<Appointments />
</Scheduler>
</Paper>
);
This is my package.json file
{
"name": "schedular",
"version": "0.1.0",
"private": true,
"dependencies": {
"styled-components": "4.0.3",
"#types/styled-components": "4.0.3",
"babel-plugin-styled-components": "^1.10.0",
"#babel/core": "7.18.10",
"#devexpress/dx-core": "3.0.4",
"#devexpress/dx-react-core": "3.0.4",
"#devexpress/dx-react-scheduler": "3.0.4",
"#devexpress/dx-react-scheduler-material-ui": "3.0.4",
"#devexpress/dx-scheduler-core": "3.0.4",
"#emotion/react": "11.10.0",
"#emotion/styled": "11.10.0",
"#mui/icons-material": "5.8.4",
"#mui/lab": "5.0.0-alpha.94",
"#mui/material": "5.10.0",
"#mui/system": "5.10.0",
"#mui/x-date-pickers": "5.0.0-beta.4",
"date-fns": "2.29.1",
"dayjs": "1.11.4",
"luxon": "3.0.1",
"moment": "2.29.4",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.47",
"#types/react": "^18.0.17",
"#types/react-dom": "^18.0.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
"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"
]
}
}
And The error is
**
Compiled with problems:X
ERROR in src/Schedular.tsx:19:6
TS2322: Type '{ children: Element[]; data: { startDate: string; endDate: string; title: string; }[]; }' is not assignable to type 'IntrinsicAttributes & SchedulerProps'.
Property 'children' does not exist on type 'IntrinsicAttributes & SchedulerProps'.
17 | export default () => (
18 |
19 | <Scheduler
| ^^^^^^^^^
20 | data={schedulerData}
21 | >
22 | <ViewState
**
Thanks
I am very new to unit testing and everytime I fix one thing it throws a new error, before this it said React is not defined. Before this it said document is not defined. As you can imagine i've had to go in change a lot of different things. Can somebody tell me what is going on ?
The new error is as the title suggests-
export type UsersList = {
| ^
6 | first: string;
AND...
ReferenceError: regeneratorRuntime is not defined
23 | setLoading(true);
24 |
> 25 | const fetchList = async (): Promise<UsersList> => {
| ^
26 | const result: any = await fetch("https://randomuser.me/api/?results=20")
27 | .then((res) => res.json())
28 | .then((data) => {
package.json
{
"name": "template-junior-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#fortawesome/fontawesome-svg-core": "^1.3.0",
"#fortawesome/free-regular-svg-icons": "^6.0.0",
"#fortawesome/free-solid-svg-icons": "^6.0.0",
"#fortawesome/react-fontawesome": "^0.1.17",
"#material-ui/core": "^5.0.0-beta.5",
"#mui/icons-material": "^5.4.2",
"#mui/material": "^5.4.2",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"#types/node": "^16.11.20",
"#types/react": "^17.0.38",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"react-string-replace": "^0.4.4",
"regenerator-runtime": "^0.13.9",
"typescript": "^4.5.4",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest --watch",
"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": {
"#babel/preset-typescript": "^7.16.7",
"#types/jest": "^27.4.0",
"jest": "jest",
"jest-environment-jsdom": "^27.5.1",
"ts-jest": "^27.1.3"
}
}
jest.config.ts
import {defaults} from 'jest-config'
module.exports = {
roots: ["<rootDir>/src"],
testEnvironment: 'jsdom',
moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
setupFilesAfterEnv: [ require.resolve('regenerator-runtime/runtime') ]
};
babel.config.json
{
"presets": [
["#babel/preset-react", {
"runtime": "automatic"
}]
]
}
setupTests.ts
import '#testing-library/jest-dom';
import 'regenerator-runtime/runtime'
I have simple functional component like below.
import React, { useState } from 'react';
import { connect } from 'react-redux';
import JoinRoomInputs from '../../../components/JoinRoomPage/JoinRoomInputs/JoinRoomInputs';
import { State } from '../../../store/states/states';
interface Props {
isRoomHost: boolean;
}
const JoinRoomContent = ({ isRoomHost }:Props) => {
const [roomIdValue, setRoomIdValue] = useState('');
const [nameValue, setNameValue] = useState('');
return (
<>
<JoinRoomInputs roomIdValue={roomIdValue} setRoomIdValue={setRoomIdValue} nameValue={nameValue} setNameValue={setNameValue} isRoomHost={isRoomHost} />
</>
);
};
const mapStateToProps = (state:State) => {
return {
...state
}
}
export default connect(mapStateToProps)(JoinRoomContent);
as you can see I have used useState hook in two lines.
But I'm getting yellow warning saying this.
src\components\JoinRoomPage\JoinRoomContent\JoinRoomContent.tsx
Line 1:17: 'useState' is defined but never used #typescript-eslint/no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
And what is more curious is line 17 is this );
This doesn't make any sense to me.
What am I doing wrong here ?
below is my package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.6.2",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.20.36",
"#types/react": "^16.14.20",
"#types/react-dom": "^16.9.14",
"#types/react-redux": "^7.1.20",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.6"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"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-plugin-css-modules": "^3.4.0"
}
}
Restart your server or kill the port with the following command:
sudo kill $(sudo lsof -t -i:PORT)
I seem to have run into an issue when using dispatch() with React-Redux. For example, the following action:
export const fetchMetrics = () => {
dispatch(fetchMetricsBegin);
APIService.get('/dashboard/info/')
.then((response) => {
dispatch(fetchMetricsSuccess(response));
return response;
})
.catch(error => dispatch(fetchMetricsFailure(error)));
};
Produces the following error:
TypeError: Cannot read property 'closed' of undefineddispatch
src/internal/observable/pairs.ts:82
Here's my package.json:
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#popperjs/core": "^2.6.0",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.6.0",
"axios": "^0.21.0",
"dotenv": "^8.2.0",
"jwt-decode": "^3.1.2",
"react": "^17.0.1",
"react-datepicker": "^3.3.0",
"react-dom": "^17.0.1",
"react-images-upload": "^1.2.8",
"react-number-format": "^4.4.1",
"react-popper": "^2.2.4",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"rxjs": "^6.6.3",
"web-vitals": "^0.2.4"
},
"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"
]
}
}
I have tried purging node_module and package-lock.json, but the issue is still occurring. Would welcome any insight. Removing the dispatch calls removes the error.
you are using redux-thunk. this library will allow you to perform async calls since your function return another function with dispatch as param. otherwise thunk will execute the code sync.
export const fetchMetrics = () => (dispatch) => {
dispatch(fetchMetricsBegin);
APIService.get('/dashboard/info/')
.then((response) => {
dispatch(fetchMetricsSuccess(response));
return response;
})
.catch(error => dispatch(fetchMetricsFailure(error)));
};