TypeError: Cannot read properties of null (reading 'useState')

[sudhar2124]

when the "MultiSelectComponent" component calls
it throws error
Uncaught TypeError: Cannot read properties of null (reading 'useState')

[github-actions]

Welcome! Thanks for opening your first issue.

[ananduremanan]

Hello @sudhar2124 , this repository serves as an example of how to create a component library using React. The components included are intended for demonstration purposes only.

Although I will check the error and let you know, feel free to ask if you have any doubts. 🙂

[ananduremanan]

when the "MultiSelectComponent" component calls it throws error Uncaught TypeError: Cannot read properties of null (reading 'useState')

@sudhar2124 , I couldn't find any errors, Here is a minimal example of how to use the Multi Select Dropdown.

import { useEffect, useState } from "react";
import { MultiSelectDropdown } from "building-blocks/src/blocks/multi-select";

export default function App() {
  const [data, setData] = useState([]);

  const fields = { text: "Name", value: "Code" };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          "https://api.npoint.io/baab7e29aec56b6d27d9"
        );
        if (!response.ok) {
          throw new Error("Failed to fetch data");
        }
        const fetchedData = await response.json();
        setData(fetchedData);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Fetch Data Example</h1>
      <MultiSelectDropdown dataSource={data} fields={fields} />
    </div>
  );
}

[sudhar2124]

I'm facing the same issue for the multi-select.
The component that contains react features like ("useState", "useEffect") that components throw an error.
TextBox and CheckBox works correctly.

[sudhar2124]

Hi @ananduremanan,
I have followed your instructions to build the package.

I have troubleshooted the issue, i am thinking the issue may be in two places

1. react and react-dom package has been wrongly exported in my packaging solution
2. Otherwise, where the importing these build package. There I have correctly import this package.

Do you have faced any issue during link the package.

Could you upload the example application code which you have linked these package?

[ananduremanan]

Mmm…. It’s actually weird that I couldn’t reproduce the issue… could you comment your node version and package.json? Linking the project is pretty simple. Run npm link in your host project and use it in the remote as npm link <your remote project name>

[ananduremanan]

Hi @ananduremanan, I have followed your instructions to build the package.

I have troubleshooted the issue, i am thinking the issue may be in two places

1. react and react-dom package has been wrongly exported in my packaging solution
2. Otherwise, where the importing these build package. There I have correctly import this package.

Do you have faced any issue during link the package.

Could you upload the example application code which you have linked these package?

I linked it in a fresh react js application(bootstrapped with vite not create react app)

[sudhar2124]

Mmm…. It’s actually weird that I couldn’t reproduce the issue… could you comment your node version and package.json? Linking the project is pretty simple. Run npm link in your host project and use it in the remote as npm link <your remote project name>

Hii @ananduremanan
Please find the details which you requested.
Package.json
{
"name": "dummy",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

and my node version is v18.17.1