This is my first question on StackOverflow. So might miss out on detailing, so please correct me if needed.
I am facing an issue with one of my imports in reactJs. The package react-image-video-lightbox.
I installed the package with "npm i react-image-video-lightbox" and also checked the node_modules, the package is present in node_modules as well.
But for some reason, when i run npm start it is still not able to locate the package.
Project Directory
Node Modules (The highlighted one)
The directory structure of react-image-video-lightbox
The error
The way I am importing
Also, shows up in package suggestion
I am not sure what i am doing wrong. My node version is 12.22, npm is 6.14 and reactjs version is ^16.13.
Any help and suggestions are highly appreciated.
Thanks
Related
I have a problem that when I clone a Github repository that is older more then half a year I am not able to run it with neither npm start nor yarn start. I have been successful with one repository only and it was only a few months old. I think it might be because of the new React version. I am quite new to React so I don't know for sure.
I always get an error message that looks something like this
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-jest": "^26.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-jest was detected higher up in the tree:
/Users/username/node_modules/babel-jest (version: 27.5.1)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if /Users/username/node_modules/babel-jest is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls babel-jest in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-jest.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Even after following all 7 steps, I am still getting the same result. What should I do??
I've been making a simple webpage with React for learning.
I installed Font Awesome package in NPM and I've got a dependency tree error.
Here's what console is saying.
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-loader": "8.0.4"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
C:\Users\happy\node_modules\babel-loader (version: 8.2.5)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add
SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the
steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other
things you can try:
1. If you used npm, install yarn ([http://yarnpkg.com/](http://yarnpkg.com/)) and repeat the above steps with it
instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
2. Check if C:\Users\happy\node_modules\babel-loader is outside your project directory.
For example, you might have accidentally
installed something in your home folder.
3. Try running npm ls babel-loader in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-loader.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
So I followed the instruction but I've been stucked in step 3 because 'babel-loader' doesn't exist in my package.json in the first place.
I would be very thankful if anyone can help me!
Thanks.
Just delete the node_modules folder and run : npm install
I'm trying to use CamanJS with React, I'm installing as a node module with npm install caman per the documentation but I am getting an error. I've tried using require to bring it in, I've also tried import. The package is in my node_modules folder.
Heres the error:
Console Warning:
Any help is very much appreciated!
Yeah, the issue is that fibers is looking for environment variables, but because you're running it in the browser, it can't find them. npm i -s caman is meant to be used with node. Kinda a bummer.
I'm trying to install a package called 'react-stepzilla'.
I've installed and saved this via NPM and made sure this is included in the .package-json file. All of the files are there too.
I've included the following at the top of my main Component...
import StepZilla from 'react-stepzilla';
But all I get is this message...
https://i.stack.imgur.com/M96Au.png
So I think it's looking in the wrong place for the module. How do I sort that out?
There is no "dist" folder in the NPM package so the module can't be
used in a project.
Current issue on Github
Apologies for this...
There was some regression and the 'dist' folder got left out in a new build.
It will work now.
https://github.com/newbreedofgeek/react-stepzilla/issues/7 is closed.
Make sure you run npm update react-stepzilla to get the latest version.
tnx,
newbreedofgeek (react-stepzilla author)
my problem is described in the following image:
The main problem is that im getting a: Bower ENOENT no bower.json present error and as you can see in the image (second command) the file is actually present. So ive been trying to find what actually bower install does and havent found it in the NPM documentation and Git documentation as well
Also, in the research ive done some forums suggest installing bower globally and it hasnt worked
Since i've been googling for about 3 nights looking for somebody with the same problem and havent found anybody else with the problem I started wondering about if I changed any environment variable. So i uninstalled node.js and Git and then reinstalled both programs without any change in the result
Hope somebody can help me with this, thanks in advance
Bower is a package manager for HTML http://bower.io/. 'bower install' will download all the packages listed in bower.json and add them to a folder called 'bower_components'
You must have bower install globally via
npm install -g bower
To get a list of NPM packages installed successfully global use:
npm list -g
Having a look at the github issues of that Repository(Angular-phonecat) theres alot of issues related to bower(https://github.com/angular/angular-phonecat/search?q=bower&type=Issues&utf8=%E2%9C%93), which is strange because bower is not that complicated. Have you looked through any of those fixes.