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"
Related
Is it possible to mark a project dependency as deprecated without removing it from the project.
So other developers don't use it in future
I have a project that was built on Material-UI V4 and have recently added Mui-V5 with the intention that all new work is built on V5. I'd like developers to see an IDE warning when they import components from the old dependency.
One thought I had is to use patch-package to modify Mui-V4 and set it as deprecated in package.json but this warning only shows on npm install.
after 'npx sb init'
menu list
I installed all of them and what I got is..
file list
I really don't know how/what they are different..
what's the point of 'react, react_prject,webpack_react' ??
As you can see in the Storybook file:
https://github.com/storybookjs/storybook/blob/next/lib/cli/src/project_types.ts
In REACT_PROJECT the react configured as peer dependency as for REACT it's dependency. WEBPACK_REACT contains react & webpack as dependencies.
The difference between them explained well here:
What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?
From the installation docs:
The command above will make the following changes to your local environment:
📦 Install the required dependencies.
🛠 Setup the necessary scripts to run and build Storybook.
🛠 Add the default Storybook configuration.
📝 Add some boilerplate stories to get you started.
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/
I'm creating a react-native library that needs some of react-native modules in order to work.
Should I mention react-native as a dependency for my project in package.json dependencies?
I saw some other react-native npm packages which mentioned react-native as devDependencies. why they do that?
If it's required for the app to work, you should specify it as a dependency in your package.json.
If it's required, but the user will always have react-native available (e.g. if your library is being used as part of a larger react-native project) you can set it in peerDependencies. This means your app needs it to work, but it doesn't automatically bundle react-native with your code.
My react app was created with create-react-app and I added And Design following:
https://ant.design/docs/react/use-with-create-react-app
I even customized some less vars using:
https://ant.design/docs/react/use-with-create-react-app#Customize-Theme
Now, I ejected my app but everything stopped working.
EDIT1:
The first error is that after ejecting, the scripts configured in package.json no longer works, as described here:
https://github.com/ant-design/create-react-app-antd/issues/10
What are the steps to configure antd after ejecting create-react-app?
Thanks
You just need to run npm i react-scripts.
This will install the missing dependency you need to make this work.