Develop Reference

Circle CI failed to compile. "cannot be used as a JSX element" [duplicate]

I have a React Typescript application that won't compile. Many components have a render method that is typed to return React.ReactNode or React.ReactElement. On compile, many errors similar to the following are reported:
TS2786: 'MessagesWidget' cannot be used as a JSX component.
Its instance type 'MessagesWidget' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/home/node/app/node_modules/#types/react-calendar/node_modules/#types/react/index").ReactNode'.
Why is the compiler expecting ReactNode as defined by the types bundled with react-calendar? I do have #types/react-dom installed as a dev dependency.
Other information that might be relevant:
This project was compiling until a couple of days ago and there were no code changes when the compile started failing, so I suspect that a package update triggered this (even if that's not the root cause). The only dependencies that were updated in the time window when the compile started failing were #types/react and #types/react-dom. Rolling these packages back to an older version did not fix the issue, however.
Changing my components render methods to return JSX.Element removes the compiler error, but there are third party components in the application where this is not possible.

I have a solution, it seems that there are a ton of breaking changes in the 18.0.1 type definitions.
Like you, I could not solve it by rolling back to earlier versions, but investigation lead me to discover that this was because 'react-router' among others was bringing in the '18.0.1' version.
to get around this, I added the following to my package.json
"resolutions": {
"#types/react": "17.0.14",
"#types/react-dom": "17.0.14"
},
Then I cleared my node-modules, and my package cache and then re-ran yarn to pull fresh packages.
The resolutions section is for yarn (which I use). and I think you can use 'overrides' instead of 'resolutions' if you are using NPM.
npm version should >= 8
https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides
and delete package-lock.json before npm i.

Error TS2786 often comes from a mismatch in #types/react.
When you have libraries that are dependent on a specific version of #types/react (i.e. v17.0.47) and you have other libraries working with a different major version of #types/react (i.e. v18.0.14), then this can cause compatibility issues when using React.ReactNode or JSX.Element. The type JSX.Element is usually returned by a React Function Component.
You can solve the problem by streamlining your dependencies on #types/react, so that these follow the same major version. You can find all libraries depending on #types/react in your project by executing npm explain #types/react (when a package-lock.json file is present) or yarn why #types/react (when a yarn.lock file is present).
In your specific case there seems to be a dependency from #types/react-calendar to #types/react. Your problem seems to be that there are other dependencies in your project using a different version of #types/react. Maybe you even have a direct dependency on #types/react where the exact version number is different from the #types/react version required by #types/react-calendar.
Here is a video that shows how to inspect the applied version of #types/react in your own project.

This can occur when returning children:
export const Component = ({ children }) => {
//...do stuff
return children
}
To fix, wrap in a fragment:
return <>{children}</>
I believe this is because children may be an array of elements and we are only allowed to return a single element. The usual message for this kind of error is:
JSX expressions must have one parent element.

This issue comes with mismatch in #types/react versions TS2786
Fix it with npm dedupe or yarn dedupe

If there's a yarn user wandering around; who had this issue after doing a react/react-native version upgrade recently; just delete the existing yarn.lock file & the node_modules folder and run yarn install again is what worked for me. :)

After update React native from 0.66.3 to 0.70.6 I faced same issue. I solved the problem by changing the "resolutions" in the package.json
"resolutions": {
// "#types/react": "^17" remove this
"#types/react": "^18.0.8" //adding this
},
// After Change remove node_modules
// run npm i OR yarn

None of the answers above solved my case for the same typescript error TS2786
how I get it work is update tsconfig.json
from
{
"compilerOptions": {
"preserveSymlinks": true,
...
to
{
"compilerOptions": {
"preserveSymlinks": false,
...
or just simply remove it

The problem is because react-route v18 does not support react-virtualized and it should be downgraded.
So the simple way is to downgrade your route as below:
"#types/react": "17.0.0",
"#types/react-dom": "17.0.0"
Then, your app should work properly.

Just add the latest version of react and react-dom in package.json and run below command to re-install react and react-dom
Here , while posting this answer, latest version of react and react-dom is 18.
Steps-
Remove package-lock.json file of your proect
Open package.json of your project.
replace react and react-dom version
"#types/react": "^18",
"#types/react-dom": "^18"
4.Run command
npm install --save-dev #types/react #types/react-dom
Done. It resolved my issue.

I was facing the same issue about this error. I add the below code to my package.json file and got resolved.
"resolutions": {
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2",
"graphql": "^16.5.0"
},

I resolved this issue by changing ``jsx: 'react' in tsconfig.json into jsx:react-jsx

my one got solved after I fixed the RETURN statement of my child component
I had in there:
return; <form></form>
changed to:
return (<form></form>)

working 'types' definition files, anyone?

We're using Tabulator-tables in a large Angular project and I cannot seem to find a usable definition files.
I've tried https://www.npmjs.com/package/#types/tabulator-tables which seems updated etc but it results in lots of errors in my IDE and the project will not compile as a result. There are many errors even though the compilation worked before I added the types package. Its pointless and impractical to add many #ts-ignore comments.
Be advised - I took notice to use the same version of the type definition package as installed in my project (v4.2.2). I assume the problem is with the automatic generation of the above package - the resulting .d.ts file is not usable as a result.
Please correct me if I'm wrong and any help in integrating definition files will be appreciated. TIA!

I had a similar issue with adding TypeScript typings on Angular project and here's what i did:
encapsulated Tabulator inside Angular component (data-grid.component.ts in my case);
npm install #types/tabulator-tables
created file data-grid.component.d.ts with:
declare module 'tabulator-tables' {
export = Tabulator;
}
the key thing: removed import Tabulator from 'tabulator-tables' from file data-grid.component.ts
And it's worked.

A full set of TypeScript Typings can be found in the #types/tabulator-tables npm package
npm install #types/tabulator-tables
An example of how to use the typings in a project can be found here
The Language Documentation includes more information on the available typings

I already wrote an answer for this issue, not good enough in my opinion, but some people upvoted it as right, so I decided to leave it as it is and write a new one.
There is some issues with adding types for tabulator, this is because type annotations not being exported, but there is a way to use them.
After installation of types for tabulator (npm install --save #types/tabulator-tables), you should open (or create it, if it's not exists) file index.d.ts inside directory src, and copy following code into it:
declare module 'tabulator-tables' {
export = Tabulator;
}
You need to ensure that you have "allowSyntheticDefaultImports": true inside compilerOptions of file tsconfig.json or tsconfig.app.json (depends on your project), and tsconfig.spec.ts (it needs for unit testing).
Very important to unload and start over ng serve after editing of tsconfig.
After that all typings should work. Just in case I created simple Angular example, hope this helps.

Prevent "test/expect/etc is not defined" errors when using Jest

Facebook's Jest testing framework is easy to get started with, but the documentation overlooks an annoying aspect: test statements will be highlighted as errors by any editor that tries to warn of undefined symbols, because test, expect, and all matcher methods are not defined.
Similary, attempting to run a test file with node directly will fail with ReferenceError: test is not defined.
What require/import statement(s) need to be added for those errors to go away?

Node
If you want to run them directly through node, try to require jest and/or jest-runtime. Also give #types/jest a try as well.
Check Edit 2 for new info about this
Edit
#types/jest (jest-DefinitelyTyped) is definitely needed (or just one solution). If you install it (e.g., dev dependency), the IDE errors should go away.
I just tried it on Webstorm, and it works.
Edit 2
The new Jest#20 Matchers (e.g., .resolves and .rejects) are still not defined in #types/jest. You can keep track of its status on the links below:
https://github.com/DefinitelyTyped/DefinitelyTyped/pull/16645
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/16803
It should be available soon, though!
Also, it doesn't seem possible to run it directly through node. Last night I tried a bunch of different things, but using jest is the way to go - it really uses node under the hood, so I thought it would be possible as well. #thymikee over your opened issue at GitHub made clear that it's not.
Edit 3
The new release (20.0.1) includes the newest Jest definitions.
Lint
this isn't in the scope of this specific problem, but it also helps
Are you using something like ESLint? If so, you'll need eslint-plugin-jest
Following the steps described in this page: https://www.npmjs.com/package/eslint-plugin-jest, you will basically need to add it as an ESLint plugin and set jest globals in the ESLint configuration:
{
"env": {
"jest/globals": true
}
}
If you plan on supporting ES6 tests, you'll also need Babel and babel-jest plugin with the following jest configuration:
"transform": {
"^.+\\.js$": "babel-jest"
}
Finally, for Typescript tests you'd need the #types/jest and ts-jest packages as well

Adding following .eslintrc configuration is enough
{"env":
{
"jest": true
}
}

I'm using VSCode and ESLint, you need to install eslint-plugin-jest
Add jest info to your .eslintrc.js
{
"plugins": ["jest"]
},
"env": {
"jest/globals": true
}

How to create aurelia typescript project with vs2017rc

I am new to aurelia, and I need create a prototype project of the framework. At the beginning, I planed to use skeleton-typescript-aspnetcore skeleton, but when I tried the vs2017rc, I found it uses .csproj as the default format(while vs2015 is project.json/.xproj), I think we should follow the vs2017 because we will upgrade our IDE after it's been launched.
The vs2017 have a wizard to upgrade .xproj project, but after the upgrading(skeleton-typescript-aspnetcore), there still lots of error ahead me...
I also tried aurelia-cli, but seems it has not support vs2017 yet, does anyone could give a guide to create the prototype project? I will integrate some plugins like the skeleton mentioned above, such as gulp,karma,breeze...
thank you in advance.

Since Visual Studio 2017 just launched I thought I'd answer how I solved this, as there are still many errors when using "skeleton-typescript-aspnetcore".
Using https://github.com/aurelia/skeleton-navigation/releases/tag/1.1.2 as a starting point, these are the steps to get it running:
When you first run the project you will get errors complaining that some files located in /test/ is not under 'rootDir'. In your tsconfig.json the rootDir is defined as "src/", this can be solved simply by moving your test folder inside your src folder. This will cause new errors because the paths defined in those files has now changed. You will need to edit app, child-router and users imports like this:
import {Users} from '../../users'; IntelliSense should help you out here.
The command gulp test will also not run before changing to the new path, you can change the path in karma.conf.js:
files: [
'src/test/unit/setup.ts',
'src/test/unit/*.ts'
],
Next the file users.ts will throw errors like Type 'Response' is not assignable to type 'any[]'. You will need to tell TypeScript what you're declaring like this: public users : Object = []; or simply: public users = {};
The final problem is that you're going to have a lot of duplicate identifier errors, at the time of writing this the cause of this seems to be from the changes brought on by TypeScript version 2.2.1. I don't know what specifically breaks, but I know that previous version 2.1.5 still works. So what you need to do is to run npm install typescript#2.1.5 --save in your src/skeleton directory, the --save is just to update your package.json file, you can do this on your own later as well if you wish.
After you've done that your gulp errors (20~ of them) should be resolved. But there are still some errors remaining caused by duplicate signatures. Again, things have changed in TypeScript 2.0+, there is now a simplified way of getting and using declaration files. Here is an answer on SO on how to use the #types feature: How should I use #types with TypeScript 2 , but to keep this short and sweet you will have to go to your tsconfig.json file and explicitly tell where to find the #types/node folder. It would look something like this:
"compilerOptions": {
...
"typeRoots": [
"node_modules/#types"
],
"types": [ "node" ]
...
},
Hope this helps, with these changes the project should now build and launch correctly.
EDIT:
I recently ran into some problems again with building my project. I got a lot of duplicate identifiers again... I however ran across this answer on SO: TypeScript throws multiple duplicate identifiers
Apparently TypeScript latest ships with fetch definitions out of the box, so I was able to run the command from the answer in the link:
npm uninstall #types/whatwg-fetch
And upgrading from typescript 2.1.5 to latest:
npm install typescript --save
You might even want to install typescript globally by appending -g.
Also this will continue to be an issue unless you comment out/delete url and whatwg-fetch from typings.json globalDependencies in order to prevent it from recreating itself:
"globalDependencies": {
//"url": "github:aurelia/fetch-client/doc/url.d.ts#bbe0777ef710d889a05759a65fa2c9c3865fc618",
//"whatwg-fetch": "registry:dt/whatwg-fetch#0.0.0+20160524142046"
}
Then you can either delete the typings folder, running typings install again or edit index.d.ts in the typings folder and delete the reference paths to whatwg-fetch and url.
Hope this helps someone who might've encountered the same problems even after "fixing" it.

Using chrome extension apis in typescript

I'm building a chrome extension written in TypeScript. I'm using WebStorm and I added the chrome-DefiniteltyTyped library in my project.
However, when I write this in my typescript code : chrome.extension.getURL
I got an error : cannot find name 'chrome'.
Because of this, my javascript file is not generated and I cannot use it in my extension.
Do you guys have any solution?

As of typescript 2 (or 2.x, not sure), you should import the chrome types from #types.
in package.json:
"devDependencies": {
...
"#types/chrome": "0.0.35", // or just npm install --save-dev #types/chrome
And in tsconfig:
"types": [
//(various types, e.g. jquery, core-js),
"chrome"
]

That should work fine : https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/chrome/index.d.ts
TIP: make sure you have a reference tag added:
/// <reference path="pathTo/chrome.d.ts"/>

Types Across Chrome and Firefox
Since the extension API is basically the same across Chrome and Firefox now, you can use #types/chrome for both situations.
1. install
yarn add #types/chrome --dev
2. update tsconfig
{
"compilerOptions": {
....
"types": ["chrome"]
}
}
3. Get browser api function
export function getBrowserInstance(): typeof chrome {
// Get extension api Chrome or Firefox
const browserInstance = window.chrome || (window as any)['browser'];
return browserInstance;
}

You just need to install Type definition to make it work, let's install it:
yarn add #types/chrome --dev
or NPM
npm install #types/chrome --save-dev
now use free of error!

I just ran into the below error when trying to develop a Chrome extension using TypeScript in VS Code and all I had to do was simply run:
npm install --save-dev #types/chrome
This will enter "#types/chrome": "0.0.120" under "devDependencies" in your package.json file.
Fixed error:
[tsl] ERROR in C:\Users\my_user\Documents\my_chrome_extension\src\content.ts(28,3)
TS2304: Cannot find name 'chrome'.

What did work:
Have typescript ignore the offending code by adding a comment like this above it.
// #ts-ignore: saying 'chrome' is not found
What didn't work:
I had #types/chrome installed when I ran into this issue.
In the tsconfig.json, adding "chrome" under types and specifying the
typesroot.
Adding a reference path comment and all sorts of ways to
import "chrome".
try these before you add the #ts-ignore comment.
Background:
I am working on a chrome extension using Angular 11. I need to access chrome.runtime.sendMessage to send information to a background worker.

Make sure you have #types/chrome installed. I don't think you need to update the types and the typeroots of tsconfig. Then use the type definitions from chrome by accessing the chrome type which will be globally available, for example:
type getUrl = typeof chrome.runtime.getURL;
A bit more context in this GitHub issue