I'm getting the error:
failed to compile -/src/reportWebVitals.js Module not found: Can't
resolve 'web-vitals'. Since new to react JS, could not find what
happened. Here is the reportWebVitals.JS file. Thanks in advance for
the help. "/src/reportWebVitals.js Module not found: Can't resolve
'web-vitals' in 'E:\ReactResources\RectProjects\test-app\src'"
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}};
export default reportWebVitals;
You need to install web vitals. Open your terminal and run the following command:
npm i web-vitals --save-dev
Also, deleting the whole thing and reinstalling might work, but that's a longer process.
For anyone coming here from starting a brand new app with create-react-app: If you are using npm but run create-react-app without explicitly specifying it, it will use yarn when available.
I was able to bypass this issue by adding the flag --use-npm.
So, for example:
npx create-react-app my-app --use-npm
Source
for me following worked
first do npm uninstall react-scripts
then do npm install react-scripts
Delete all the files & Folders inside test-app folder. Reinstall all the packages now and start npm. It will work.
If you have created your project with create-react-app, all the dependencies should be there when you run npm install.
Make sure you did that by navigating to the root directory and running:
npm install
I closed my terminal and opened again. Works for me!
Related
When i try to npm run serve it stops at 98% and :
ERROR
Failed to compile with 1 error
This dependency was not found:
* #/components/HelloWorld.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/Home.vue?vue&type=script&lang=js
To install it, you can run: npm install --save #/components/HelloWorld.vue
I looked up for some sources but never helped. Even installing HelloWorld.vue turns an error.
It looks like one of your files is trying to load a local component called HelloWorld.vue and it may not exist in your project structure. You shouldn't try to "install" it, but rather head to the Home.vue file where this error is being triggered from (see Home.vue at th end of the error message?). Then ask yourself, do you actually want to load HelloWorld.vue?
I imagine you're following some sort of "getting started with Vue" guide and you've been instructed to include that file. You'll have to either create that file in the {YOUR_PROJECT}/src/components/ folder, or remove the code that's trying to load it.
Alternatively, this could be a configuration error in which you're trying to use the # alias but it hasn't been setup in webpack properly. Please include more info if this doesn't solve your problem.
Maybe Vue Js cli is not installed on server
// to install vue on ubuntu
npm install -g #vue/cli
// check if it was installed successfully
vue --version
#vue/cli 4.1.2
Weirdly, the react-native-vector-icons was working well but by using ^ ("^6.6.0") for its version in the package.json file on the new release this error happens.
It's weird because two days ago it works well but now starting of my project ran to this error:
error: Error: Unable to resolve module #react-native-community/toolbar-android from node_modules\react-native-vector-icons\lib\toolbar-android.js: #react-native-community/toolbar-android could not be found within the project.
After reading this issue and trying many solutions I reach to two solutions:
You can delete all node_modules folder and put the version of react-native-vector-icons to "6.6.0" instead of "^6.6.0" and then install all packages again. absolutely, it is better to delete all caches and builds and start everything again. (NOT Recommended)
You can install the #react-native-community/toolbar-android by using the below command:
yarn add #react-native-community/toolbar-android
Or
npm install --save #react-native-community/toolbar-android
Note: Both of these solutions are temporary and soonly this bug will be fixed and there is no need to install the toolbar-android package.
Prev Update
I update the package to the version "^7.0.0" on my project and still, the issue is remaining, so this solution is currently perseverance.
New Update
this issue is fixed on version "^7.1.0" and there is no need to install the #react-native-community/toolbar-android.
Update the library
react-native-vector-icons
to the latest version.
I had this problem too.
In my case, only works when I removed and added the package again with the latest version (7.0.0).
yarn remove react-native-vector-icons
yarn add react-native-vector-icons
Had this EXACT same error. All I had to do was install toolbar-android & voilà!
npm install --save #react-native-community/toolbar-android
Go the path \node_modules\native-base\node_modules\react-native-vector-icons\lib\toolbar-android.js
Replace import ToolbarAndroid from '#react-native-community/toolbar-android' to import {ToolbarAndroid} from './react-native';
I also got the same error after upgrading from version 6 to 7. The issue can be fixed simply by resetting the cache.
Please try npm start -- --reset-cache
do this:
rm -rf node_modules/
rm -rf package.lock.json
npm i
react-native start --reset-cache
from your project directory:)
Just Import it direct from react native it solves my problem
node_modules\react-native-vector-icons\lib\toolbar-android.js
import { ToolbarAndroid } from 'react-native';
Same issue, I solved it:
My environment:
RN: 0.61.5
Node: v12.18.3
OS: Windows 10 Pro
You can install react-native-vector-icons latest version (current 7.0.0).
And do not run auto-link (react-native link react-native-vector-icons)
Finally, running react-native start --reset-cache
Good luck.
First let's understand the standard convention used in package.json for packege's version.
So if you see ~1.0.2 it means to install version 1.0.2 or the latest patch version such as 1.0.4. If you see ^1.0.2 it means to install version 1.0.2 or the latest minor or patch version such as 1.1.0.
Now, coming to the issue.
The issue is caused because you are having a version of react-native-vector-icons which is giving you some trouble.
Check it's version by this command under your project directory:
npm list react-native-vector-icons --version \ is it 6.6.0 ??
No ?? . There is the problem. You need strictly 6.6.0 but you got something else.
Solution:
Delete node_modules directory under your project. Change the version of react-native-vector-icons in package.json to 6.6.0 (basically remove ^ to tell npm to get me exactly what I want. Nothing more, nothing less !)
Then do npm install !
The other alternative is to use expo's vector Icons. Something like this.
import { Ionicons } from "#expo/vector-icons".
Then render your Icon like this;
<Ionicons
name="ios-exit-outline"
color={colors.danger}
size={28}
style={{ marginRight: -15 }}
/>
Edit this file node_modules\react-native-vector-icons\lib\toolbar-android.js
remove 'import ToolbarAndroid from '#react-native-community/toolbar-android';'
edit return null
for this case you have not toolbar-android in your modules file and as friends saying you can fix it by this command
windows users:
npm install --save #react-native-community/toolbar-android
Mac users:
yarn add #react-native-community/toolbar-android
But IN GENERAL: I wanna tell you an experience for you guys whenever you encounter with this kind of errors that start with "Unable to resolve module" .
if you have a look to the error we have a problem with the module that system is telling us.
if you have not that module . you can install it with the commands
Windows users:
npm install --save THE MODULE(attention: THE MODULE IS THE NAME OF PACKAGES OR MODULES that u need to install)
and Mac users:
yarn add THE MODULE(attention: THE MODULE IS THE NAME OF PACKAGES OR MODULES that u need to install)
for example lets look at this error:
error Unable to resolve module `#react-native-community/slider` from `App.js`: #react-native-community/slider could not be found within the project.
as you can see error is telling us this module could not be found within our project.
so we need install it with this command:
for windows programmers:
npm install --save #react-native-community/slider
and for mac programmers:
yarn add #react-native-community/slider
that's all.
I hope you understand me clearly and do not have problem with unable to resolve module errors and my command be useful for you.
best regards
Mehrad Karampour (MEH)
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-eslint": "9.0.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:
create .env file in your project file and add the following statement
SKIP_PREFLIGHT_CHECK=true
Save the file
Remove node_modules, yarn.lock, package.lock
Then reinstall node_modules with
npm install
This should work
I had the same problem and do all the suggested steps but the problem still, so, my error is that i have a reactApp inside other Javascript App i had this structure.
--MyProjects
----NodeJsApp
----node_modules of NodeJsApp
----package.json of NodeJsApp
----ReactApp
------node_modules of ReactApp
------package.json of ReactApp
The problem solved to me deleting my ReactApp node_modules directory, then i do a reestructure of my directories because i have a disaster.
--MyProjects
----NewDirectory (inside all about NodeJsApp)
------node_modules of NodeJsApp
------package.json of NodeJsApp
----ReactApp
------package.json of ReactApp
After that i do :
npm install
and then npm start and my problem has fixed, i think that the problem is that the parent directory cant have a javascript /nodeJs/ project or something that have node_modules .
Part of the output you provided says:
Check if C:\Users\chawki\node_modules\babel-eslint is outside your project directory. For example, you might have accidentally installed something in your home folder.
Browse to C:\Users\chawki\node_modules\ and delete the babel-eslint folder, or simply delete C:\Users\chawki\node_modules.
I just deleted the node_modules folder (for me it was C:\user\[yourUserName]\node_modules\) and re-installed it.
Here What i did...
C:\user\[yourUserName]\node_modules\babel-eslint and delete the file
C:\user\[yourUserName]\node_modules\eslint and delete the file
Delete your eslint and babel-eslint file from your node modules on your computer e.g. -C:\Users\vishnu\node_modules -delete eslint and babel-eslint file.
In your project:
yarn remove eslint
yarn add --dev eslint#6.1.0
yarn remove babel-eslint
yarn add --dev babel-eslint#10.0.3
If you dont want to create .env file there is another alternative you can pass the SKIP_PREFLIGHT_CHECK=true directly in the script.
For Example
"start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
in package.json
resolutions:{
"babel-eslint": "9.0.0"
}
if you reinstall your all dependencies, you will be forcing "babel-eslint" to be version "9.0.0". if you start your app, you will have no issue.
My problem was I installed webpack as a global package... after i deleted webpact and run npm install, the problem was gone
Make sure you don't have a global webpack package or somewhere higher up the directory structure.
In my case, I had it globally installed. Deleting and then running npm install and then npm start worked perfectly.
Run npm ls babel-eslint and see which dependencies are using it or installing another version. Try updating those libraries.
It worked for me.
I'm trying install react-vis-force module but not working properly.
I edited package.json to install 'react-vis-force' vs 0.3.1
But I met error.
Cannot find module './factoryWithTypeCheckers' from node_modules/react-vis-force/dist
How can I fix this?
Based on a solution found in the issues section of another react library, you can resolve this issue by changing the import statement.
import {ForceGraph, ForceGraphNode, ForceGraphLink} from 'react-vis-force/dist/react-vis-force.min.js';
The un-minified version of the code has a missing dependency- the minified version does not. It appears as though npm was using the un-minified version by default.
If you're working with npm try to do it
npm install --save react-vis-force
With --save you save your dependency in package.json
If you have do it before, try npm install for reinstall your dependencies.
I just started using Laravel Mix which is using webpack. I'm having some issues resolving dependencies.
I tried to install l20n with npm install l20n, added it to my project by adding require('l20n'); and then I ran npm run dev only to be told the following:
ERROR Failed to compile with 1 errors
This dependency was not found:
* fs in ./~/l20n/dist/bundle/node/l20n.js
Alright, so I figured I had to install fs too, issuing npm install fs and then I ran npm run dev again, but I get the exact same message. What am I doing wrong?
Ok, I checked out the source and I think I know what the issue is. The lib you are using is supposed to run in a node environment.
So, in your webpack configuration add this:
target: 'node'
For more info on targets see this