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
Disclaimer: this is my first question on Stack Overflow, so apologies if it's not formatted correctly. Please let me know how I can improve it or if more details are needed.
I tried to install styled-components for my React app with the following command npm install --save styled-components.
Before I did this, my server started up just fine with npm start.
After install, React tries to start up the development server but it stops and returns the following errors:
cacheEntry.sizeOnlySource = new SizeOnlySource(size);
TypeError: SizeOnlySource is not a constructor
at updateFileWithReplacementSource (project-directory/node_modules/webpack/lib/Compiler.js:756:37)
at updateWithReplacementSource (project-directory/node_modules/webpack/lib/Compiler.js:738:8)
at processMissingFile (project-directory/node_modules/webpack/lib/Compiler.js:801:8)
at project-directory/node_modules/webpack/lib/Compiler.js:843:10
at Immediate.<anonymous> (project-directory/node_modules/memfs/lib/volume.js:698:17)
Initially, I tried uninstalling the styled-components package. Same errors. Then, I tried updating webpack with npm update webpack.
I googled the errors but they were all for problems that seemed unrelated or that are now fixed.
Support Webpack 4.29.0 breaking change
output.futureEmitAssets option breaks compatibility with source map upload plugins
library target umd - Uncaught TypeError: x is not a constructor
I did come across a post on Stack Overflow explaining that --save is no longer necessary as of npm version 5.0.0. Perhaps it's the source of the error?
Note that I installed the styled-components package on a separate branch of my project, but the server still won't start when I switch to the main branch and I'm getting the same errors.
Honestly, I have no idea what's going wrong or how to fix it. Any help or guidance would be greatly appreciated.
Edit: before the Starting development server... line I get after running npm start, there's some kind of message about webpack being deprecated. I hadn't noticed that before, but it flashes by too quickly for me to read it and I can't scroll up to see the message. I created a new React project from scratch to see if the server would start. It does, but I'm still getting the aforementioned messages.
I am working on a react app with a couple of colleagues, and after the latest pull I am no longer able to compile the app, but my colleagues are not having any issues.
On my end the app fails to compile because some #material-ui components are displayed as missing in the node_modules/#material-ui directory. However, when I search the folder, I see the files there, they are just shown in typescript format instead of js. However, when comparing my working directory with a colleague's it appears there are also files completely missing on my end that exists on theirs.
For example, when the app fails to compile I see this:
Failed to Compile
./node_modules/#material-ui/core/TextField/TextField.js
Module not found: Can't resolve '../FilledInput' in
'..../node_modules/#material-ui/core/TextField'
When I search this folder, the file is there but labelled 'FilledInput.d.ts'.
Has anyone encountered something like this? I have recompiled the app, and deleted the branch and recloned from remote but the issue remains.
Thanks
Have you tried removing node_modules and installing dependencies again?
Does npm install give any peer dependency warnings? Does this help?
npm i #material-ui/core --save
After I have created a new app with create-react-app or Razzle, error messages appear at build time which are quite concerning, security wise:
[Error: ENOENT: no such file or directory, stat '/initrd.img'] {
errno: -2,
code: 'ENOENT',
syscall: 'stat',
path: '/initrd.img'
}
Sometimes, a few other messages appear, with "/vmlinuz" "/initrd.img.old", "/vmlinuz.old" and ".steampath" instead.
Theses messages appear any time there's a build error (any build error that I generate).
This is basically the same problem as described in vue-CLI outputting very concerning error (security question) (but I was told to ask a new question). There were testimonies of three people having the same error messages in that thread.
I don't think there would be any valid reason for a React build script to stat the Linux kernel and a Steam directory, so there might be a malicious package at play here.
This only happens with npm, not yarn. (If your app has been created by CRA with yarn, you should do rm -rf node_modules && rm -rf yarn.lock && npm install);
The most minimal setup I could achieve while trying to isolate the culprits was:
creating a brand new app with create-react-app with npx create-react-app app1
and then generating an arbitrary build error in index.js, adding something like: import "nonexistent";
When I do that, I see the stat '/initrd.img'error mentioned above.
I'd like to know if you don't see the errors after executing the same exact steps. That would probably mean that it doesn't come from the packages installed but from elsewhere in my system.
It cannot come from my Node.js setup though, because I deleted my $HOME/.nvm, $HOME/.npm $HOME/node_modules, $HOME/.yarn and $HOME/.config/yarn before redoing the steps below.
There aren't many similar testimonials about this on the web, apparently. A bit more with "/.steampath" though.
I reported the issue to security#npmjs.com. They haven't replied yet.
If there is indeed a malicious script in the dependency tree of react-create-app (and Razzle), it should be investigated urgently.
Environment:
Node 14.14 installed with nvm 0.36.0
npm 6.14.8
create-react-app 3.4.1
Kubuntu 20.04
EDIT: I've also posted an issue at https://github.com/facebook/create-react-app/issues/9855. I thought this was serious and urgent enough that CRA maintainers should be notified now.
I got the same error and struggled with it for 2 days. Everything was running well on my Mac but as soon as I cloned the GitHub repository and tried to run my react app on the Linux system as well as AWS-Amplify and it showed me this same error:
[Error: ENOENT: no such file or directory, stat '/initrd.img'].
But after checking the build error logs I found that it was the problem with an import from react-bootstrap. The problem was 'the case' of the component I was importing. In my case I was importing bootstrap Container and used container instead of Container.
I simply corrected that and everything was resolved.
In my case:
WRONG: import Container from 'react-bootstrap/container'
RIGHT: import Container from 'react-bootstrap/Container'.
My Tip: Trivial mistakes like this can also give you this error. Check for incorrect imports and see the documentation for the libraries to check the cases.
In case your application is small and you have not gone too far with the development, then you can create a new react application and copy the component files one by one and run them to see which component is actually creating the problem. This is not the best idea but it worked for me the first time I got this error.
PS: Thank you for reading. This is my first answer on Stack Overflow. YAY!
There seems to be a simple answer: these messages could just come from Node searching for node_modules in the project parent directories all the way to the filesystem root. (See https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders). It might also try to follow symlinks in case they point to a node_modules directory, and emit an error each time it encounters a broken symlink in the process.
That's plausible and reassuring. No malicious script involved.
I removed initrd.img, /initrd.img.old, /vmlinuz and /vmlinuz.old, which were indeed broken symlinks. So I shouldn't get these errors anymore.
In my case it was an incorrect import statement of a static CSS file in my react-app.
VS Code for some reason auto imported a "classes" object from some random route when trying to declare const classes = useStyles(); using Material UI makeStyles method.
So check if you have any incorrect import statements of files.
In my case the message appeared when I installed new #mui/material ui lib without #emotion/react #emotion/styled complement
The missing library name was written in the error message in the console, but I had to catch it with PrtSc cause the message mentioned above replaces it almost immediately.
Node.js tries to find modules in the parent directories, up to the root. Possibly in your /boot there is a broken symlink. The message indicates that there is a package not found or a mispelled import in your codebase.
In my case this error fix manual installing react-router-dom npm i react-router-dom
For me, an npm package was missing in the package.json. Installing the package with npm install --save <package> solved the issue
In my case, an import syntax error. I had forgotten the first forward slash before 'components/MyComponent'.
In my App.js:
import MyComponent from '..components/MyComponent'
change by:
import MyComponent from '../components/MyComponent'
The same error message occurred to me. After removing all files at node_modules and running npm install to reinstall them, it says the node-sass dependency failed to run, then after rebuilt of the dep, the error disappeared.
I also saw this error. For me the reason was that I was not installing the npm package in my project directory but in some other directory.
I noticed package.json and package-lock.json in my project were not getting updated even after running npm install --save <package_name>
hope you can help. I'm trying to install mauron85 react-native-background-geolocation and when i go to link the dependencies (react-native link react-native-mauron85-background-geolocation) i keep getting 'react-native: command not found'. i've installed npm, nodejs, react native (npm install -g react-native-cli), flow, watchman and the mauron85 package. i'm running this on ubuntu and have tried on mac and getting the same error message on both. I've also tried doing the manual setup for android and this hasn't worked because I don't have some of the node modules it needs, and have tried adding the right path to my path variable, which has made no difference. Is there anything obvious I'm missing that I've forgotten to install/has anyone had a similar message before?
Thanks!