I'm building a React component library but I'm having issues every time I want to use any react hook inside the library, and try to use in a Vite app, to live test the components.
The folder structure is set up like this:
- apps
- playground // where I'm testing the library
- packages
- react
- core // the library
- Input // the component using the hook
- components
I'm using pnpm as a package manager so I already tried pnpm link and the file: protocole. It always shows the same error:
Warning: 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:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. 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.
Since I'm sure I'm not breaking the Rules of Hooks, and both, library and app, are using the same version of react and react-dom, I think the error is related to the third option.
For reference, this is the component from the library I'm trying to use:
import React from "react";
import { HTMLAttributes } from "react";
const Root = (props: HTMLAttributes<HTMLDivElement>) => {
/** Rendereing */
const renderedInput = React.useMemo(() => <input />, [props]);
return <div data-input-otp-container>{renderedInput}</div>;
};
export { Root };
And this is the package.json file from the library:
(I've tried so many things so it's a mess)
{
"name": "react-components-core",
"version": "0.0.1",
"main": "./dist/cjs/index.js",
"types": "./dist/cjs/index.d.ts",
"module": "./dist/esm/index.js",
"exports": {
".": {
"require": {
"types": "./dist/cjs/index.d.ts",
"default": "./dist/cjs/index.js"
},
"import": {
"types": "./dist/esm/index.d.ts",
"default": "./dist/esm/index.js"
}
}
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"peerDependencies": {
"react": "file:../../../apps/playground/node_modules/react",
"react-dom": "file:../../../apps/playground/node_modules/react-dom"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"typescript": "^5.3.3"
},
"license": "ISC",
"dependencies": {
"clsx": "^2.1.0"
},
"pnpm": {
"overrides": {
"react": "file:../../../apps/playground/node_modules/react",
"react-dom": "file:../../../apps/playground/node_modules/react-dom"
}
}
}