I'm trying to build a React Components and Hooks Library.
When using hooks that depend on useEffect and the DOM, my components and hooks break when they come from inside the NPM published module. If i import them from inside my source directory they work fine.
Examples:
working, importing from inside project:
https://strooks-debug-working.vercel.app/
not working, importing from npm module.
https://strooks-debug-working-59iztjqwx-andrepadez.vercel.app/
github repo:
https://github.com/andrepadez/strooks-debug/
branch master: working
branch develop: not working
any help would be greatly appreciated as i have been struggling with this for two days straight...
Related
I have a mono repo project bootstrapped with lerna and one of the packages is a component library, let's call it packages/our-component-library.
This component library is used in another package which is a NextJS front end app, let's call it packages/our-frontend-stuff and one of the Component files there imports SomeComponent from our-component-library such as :
import SomeComponent from '#our-name-space/our-component-library'
Whenever there is a change in the component library(uses Storybook etc.) I have to do yarn build from the component library directory.
Inside of one of the components in 'packages/our-component-library' there is a select component from a react-select npm module, which doesn't show props and the weird thing if I copy-paste /src of the our-component-library package to packages/our-frontend-stuff/src/, it would start working and show the prop. I think the issue is related to react-select probably, but not sure. Appreciate hearing your thoughts
Note: this NextJS project uses typescript and the latest NextJS version 12
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.
Apparently, Dash in Python is built on top of React using React components for stuff. Does this mean that someone would need npm and React installed, or can they just use Dash components without having npm?
Also, if I have some React code, is there any way to integrate that into Dash without having React and npm be a dependency?
Yes, you can use Dash without installing React or npm. In order to use your own React code in Dash, you'd have to make custom components. You would need npm for that part, but a machine running Dash code that includes your custom components would not.
so after publishing package when i import it in local application then it's giving me
There are three common reasons you might be seeing it:
You might have mismatching versions of React and React DOM.
You might be breaking the Rules of Hooks.
You might have more than one copy of React in the same app.
after some googling i have checked with npm ls react command and it show me only 1 version available and i guess that's not an issue in case,hence i have change it to class based component to make it work.
So i would like to know is there any way to implement react hooks in npm module with webpack or any other way if possible ?
Is it possible to create a component, living in a single npm package, that would work in both React and React Native?
I have created two variations of a component (View vs div and so on), one for the web and one for react native. I could easily use a build script or something like preprocessor.js to build a react or react-native output of the library but is there a better way?
Have anyone had any luck building a component that you could simply npm install into a react or react native project and just have it use the correct implementation? Or would I have a problem where both the react and react-native dependencies would exist in my package.json? Thanks!