Resolve dependency problem when installing #mui - reactjs

pic of errors
I am trying to install the new version of #mui, but am getting ERESOLVE dependency errors. I have tried to 'npm uninstall' #mui, #mui/styles, #mui/base, #types, etc., and when installing 'react-scripts #types/react #types/react-dom' first as suggested in the #mui documentation, I had no errors (after I uninstalled all #mui). I am new, so maybe this is something really obvious idk. How can I fully clean out these conflicting dependencies to have a working install of the new #mui? I think what happened is I did a tutorial that instructed to install legacy #mui dependencies, and now after that legacy not working with my React, I am trying to implement the new #mui and it's not working. Any help appreciated!

Related

Depedency issues, cloned react project

I cloned a React/typescript package from GitHub, but cannot get it to work. When I do npm install, the compiler complains that my typescript version is too new:
WARNING: You are currently running a version of TypeScript which is not officially supported by #typescript-eslint/typescript-estree
Is there some way, I can use exactly the node and packages versions as listed in the package.json?
I've also tried npm install --legacy-pee-deps, but that wasn't fruitful either, still get the problem. Also, I tried setting npm config set save-exact true before installing packages.
Thanks!

Can't npm start my React project with eslint dependencies

I installed eslint in my react project to fix all the eslint errors. I fixed all the errors, however, I can't npm start the project. When I do that, I get this error, and some steps to uninstall all the eslint dependencies. I want to run the project with eslint dependencies.
Please let me know how to do this?
Error Message:
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:
"eslint": "^7.11.0"
Don't try to install it manually: your package manager does it
automatically. However, a different version of eslint was detected
higher up in the tree:
My guess would be that you installed eslint#v8 and since create-react-app doesn't support it yet (reference) it causes this error.
Downgrading to eslint v7 should fix it.
Create react app already comes bundled with eslint and by installing it in the project dependencies, you are in effect try to load in conflicting versions, you shouldn't need eslint inside of your own package.json.
HOWEVER
If you want to override eslint and start customising your react install you are more than welcome to eject (npm run eject), but bear in mind that ejecting your application will mean you will need to maintain dependencies going forwards.
You can read more about ejecting here - https://create-react-app.dev/docs/available-scripts/

Encounter errors when create react project

When I try to run npm create-react-app <name>, I encounter error reports. I've tried updating my node.js/npm and several other things and just don't work.
as you see in the error message, you have to install the last version of Visual Studio, take a look at node-gyp README, there is a guide to install and configure the dependencies.
suggest: use the npx to initialize a new react project with CRA, this way you will install the latest version each time.

Building a UI lib with Storybook

I'm building a UI lib for my organization, I'm using react with material-ui as a peer dependency in the package.json of the lib. I wanted to add storybook to have a playground for the components I'm building but the problem is: My lib is built upon Material-ui, which as I said above, is a peer dependecy and Storybook doesn't find material-ui because it's a peer dependency of the projetct.
How should I deal with that?
It makes sense Storybook is not finding material-ui because it is supposed to be installed in the host project that is going to use my ui-lib. Installing material as a dependency is not the case since it would break whoever implements the lib. I tried to see something about the Lerna project, but I'm not very familiar with that.
I'm open to hear any ideas :)
I managed to find a workaround to this issue and wanted to share with the community. It's pretty silly but it works perfectly for my case.
I added #material-ui both as dev dependency and peer dependency to my package.json and removed it from dev dependecies on my Docker file when I added it to the aws pipeline. So on while coding we have #material-ui but on prod environment it is not there.
That solved it for me :)
I could also just do "npm uninstall #material-ui" before "npm publish"

Node modules disappear after initializing the localy installed ESLint

In my initial react application (created by react-native init project_name). In my project folder, I install my ESLint locally by yarn add eslint --dev.
Then I initialize my configuration by ./node_modules/.bin/eslint --init (with Airbnb style guide, using React, and JSON configuration file format). The installed eslint is disappeared in ./node_modules/.bin folder.
Before initialization:
ls ./node_modules/.bin
acorn eslint jest-runtime node-pre-gyp semver
atob esparse js-yaml nopt sshpk-conv
babylon esvalidate jsesc pegjs sshpk-sign
color-support handlebars json5 rc sshpk-verify
detect-libc image-size loose-envify react-native uglifyjs
envinfo import-local-fixture metro regjsparser uuid
escodegen is-ci mime rimraf watch
esgenerate jest mkdirp sane which
After initiliazation:
ls ./node_modules/.bin
babylon esparse esvalidate jsesc loose-envify semver
What am I missing?
Platforms: macOS, react-native-cli: 2.0.1, react-native: 0.54.2
This is caused by a bug in NPM 5 where npm install will delete almost all of your dependencies. This was the relevant issue. Even though you are using yarn, eslint will use npm under the hood to install the dependencies it needs, and thus will run into the aforementioned bug.
This has very recently been fixed in npm >= 5.7.1, so you will need to upgrade npm and then reinstall all of your modules.
Personally, I'd just recreate the entire project from scratch since it doesn't seem like you've done anything yet. It would be a lot more straightforward than trying to fix things.
By upgrading, you will also be able to use react-native-cli without error as prior to v5.7.1, you were actually supposed to use NPM 4. See this bug.

Resources