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

Loading a local ParcelJS plugin

I want to create a plugin so that I can raw-load a certain type of file with parcel. Parcel docs states that:
Publish this package on npm using parcel-plugin- or #your-scope/parcel-plugin- prefixes, and it will be automatically detected and loaded as described below.
...
Any dependencies listed in package.json with these prefixes will automatically be loaded during initialization.
Since this is a one-time thing, I don't want to publish the code on npm as a plugin. How do I load my project-local plugin with parcel?
Thanks in advance.

Since I could not find a way to do this in a parcel way, I did this in an npm way:
I created a folder named local_modules (this can be anything you want.) Then created parcel-plugin-x inside local_modules. Inside that, I created my plugin as usual. I also created a package.json specifying the entry point main. You can specify the dependencies required for the module just like if this is a separate project (THIS IS!).
{
"name": "parcel-plugin-x",
"version": "0.1.0",
"description": "Parcel plugin x",
"main": "index.js",
"devDependencies": {
},
"dependencies": {
}
}
Directory structure:
project-folder---local_modules---parcel-plugin-x
|---package.json |
|---index.js
|---package.json
Then I ran npm i --save-dev .local_modules/parcel-plugin-x inside the project-folder. It adds the line "parcel-plugin-x": "./local_modules/parcel-plugin-x", to the root package.json. This is the standard way of loading local modules in npm. And everytime you make changes to the plugin, you have to run npm upgrade. You should also increase the version of your plugin, too. This copies the plugin to node_modules and install dependancies.
According to the parceljs docs:
Any dependencies listed in package.json with these prefixes will
automatically be loaded during initialization.
now it works! :)

I did something similar, but with npm link.
In plugin folder (parcel-plugin-x) just run: npm link.
In the project folder using the plugin:
Link to parcel-plugin-x: npm link parcel-plugin-x
In package.json file, manually add the dependency to parcel-plugin-x
package.json
"devDependencies": {
"parcel-plugin-x": "^0"
}
Each time you make changes to the plugin, you don't have to run npm upgrade, but you might have to remove .cache folder created by parcel, because parcel will skip processing cached assets.

I think you can do this with the workspaces option in package.json: https://docs.npmjs.com/cli/v7/using-npm/workspaces
This library seems to be implementing it: https://github.com/astegmaier/stackoverflow-parcel-namer

Using local modules with Webpack 4 is bundling the same dependency multiple times

I am attempting to find a good way to use local modules in npm, or a way of structuring a large application so it can be bundled off into modules which may or may not be in a separate repository.
Each local module has it's own package.json and dependencies which are installed.
My requirements are that the modules are written in ES6 and only compiled as part of the main project being built (so I don't have lots of dependencies being indiependently built constantly).
Project structure
/root
/main-module
... main js files <- entry point
webpack.config.js
package.json
/module-1
... module 1 js files
package.json
/module-2
... module 2 js files
package.json
/module-3
... module 3 js files
package.json
I'm currently investigating using local modules via specifying a local file in my package.json like so:
...
"dependencies": {
"lodash": "^4.17.10",
"module-1": "../module-1",
"module-2": "../module-2",
"module-3": "../module-3",
"normalize.css": "^8.0.0"
}
...
You can see the whole project here: https://github.com/SamStonehouse/webpack-local-modules-test
I'm using webpack with the babel-loader which doesn't need any extra setup in order to use this form and even watches the module file for changes and rebuilds when they're complete which is amazing.
Issue: once this has built lodash is included in the built bundle 4 times over, one for each module which requires it, even though they all require the same version and all the sources are compiled at the same time.
I've tried using the splitChunkPlugin but to no avail
I've tried setting lodash as a devDependency in the local modules (this was something I didn't want to do but it didn't work anyway)
Does anyone have a solution for this?
Or an alternative way of bundling local modules in a similar fashion

Change each of the modules to have lodash as a peer dependency instead of a direct dependency. So in the package.json file, change this:
"dependencies": {
"lodash": "^4.17.5"
}
To:
"peerDependencies": {
"lodash": "^4.17.5"
}

Unable to resolve parse-react in React Native project

I'm trying to include parse-react into my React Native project, but when running the app I'm getting the error in XCode and simulator:
Unable to resolve module ./lib/react-native/ParseReact.js from /Users/Corey/Work/example_app/node_modules/parse-react/react-native.js: Unable to find this module in its module map or any of the node_modules directories under /Users/Corey/Work/example_app/node_modules/parse-react/lib/react-native/ParseReact.js and its parent directories
I've included the two packages as such:
import Parse from 'parse/react-native';
import ParseReact from 'parse-react/react-native';
Looking in the node_modules/parse-react folder, the lib directory doesn't contain a react-native directory, but it does have the browser directory. I'm not sure if this is the problem or not, or how I'd go about getting that if it is.
I'm using react 0.14.7, react-native 0.21.0, parse 1.6.14, and parse-react 0.5.1.

I've had the same problem. I'm leaving my package.json here. Install accordingly, and you should be able to include parse modules into your project.
{
"name": "commonDemo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"parse": "^1.8.1",
"parse-react": "^0.5.0",
"react-native": "^0.20.0"
}
}
Let me know if this works. Ideally, you should be able to include parse modules into your project using latest react-native release. But if using parse is absolutely necessary for your project, use this package.json.
To call Parse.initialize() use this-
var Parse = require('parse/react-native');
To call cloud functions and other functionality, use this-
var ParseReact = require('parse/react-native').Parse;

Look at the parse-react github README page. It says it works with version 1.6.14 of parse. It also says that 1.7 and 1.8 breaks compatibility. I had the same problem and downgrading to 1.6.14 solved the issue.
npm install parse#1.6.14 --save

TinyMCE gulp configuration

I am building a web application and I want to use TinyMCE. I am using gulp and browserify. I have downloaded TinyMCE through npm and than I have required it in my app.js file and run the gulp command but I got this error Failed to load: root/js/themes/modern/theme.js. I think this is because TinyMCE needs additional files from its folder. My question is how to configurate TinyMCE to search those files in the node_modules/tinymce folder.

The answer here depends completely on how you are packaging up files in your Gulp build. I'm still working through the same problem right now, but here's a tip that might help.
In my case, I'm using the main-bower-files plugin to read my Bower config and then return a stream of all the main JS files from all of my dependencies I've installed with Bower. It looks like this:
var mainBowerFiles = require('main-bower-files');
gulp.task('vendor-src', function () {
return gulp.src(mainBowerFiles('**/*.js')
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest('dist/'))
});
Unfortunately, this does not pick up any of the TinyMCE files, which are installed in my bower_components directory, because the 'tinymce' installed through Bower does not come with a package.json file. I think this is because you have the choice between using the regular and jQuery versions of TinyMCE, which are both in the package.
I had to change my Gulp task from above to get it to pick up the TinyMCE source code that I want (the jQuery version). That version looks like this:
var mainBowerFiles = require('main-bower-files');
gulp.task('vendor-src', function () {
return gulp.src(
mainBowerFiles('**/*.js', {
"overrides": {
"tinymce": {
"main": ["tinymce.jquery.js", "plugins/**/*.js", "themes/**/*.js"]
}
})
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest('dist/'))
});
That will include all of the JS files associated with TinyMCE and add them to the "main bower files" list.
This is only a partial solution though because you also have to pick up the TinyMCE CSS and font files. And then if you're build is completely different or you're not using the main-bower-files plugin, this might not help either.

I had an open issue with the main-bower-files author who discouraged the use of it together with TinyMCE, probably due to the large number of extra files that must be included (?). See the following issue on Github.
I ended up just copying the tinymce folder to my dist/ through a simple gulp task. I use Bower and different paths probably, but you get the idea
gulp.task('bower-tinymce', function() {
//Copy resources from tinymce-dist that didn't make it in the bower-files
return gulp.src('src/main/resources/static/bower_components/tinymce-dist/**/*').pipe(gulp.dest('src/main/resources/static/dist/tinymce'));
});