Bug: Unable to use hooks

[prathamVaidya]

Steps to Reproduce:

1. Clones and installed deps.
2. Tested storybook and created build. (Working)
3. Tested by installing and importing Button component in new react cra project. (Working)
4. Modified the original Button component and added useState hook.
5. Tested component in storybook (Working)
6. Created Build (Build created without errors successfully)
7. Installed again in CRA project.
8. CRA App Crashes after starting. (Not Working)

Expected Behavior:

1. Should also work with hooks.

Screenshots:

This issue usually happens when multiple react versions are conflicting.

I also tried removing react and react-dom from devDependencies and only keeping them in peer deps. (Got same error, didn't worked)

Using state in a react button component seems a very basic functionality to me so it should not give any errors. I maybe missing something obvious.

This is the modified code of Button.tsx component:

import React, { useState } from "react";
import "./Button.scss";

export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>{
  label: string;
}

const Button = ({label, ...others}: ButtonProps) => {
  const [state, setState] = useState(label)
  return <button {...others} onClick={() => setState("Clicked")}>{state}</button>;
};

export default Button;

[prathamVaidya]

After further investigation I found that this is happening only when installing package locally through file and if node_modules folder exists in the extension package.

If we remove node_modules as well then the react error is fixed and the only error is that the peerDependencies cannot be installed automatically. So in your case "antd": "^5.4.0",. This dependency was not installed in my project so it gave me error for missing dependency when i started the project. I am still unsure why peerDeps are not installing even when they are mentioned in devDeps as well.

[windmaomao]

So the real cause as someone pointed out https://stackoverflow.com/questions/76234908/why-i-get-this-error-cannot-read-properties-of-null-reading-usestate-on-my.

It's the duplication of two node_modules, need to delete one.