I'm using bootstrap for a react project along with Yarn as package manager.
I stripped down the bootstrap package to only keep the modal component (and thus avoid unnecessary weight).
The issue is that whenever I'm adding a package in my project, it seems like the bootstrap package is rebuilt, adding back all the components I initially removed.
Is there a way to prevent the bootstrap package from rebuilding when even i'm doing a yarn install or a yarn add ?
Thanks for your help.
In the docs you can find info about how to import individual components:
You should import individual components like: react-bootstrap/Button
rather than the entire library. Doing so pulls in only the specific
components that you use, which can significantly reduce the amount of
code you end up sending to the client.
// Import single component
import Button from 'react-bootstrap/Button';
// or less ideally (imports the entire library)
import { Button } from 'react-bootstrap';
Other way would be forking the project to your personal repository and creating a version for your specific needs. But later would be harder to upgrade.
Related
Ok my issue is when I use React and Material UI I get the error posted in the picture.
My code is as follows:
import React from "react";
import MenuIcon from "#material-ui/icons/Menu";
function Header() {
return (
<div className="header">
<h1>I am a header the beginnings of a website</h1>
<MenuIcon ></MenuIcon>
</div>
);
}
export default Header;
I have followed the error to the location and it is:
export { default } from './SvgIcon';
I have went through the complete setup again to see if I missed anything. However everything is just up to date. When I remove the import MenuIcon from "#material-ui/icons/Menu"; and remove the MenuIcon> from the Header my site shows.
I am lost on this issue. I have tried locating what it means by not found in react. I have been using npm to install everything.
I have installed every npm install on the https://mui.com/material-ui/getting-started/installation/ website and I am at a loss.
What am I missing?
Update
Ok after starting a new React and JS I still get the same error. I can add anything to the website I am building as anything except Material UI.. I am beginning to wander if Material UI is the problem and not what I am doing.
I can add icons with other routes. However Material UI and following the documentation and their samples still don't show the icons. It just makes the entire website blank.
When I remove all references to Material UI the website shows again. So I am wondering if anyone else has ran into this. I am using all update methods with Visual Code, Node.js and everything used in the website is up to date.
So I am wondering if it's a compatibility issue?
Did you install the icons? https://mui.com/material-ui/icons/
npm install #mui/icons-material
The code looks right.
Are you sure, that you installed the mui libary in the right folder?
The src, public and node_modules folder should be all in the same directory.
Maybe delete the node_modules folder, package.json, package-lock.json and install the dependencies again.
I think a better alternative to the MUI Icons is Iconify. You should definitly check it out.
https://iconify.design/
You can easily import icons with somethink like:
<Iconify icon='eva:heart'/>
Ok so after further analysis I have found the issue. When I was installing the npx install method Somehow it was misconfigured. When I CD into the file name it was not going to root project.
After I made sure i was in the root project and I installed the npm again everything is working fine.
Solution:
cd file-name
then you do all the installation. For some reason when I was installing the libraries it was installing outside of cd file-name
I'm trying to share a React component I've created through a local hosted npm repo.
To do that I created the React component with typescript, transpiled it to js and published the resulting code to the repo. But when I install this package in an existing project (a basic create-react-app project with typescript) and try to use that component - My app tried to compile it for a few minutes and I fail to load that component. Sometimes if I wait a few minutes I see this error - although the component was tested and works:
Error: Invalid hook call. Hooks can only be called inside of the body
of a function component. This could happen for one of the following
reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug
and fix this problem.'
I've copied the same component to be embedded in the app and not installed by npm - it worked. I tried to strip the component to the bare minimum - it still takes a long time.
The steps to reproduce are easy:
I've shared the component in github:
https://github.com/ymoran00/example-stackoverflow-react
To build it you need to run npm install and then npm run build.
the result will be generated in the lib folder.
You can then go into the lib folder and run:
npm link
Then create a new typescript create-react-app project:
npx create-react-app my-app --template typescript
Go inside it and run:
npm link login-component
This will install the linked package.
Now go to App.tsx and import the package:
import LoginContainer from 'login-component/LoginContainer';
And use it in the App:
<LoginContainer onLogin={()=> {alert('success')}}/>
Run the app with npm start.
The App will open the browser - but nothing will load. It's kind of stuck on build or whatever - I don't know what happens there. If you'll take a look at the component you'll see it's quite a basic one with Material-UI.
The first place that I looked was your package.json file because it most likely that you are dealing with reason #1:
You might have mismatching versions of React and the renderer (such as React DOM)
I see that you are including react and react-dom as dependencies for your component. You should move these from dependencies to peerDepenedencies. You likely want to move #material-ui/core and #material-ui/icons to peerDependencies as well. Right now React is being bundled with your component and your component uses its own React version rather than the one in your app. You want to make it so that projects that use your component are expected to include React on their own.
For more information about why you should use peerDependencies, see this question:
What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?
It seems that the main problem I had in the process is using npm link.
It causes problems when combined with hooks - that's why I get this hooks error.
See also in this thread:
https://github.com/facebook/react/issues/13991
So instead of using npm link I've started using npm-sync and it seems to solve the problem.
I am developing a component and (programmatically) copy its content to node_module/component using hard links (I then import component using import component from "component").
Unfortunately, create-react-app project is not hot reloaded when node_module/component is updated.
Is it possible to fix this?
So, after many experiments, I noticed most changes in node_module do trigger a hot reload (hard links should be avoided).
I opened issues on the GitHub repo of chokidar and create-react-app.
Material-UI is a very big package and I only want to use one component of it.
Is there a way to install a package that only contains the component I want to use?
e.g.
use
import Button from '#material-ui/core/Button';
But only have in your package.json something like #material-ui/core/Button.
The reason I want this is to have a small node_modules.
you can install each component of Material-UI via bit.dev collection:
https://bit.dev/mui-org/material-ui
Here is the Button component for example:
https://bit.dev/mui-org/material-ui/button
I exported the project to bit.dev and I'm trying to keep it up to date as much as possible.
You can install and use the isolated material components here:
bit.dev
Unfortunately, you can't install the separate components from the Material UI. The only way is to install the #material-ui/core directly.
I'm developing a react web application. I Want to use this package for making a wordcloud. But it is not a react component. How can I use it in my application? Thanks All.
Quite straight forward actually, please take a look at the sandbox I've setup to show the same - https://codesandbox.io/s/9435woonpy
Explanation:
Add wordcloud as a dependency to your project - npm i --save wordcloud
In case you're wondering how I got the name of the package, just take a look into the project's package.json - https://github.com/timdream/wordcloud2.js/blob/gh-pages/package.json and look at the name attribute; this is the name with which the project is available in NPM and you confirm this by also looking at the author on the npm page
import 'wordcloud' into the file in which you're going to use it
Have an empty canvas ('my-canvas') into which you will load the wordcloud into
On componentDidMount, invoke the wordcloud api to render the wordcloud into the DOM