Develop Reference

Force nested npm dependency to use same one

I am facing an error that caused by lower version of TypeScript, root cause is I update prettier version, related post: https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/60310
So dependency issue was:
React -> TypeScript#4.7.4
Other-library -> Webpack-dev-server -> TypeScript#3.8.2
Prettier -> TypeScriptv4+
Since Prettier require TS version 4+ and the Webpack-dev-server has a version of 3.8.2, that will cause the program to throw error.
I can not change the version of Other-library, but I still need the version of TypeScript to be v4+
I am looking at this post:How do I override nested NPM dependency versions?
This seems does exactly what I needed to do.
But after I use the overrides property in package.json, I do see React is pickup the TypeScript version 4.7.4,
howerver I get the following error:
Child process failed to process the request: Error: Debug Failure. Palse expression. at resolveNamesWithLocalCache, at typescipt/lib
Thanks
My package json looks like:
{
"devDependencies": {
"typescript": "^4.7.4"
},
"overrides": {
"webpack-dev-server": {
"typescript": "$typescript"
}
}
}
`

So I checked, typescript is only "devDependencies" to webpack-dev-server. It's NOT supposed to be installed at all. How did you even end up in this situation 😂
It must be something about the way you install those packages. I don't know what happened, just try remove node_modules folder entirely, and also package-lock.json, then npm install again. You don't need that "overrides" field.
Additionally, it sounds to me this whole mayhem starts because of #types/prettier. HOWEVER, unless you have a very specific use case (which I seriously doubt) that requires integrating with prettier's programmatic API, through hand written TS code, you don't even need #types/prettier in the first place. Just get rid of that troublemaker. All #types/* packages are optional.

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

jest.mock of ES6 class yields ReferenceError: require is not defined

I'm trying to create an automatic mock using jest in my ES6 javascript project.
I'm using node v15.0.1, and jest 26.6.0 on ubuntu 18.04.5.
I have a test file containing the following code:
import RenderBuffer from './renderbuffer.js'
jest.mock('./renderbuffer.js');
beforeEach(() => {
RenderBuffer.mockClear();
});
When I run the test I run into the following issue:
ReferenceError: require is not defined
4 |
5 | beforeEach(() => {
> 6 | RenderBuffer.mockClear();
| ^
7 | });
8 |
The error is surprising to me as I'm not using a require statement.
My package.json config contains the following:
"type": "module",
"main": "src/index.js",
"devDependencies": {
"jest": "^26.5.3",
"jest-canvas-mock": "^2.3.0"
},
"jest": {
"setupFiles": ["jest-canvas-mock"]
},
"scripts": {
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
"test-coverage": "node --experimental-vm-modules node_modules/jest/bin/jest.js --coverage"
}
Any ideas as to what the root cause of this issue is?

You have to disable any source code transformations in order to make it working by setting
{
transform: {}
}
in your Jest configuration file. By default transform option is configured to use babel-jest. Please refer to this Jest documentation section for more details. Also note that you should import jest explicitly:
import { jest } from '#jest/globals';
Unfortunatelly, it can still have some issues running your tests as other commenters already mentioned. Probably, one should follow this issue to keep tracking changes being made in Jest for ESM support.
For example, I was unlucky to mock static module imports at the moment (version 26.6.2):
jest.(do|un)mock
Since ESM has different "stages" when evaluating a module, jest.mock will not work for static imports. It can work for dynamic imports though, so I think we just have to be clear in the docs about what it supports and what it doesn't.
jest.mock calls are hoisted, but that doesn't help in ESM. We might consider transforming import 'thing' to import('thing') which should allow hoisting to work, but then it's async. Using top-level await is probably a necessity for such an approach. I also think it's invasive enough to warrant a separate option. Something to discuss - we don't need to support everything jest.mock can for for an initial release.

How is ESLint integrated into Create React App?

When I run npx create-react-app ..., a bare-bone React project is being created for me.
When I then peek into package.json, there seems to be some evidence of ESLint to be present, as there is this:
"eslintConfig": {
"extends": "react-app"
},
However, whenever I install ESLint as a dev dependency and configure it -- as I usually do --, VS Code seems to pick it up.
In this case, VS Code does not seem to recognize that there is any kind of linter present/configured.
This is not super surprising, as ESLint is not a dependency of the React project I just generated -- at least not according to package.json.
When I try to run eslint . within the project's root directory, it says "command not found".
I tried to breathe life into this ESLint configuration by expanding it, so now I have this:
"eslintConfig": {
"extends": ["react-app", "eslint:recommended", "google"],
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
},
This changes nothing.
I manipulated the source code in a way that I know it violates the above configuration, yet, I have not been signaled any wrongdoing.
This leads me to a simple question:
Do projects generated by create-react-app come with some kind of ESLint configuration, and, if so, how do I enable and extend it correctly?
As I am being referred to the number one Google hit that comes up when searching "create react app eslint" -- which I have obviously read --, let me clarify what I mean:
ESLint is obviously integrated into Create React App in a different way than it would be if it had been manually added to the project using like so.
This is not only evident by the sheer number of people who post about their struggles of getting the two to work together.
This is also evident as...
...one cannot run the eslint command in the project root.
...ESLint does not seem to be a dependency within package.json.
...VS Code doesn't pick up that there is ESLint present.
...there is no .eslintrc.* file in the project root.
...etc.
So: How do I go about ESLint in the context of Create React App? For starters: How do I run it? How do I expand it? And why does VS Code not pick it up -- even though it usually notices the presence of ESLint?

Yes, create-react-app comes with eslint config.
How do I enable and extend it correctly?
You can check how to extend it here.
{
"eslintConfig": {
"extends": ["react-app", "shared-config"],
"rules": {
"additional-rule": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}
}
How do I enable it?
You need to integrate it with your IDE.
How do I run it?
After integrating it, an eslint server will be running in the background and will enable linting for your IDE (sometimes restarting IDE required).
I checked all your claims after running npx create-react-app example:
...one cannot run the eslint command in the project root.
You can:
eslint is installed as part of the project dependency, just by running eslint globally (eslint [cmd]) you need to ensure it installed globally (not recommended).
...ESLint does not seem to be a dependency within package.json.
Why should it be? That's why you using a starter like CRA. It's an inner dependency, you don't need to worry about it, that's CRA's job.
...VS Code doesn't pick up that there is ESLint present.
It does, check the OUTPUT tab and look for ESLint to see the server's output.
...there is no .eslintrc.* file in the project root.
You get the default configuration from CRA (which is hidden from you for focusing on coding).
Add such file if you want to override it (you can also extend it, check the docs).
Its very useful to understand what eslint actually is and how we use it React development, check out related question "Do React hooks really have to start with “use”?".

To expand on the top comment's answer:
...ESLint does not seem to be a dependency within package.json.
Why should it be? That's why you using a starter like CRA. It's an inner dependency, you don't need to worry about it, that's CRA's job.
A project created with create-react-app will have react-scripts as a dependency.
react-scripts has eslint installed as a dependency, as seen in react-scripts package.json.
You can see if a package is installed (and where) by running npm ls <package> in your project root.
npm ls eslint shows:
└─┬ react-scripts#4.0.3
└── eslint#7.21.0
This shows the dependency tree that we manually investigated by looking in GitHub at react-scripts.
So - a project made with create-react-app does come with eslint. As it is a dependency, not something globally installed, then it must be ran with a npm script.
This is why running eslint . in your terminal does not work, but using
"lint": "eslint .",
then npm run lint does. (though you may with to make the command eslint --ignore-path .gitignore . due to a current bug).
Similarly, the eslint configs are installed in react-scripts, then referenced in the default project output's own package.json.

Every Create React App depends on ESLint via react-scripts
I believe I have answered most of your questions in the Sections
below.
Here is a summary.
Do projects generated by create-react-app come with some kind of
ESLint configuration?
– Yes, ESLint gets installed and configured.
(Section 1 below.)
How do I enable and extend it correctly?
– It is already enabled. You expand it exactly as you already suggested
in the question, except that you don't need to change anything under
the extends attribute.
(Sections 1 & 2 below.)
ESLint is obviously integrated into Create React App in a different
way than it would be if it had been manually added to the project
using
[npm install eslint --save-dev and npm init #eslint/config ?]
– No, it's not.
Installing ESLint once again
(npm install eslint --save-dev) does add
  "devDependencies": {
    "eslint": "^7.32.0"
  }
to package.json.
But that's all it does.
The practical implications are none, because "eslint": "^7.32.0" is
already installed as a dependency via react-scripts.
I advise against running npm init #eslint/config, which is
a command that creates a .eslintrc.* configuration file.
If you do run this command, consider moving all the contents of
.eslintrc.* to package.json under eslintConfig.
Then delete the problematic .eslintrc.* file.
It might save you a lot of pain.
1
(Sections 1 & 5 below.)
one cannot run the eslint command in the project root [?]
– Yes, you can!
It's npx eslint . --ext .js
(Section 4 below.)
ESLint does not seem to be a dependency within package.json [?]
– Yes, it is!
The dependency is indirect as react-scripts depends
on ESLint and on a lot of other packages.
(Section 1 below.)
VS Code doesn't pick up that there is ESLint present [?]
– Yes, it does! Run npx eslint . --ext .js.
If you get at least one warning or error, then you know you should see
it in VS Code as well.
(Section 3 below – check out the gotchas.)
there is no .eslintrc.* file in the project root.
– Be glad there isn't! And don't put one there either!
(Section 5 below.)
0. Prerequisites
In order to be able to answer your questions, I created an App :
2
npx create-react-app how-is-eslint-integrated-into-create-react-app
I then deleted all files in the src subdirectory, and inserted my own
versions of App.js, App.css, index.js, index.css, along with
a components subdirectory that contains a Button component.
In package.json I deleted a few irrelevant lines, such as
"version": "0.1.0",
and "private": true, and the production attribute
under browserslist.
The resulting package.json :
{
"name": "how-is-eslint-integrated-into-create-react-app",
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"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": {
"development": [
"last 1 chrome version"
]
}
}
When you wrote your question a little more than two years ago,
the eslintConfig attribute was
,
"eslintConfig": {
"extends": "react-app"
}
whereas nowadays, it's
,
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
I will assume that this change makes no difference for the issues and
questions you bring up
(unless someone proves me wrong).
Another difference over the past two years – apart from the obvious
changes in version numbering – is the added web-vitals attribute :
,
"web-vitals": "^2.1.4"
which is a package for measuring performance metrics in JavaScript.
3
Thus, web-vitals is irrelevant for your questions.
You can download the resulting
zip file containing all necessary project files.
Once downloaded – from the root of the project (directory Q59633005)
– run npm install.
Expect it to take anytime between 4 and 11 minutes to complete.
Next run npm start.
Expect your default web browser to open and
– after hitting F12 – display :
4
Now close the server from the terminal by hitting
Ctrl+C.
Take a look inside App.js. The contents are :
// App.js
import React, { useCallback, useState } from 'react';
import "./App.css";
import Button from "./components/UI/Button/Button"
function App(unUsedArgument) {
const [unUsedVariable, setShowParagraph] = useState(true);
const showParagraphFcn = useCallback(() => {
setShowParagraph((prevToggle) => !prevToggle);
},[]);
console.log("App RUNNING");
return (
<div className="app">
<h1>Hi there!</h1>
<Button onClick={showParagraphFcn}>A Button</Button>
</div>
);
}
export default App;
I now have project to help answer your questions.
1. ESLint in Visual Studio Code
VS Code does not seem to recognize that there is any kind of linter
present/configured.
This is not super surprising, as ESLint is not a dependency of the
React project I just generated -- at least not according to
package.json.
The npx create-react-app ... does indeed install ESLint.
ESLint is deeply buried in the dependency tree of the react-scripts
package.
The top node for ESLint in react-scripts is eslint-config-react-app.
5
Some basic configuration is also part of the deal.
So ESLint does work out of the box.
VS Code shows a warning for unUsedVariable on line 7 of App.js
(but for some reason not for unUsedArgument on line 6).
In VS Code, expect to see :
2. How to expand ESLint
How do I expand [ESLint in a Create React App]?
To expand ESLint, you need to add rules under eslintConfig in
package.json, exactly as you have already suggested in your
question.
To try your example, replace
,
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
with
,
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"rules": {
"semi": [
"error",
"always"
],
"quotes": [
"error",
"double"
]
}
}
After restarting VS Code, it still shows the warning for
unUsedVariable on line 7, but now also an error on line 2 for having
single quotes instead of double quotes, and an error on line 4 for the
missing semicolon at the end of the line.
This shows that you have already correctly answered how to expand
Create React App.
For another example, consider looking at the
package.json | eslintConfig of this answer.
3. Some gotchas with VS Code
Still don't see the errors and warnings as in the screenshot
above?
It might not work, I know.
Three gotchas to check :
You must install the VS Code ESLint extension.
After you have made any changes to package.json, you must close
and restart VS Code.
Then wait at least 60-100 seconds (or even 2 minutes) before
you conclude it didn't work.
Add "eslint.nodePath": "C:\\Program Files\\nodejs", to
settings.json in VS Code.
4. A much faster way to check if ESLint works
For starters: How do I run it?
Answer:
6
npx eslint . --ext .js
The first four lines of the response:
C:\stackexchange\stackoverflow\linting\eslint\Q59633005\src\App.js
2:46 error Strings must use doublequote quotes
4:51 error Missing semicolon semi
7:10 warning 'unUsedVariable' is assigned a value but never used no-unused-vars
– In less than 10 seconds, you get the same information about errors
and warnings as in VS Code.
5. A word of warning
If you don't like hard-to-debug errors such as
Parsing error: The keyword 'import' is reserved
then don't use any .eslintrc.* files at all.
1
In my experience, you can put all ESLint configurations under
eslintConfig in package.json as described in Section 2 above.
– You won't need any .eslintrc.* files.
References
Every Create React App depends on ESLint via react-scripts
Long answer to Parsing error: The keyword 'import' is reserved
Short answer to Parsing error: The keyword 'import' is reserved
Zip file containing the needed project files
NPMGraph - Visualize NPM Module Dependencies
Post containing package.json – another eslintConfig example
VS Code ESLint extension
In VS Code, add "eslint.nodePath": "C:\\Program Files\\nodejs",
to settings.json
Parsing error: The keyword 'import' is reserved
1
If you want to know why, compare this long answer with
this short answer.
2 I'm on Windows 10, but I expect all the commands
provided here to work just as fine on both Linux and macOS – except
where otherwise stated.
3 You can find that out by running npm ll.
4 I use Google Chrome Version 98.0.4758.102, 64-bit.
Running on Windows 10.
5 I got this information from
NPMGraph - Visualize NPM Module Dependencies.
6 Alternatively, use the first line below if you are on
Microsoft Windows (backslashes).
Use the second line if you are on Linux or macOS (forward slashes).
node*modules\.bin\eslint . --ext .js
node*modules/.bin/eslint . --ext .js

your question makes perfect sense. I found that this works:
run ESLint in VS Code with 'npx eslint' (shows all the options) or also 'npx eslint .'
add a script to package.json "lint": "eslint ." and then use 'npm run lint'
I did not have a problem with integrating ESLint to VS Code. After installing VS Code extension for ESLint, I automatically see the warnings/errors in VS Code under Problems.

Invariant Violation when upgrading React Native and dependencies

It's been a while since I updated my React Native project dependancies, and I'm trying to bring everything up to date. I started on react-native#0.42.0 and react#15.4.1. I updated everything using npm install --save react-native#x.x.x.
Now that I've updated everything, I can't get my app to run. I'm getting the following error:
Invariant Violation: Element type is invalid: expected a strong (for built-in components) or a class/function (for composite components) but got:object
As a last ditch effort to debug, I've done the following:
Commented out all application code so the only code running is inside index.android.js:
import { AppRegistry } from 'react-native'
import CRV from './app'
AppRegistry.registerComponent('CRV', () => CRV)
Modified my packages.json file so that only react and react-native are loading:
"dependencies": {
"react": "^16.0.0-beta.5",
"react-native": "^0.49.1"
}
When I run my app, I'm getting the red screen:
Unfortunately, I have no idea how to proceed at this point. Perhaps I've commented out too much and there's some other code I need to let run before trying to isolate the problem?

Unfortunately the answer isn't very glamorous.
Fortunately I was doing all my work on a branch. I had used react-native upgrade originally, and that's what lead me to this fail.
I finally destroyed that branch and got my environment back up on 0.42.0. I then used the new react-native-git-upgrade (docs). It was still a very tedious process, but once I updated all my other dependencies and fixed issues in my code related to requirements from the upgrade, it worked.