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

Babel-register working in the package but not when require-ing the package

I've set up babel-register in my package (installed "babel-preset-env": "1.7.0", "babel-register": "6.26.0")
index.js
require('babel-register');
// Contains a bunch of `import * ` stuff.
const lib = require('./lib.js');
.babelrc
{
"presets": [
"env"
]
}
This works just fine locally, but when i publish my package and try to use it I still get the:
SyntaxError: Unexpected token import
at new Script (vm.js:51:7)
at createScript (vm.js:136:10)
at Object.runInThisContext (vm.js:197:10)
at Module._compile (internal/modules/cjs/loader.js:618:28)

babel-register is a global singleton module, which means only one instance of it can be in use at one time. Given that, the expectation is that only the top-level application being developed would be using it. To align with those goals, babel-register automatically ignores all files inside node_modules, since the assumption is that node_modules will already be compiled to work on the user's node version before it was published.
The reason your logic fails when installed is because of the automatic exclusion of node_modules, since your module is installed into node_modules.
Even if that were not the case though, your usage here also runs into issues because of the global singleton behavior I mentioned above. If you load babel-register here, it will automatically try to compile the code of the user using your library to, which they have not asked for, are not expecting, and may fail.
You should compile your library code before publishing it.

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.

Webpack: Make dependency using another dependency instead of its own subdependency

I am using webpack to build my app and I use a library (eventemitter4) that itself depends on another library (underscore).
However, I am already using in my application an alternative to underscore (lodash and more exactly the es6 version).
I would like eventemitter4 to use this later library and avoid including in my build the two.
I install my dependencies using npm install. As a result, underscore is bundled as a subdirectory inside the eventemitter4's directory.
It tried to set aliases but I could not make it work:
alias: {
"underscore": "lodash-es",
"lodash": "lodash-es",
"~/underscore": "lodash-es"
}
raises
ERROR in ./~/eventemitter4/index.js
Module not found: Error: Cannot resolve module 'lodash-es' in /Users/me/myapp/node_modules/eventemitter4
# ./~/eventemitter4/index.js 6:2-23
If I do not add "~/underscore": "lodash-es", the sub-underscore is included instead of lodash.
Any idea?
Thank you very much for your help.

I actually found the reason. The alias was working. The cause of the error was that lodash-es does not provide a main attribute in his package.json (it only provides an esnext:main which is not recognised by webpack).
I solve the issue by using:
alias: {
"underscore": "lodash-es",
"lodash": "lodash-es/lodash",
"~/underscore": "lodash-es"
}