I have created a number of React components which wrap Material-UI components and are packaged as an NPM module.
The module works fine when installed via the remote package: npm install *name-of-package*, or via local install: npm install ../*name-of-package*.
For module development, however, I would like to use npm link so that I can use webpack --watch / webpack-dev-server etc in the module and site directories.
To do so, I am running npm link to create a symlink in the module directory, and then npm link *name-of-package* in the site directory. Webpack starts as expected, however I keep encountering errors in the browser related to MUI's withStyles function:
Uncaught TypeError: Cannot read property '#global' of undefined referring to the var rules = style[propKey]; line of the function handleNestedGlobalContainerRule(rule).
And other such as: The above error occurred in the <WithStyles(Typography)> component
From what I can tell from similar posts this is complaining about the absence of theme object (the site has a MuiThemeProvider with a theme object declared).
Can anyone suggest why this might be working with npm install and not npm link? I cannot seem to figure this one out.
After checking out various commits and reading #AstenMies' reference, I have seemed to have resolved this issue. Or at least I'm no longer able to replicate the problem.
I'm not entirely sure which exact change solved the issue, but I'll list what I did in case someone else finds themselves in this situation:
As #AstenMies' link points to, property in my theme object was undefined (although this on its own didn't solve my issue)
Make sure the React and React-DOM versions of your module and site are the same
Don't mix your yarn add and npm install commmands - mixing package managers can lead to inconsistencies
When in doubt, delete your node_modules folder and install again. Your can also npm cache clean here to avoid any cached nasties
Related
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>
I have a monorepo which exposes a TypeScript module, which is consumed & used by a React TypeScript project.
When the module inserts arbitrary React elements to the virtual DOM - everything works as expected, including when I try to use React Router (which was initially problematic but I was able to fix that).
However, when I try to use react-intl, via FormattedMessage, I get the error:
Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
Which is especially annoying as I see this printed in the console logs:
The above error occurred in the <Context.Consumer> component:
in FormattedMessage
in h2
in div
in Loading (at App.tsx:11)
in IntlProvider (at App.tsx:8)
in App (at src/index.tsx:9)
in StrictMode (at src/index.tsx:8)
(note the IntlProvider wrapping Loading - which is the element that uses FormattedMessage which can't find IntlProvider).
I imagine this is somehow related to versioning, or having 2 instances of React / React DOM / IntlProvider, but I have no idea to how solve this, and I have spent quite a lot of time trying everything I could think of.
For what it's worth, here's what I use:
TypeScript - for both module and project
Webpack to pack the module, where I declared React, ReactDOM and react-intl as externals and added them as peerDependencies rather than direct dependencies
create-react-app for the project
I was able to create a minimal repro repository, here's how to repro my issue:
<cd somewhere>
git clone https://github.com/chakaz/repro-repo .
cd repro-lib
npm install
npm run build:dev
cd ../project
npm install
npm run start
Anyone has any idea? Tons of thanks in advance!
With your above way in order to make it work, you have to delete node_modules in your repro-lib dir cause it will install dependencies in both dirs.
So in order to resolve problem of monorepo, I'd like to suggest you use yarn's workspace functionality as described carefully here: https://classic.yarnpkg.com/en/docs/workspaces/
To summary, it's a great functionality to help working with multiple workspaces by just only yarn install once.
Here are a few steps to make your repo working:
Put package.json at the root level of the project with following content:
{
"private": true,
"workspaces": ["project", "repro-lib"]
}
Go to project dir and replace following line in package.json:
"pf-common": "file:../repro-lib"
to
"pf-common": "1.0.0"
Finally, just go back to root top level install deps again:
yarn install
That's it! Now you can re-run your application to see how it works.
NOTE: In terms of having interest in monorepo, lerna is also great tool comes to help by providing great CLI.
Whenever I install any gatsby plugins or typography files, and then attempt to run gatsby develop, I am thrown an error sying that 'react' can't be found. Example:
I create a new gatsby site using gatsby new example-site https://github.com/gatsbyjs/gatsby-starter-hello-world
I install the gatsby-plugin-sass using npm install --save node-sass gatsby-plugin-sass
I follow the instructions on the plugin page, adding the plugin to my gatsby-config.js file.
When I now attempt to run gatsby develop I receive the following errors:
ERROR
There was a problem loading the local develop command. Gatsby may not be installed. Perhaps you need to run "npm install"? Cannot find module 'react'
Error: Cannot find module 'react'
As well as a list of files that the errors are being thrown in, most of them in internal files.
Clearly I have the Gatsby-cli installed, as well as react. I'm also receiving a ton of warnings about deprecated related to core-js and optional dependencies not being installed.
In my research, I have found people saying that using yarn instead of npm solves the issue, but with Gatsby being as large of a project as it is, and with the documentation itself saying to use npm, that doesn't seem like a solution but rather a work around. Is there any other info on this that I just can't seem to find?
I reprodued your error, and after looking around I found several issues on the Gatsby GitHub repo with the same behavior.
It seems that this is a problem with npm itself, which is why the community is increasingly switching to yarn.
If you'd like to stick with npm, the solution is to clear your node_modules and package-lock.json, then reinstall your dependencies (source):
rm -rf node_modules/ package-lock.json
npm install
I have installed Jest v17.0.3 in my react project.
When I run jest locally it works fine, but on the build server it fails with:
Error: Cannot find module 'react/lib/ReactComponentTreeHook' from 'ReactDebugTool.js'
Both machines are running node version 6.9.1 and npm version 4.0.2.
use same version of react and react-dom. My problem fixed after using this command
npm install --save react#15.4.0 react-dom#15.4.0
this problem specially occurs on react 15.4.0 above.
Can you check which version of React you are using? Is it the same on both servers? I would try removing node_modules and reinstalling the dependencies. The reason I am suggesting this is that in React v15.4.0 you cannot import private apis and it seems that ReactDebugTools.js is trying to import from react/lib/....
From the blogpost about React v15.4.0 (Link):
However, there is a possibility that you imported private APIs from react/lib/*, or that a package you rely on might use them. We would like to remind you that this was never supported, and that your apps should not rely on internal APIs. The React internals will keep changing as we work to make React better.
Hope this helps!
In the latest versions of react we often see this error as we have loaded 2 versions of react:
To make sure you have just 1 version, run the following in your terminal:
npm ls react-dom
npm ls react
Both the react and react-dom versions need to be same.
If any one of these returns more than 1 version then that's not supported. You have to then correct it in your corresponding package.json
I had the same issue and i removed the node_modules and ran npm install and it fixed the problem.
I am developing an external component (let's say my-component, which I link to the project with npm link (as it is in process and I need the package to reflect changes).
In the my-component folder there are node_modules/react and node_modules/react-dom as they are its dependencies. However they are peerDependences, so I did not suppose to bring them into the project linking this package.
However when using npm link, it link the whole directory, including node_modules. So, when the project builds, it includes packages 2 times: from node_modules/* and from node_modules/my-component/node_modules/*.
This begins to affect when the component is using ReactDOM.findDOMNode, it causes this error:
Warning: React can't find the root component node for data-reactid value `.0.2.0`. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.
Also, it may help to understand what's happening: the problem only appears if there are both node_modules/my-component/node_modules/react and node_modules/my-component/node_modules/react-dom. If there is only one of them, there is no error message.
The usual package installation does not bring such error as there is no node_modules/react-dom there.
How is it supposed to develop an external component and the project at the same time?
The issue is twofold:
You cannot have 2 copies of react loaded.
npm link creates a symlink, however the "require" doesnt respect the
symlink and when it tries to navigate up the directory, it never
finds the react of the parent project.
Solution:
All you have to do is link the react and react-dom in your component to that of parent project's node_modules folder.
Go to your component project and remove the react and react-dom then do
npm link ../myproject/node_modules/react
npm link ../myproject/node_modules/react-dom
Fixed it by adding react-dom as an alias to my webpack config
alias: {
react$: require.resolve(path.join(constants.NODE_MODULES_DIR, 'react')),
'react-dom': require.resolve(path.join(constants.NODE_MODULES_DIR, 'react-dom'))
}
Someone clevererer than I (#mojodna) came up with this solution: remove the duplicate dependencies from the external component, and resolve them with your project's copies of those deps.
Step 1: Remove the dependencies from your external component's node_modules
As #cleong noted, you can't just remove the deps from the external component's node_modules, because your project's build step will fail when it hits the now-missing dependencies in the external component.
Step 2: Add your project's node_modules to NODE_PATH
To fix this, you can append the project's node_modules to the NODE_PATH environment variable when running your build step. Something like e.g. this:
NODE_PATH=$(pwd)/node_modules/ npm start
(where npm start is your script that bundles your external component, via e.g. Browserify, Webpack, etc.)
In fact, you could always append that NODE_PATH addition to your build scripts, and it would work whether or not you've npm linked anything. (Makes me wonder if it shouldn't be default npm behavior...)
Note: I left my existing answer because there's some conversation there, and this is a different (and better) solution.
I believe the answer is to specify react and react-dom as peerDependencies in your external component's package.json. As best as I can follow here and here, npm link should (as of npm#3) no longer install peerDependencies (or `devDependencies either).
Aaaand I just read your post more carefully and realized that you already are specifying them as peerDependencies. Therefore, I think the answer boils down to:
Upgrade to npm#3:
npm install -g npm#3.0-latest
The problem is with npm link. https://github.com/npm/npm/issues/5875
npm doesn't treat the linked directory as a child of the parent project.
Try alternatives to npm link:
1) Use relative path dependencies in package.json
2) Manually include your dependencies in your projects node_modules directory
3) Use url path
Basically anything but npm link
I am using ReactJS.net and setup webpack from the tutorial there and started using react-bootstrap aswell when i started getting this error. I found adding 'react-dom': 'ReactDOM' to the list of externals in webpack.config.js fixed the problem, the list of externals then looked like this:
externals: {
// Use external version of React (from CDN for client-side, or
// bundled with ReactJS.NET for server-side)
react: 'React',
'react-dom': 'ReactDOM'
This seems to be the first stack overflow link on google for this error, so i thought this answer might help someone here.
Adding the following in my webpack.config.js worked for me:
resolve: {
alias: {
react: path.resolve(__dirname, 'node_modules', 'react')
}
}
I also experimented with DedupePlugin (mentioned as a possible remedy here) but I couldn't get it to work.
What's also interesting is that I've encountered different (and perhaps more insidious) manifestations of the same problem when a module is found in multiple places in the dependency graph.
One such case was that my React.PropTypes.instanceOf(SomeType) constraints would emit warnings even though the type I passed in was correct. That was due to the module being present in multiple places in the node_modules directory tree. Due to duck-typing the code would still work, but my console was cluttered with these warnings. Going the resolve.alias way silenced those too.
YMMV
Strongly recommend using https://github.com/mweststrate/relative-deps.
Installs dependencies from a local checkout, and keeps them in sync, without the limitations of link.
This fixes the issue as it installs the local library just as npm install would, satisfying any dependency versions, etc.
If you're using Webpack in the main project, this solution may work. In my case, project-a requires project-b. Both require React and ReactDOM 0.14.x
I have this in project-a/webpack.config.js:
resolve: {
modulesDirectories: ['node_modules'],
fallback: path.join(__dirname, 'node_modules')
},
resolveLoader: {
fallback: path.join(__dirname, 'node_modules')
},
project-b requires React and ReactDOM as peerDependencies in project-b/package.json
project-a requires project-b as a devDependency (should also work required as a dependency) in project-a/package.json
local project-b is linked to project-a like so: cd project-a; npm link ../project-b
Now when I run npm run build within project-b, the changes appear immediately in project-a
I was getting this because I had already included react and react-dom as external scripts in my HTML markup.
The error was caused by adding an import ReactDOM from 'react-dom' to a component module. The error went away once I removed the import, and the module worked fine since the components were already available.