Invalid hook call - React - reactjs

Developing teams application using react - I am trying to use Ag grid react to design sample table. I have added code and while running it it throws errors as follows.
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: 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.
Below the code snippet
import React from 'react';
import {AgGridReact} from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
export default function Project() {
return (
<div className="ag-theme-alpine" style={{height: 400, width: 600}}>
<AgGridReact>
</AgGridReact>
</div>
)
};

Error is due to the duplicate version of react in the application folder - deleting the node_module folder and ran npm install solved my issue.

Related

Creating NPM project both for Vue and React. How to import a Vue and React Hook into index.js with error

Anyone knows how I can import each of below function in Vue and React without an error?
Right now I am getting an error if I am importing vueFetch and reactFetch.
So if am importing vueFetch into a Vue project, I am getting an error for React that React is not defined and the same applies if I import reactFetch (Vue ref not defined).
import { vueFetch } from './composables/vue/vue-fetch';
import { reactFetch } from './composables/react/react-fetch';
export { vueFetch, reactFetch };
I am trying to make a Vue and React NPM package, but I only have one index file, and I need to import both Hook into the single index file. So I do not need to create 2 packages.
here is the link to the package: https://www.npmjs.com/package/use-lightweight-fetch

why the custom hook not working properly when I initialise npm?

Yesterday I developed a react custom hook for making our react application's title as dynamic and published in npm. It is my first attempt in npm contribution. So I faced so many errors. And one error not fixed after my well effort. The problem is as below:
The hook using useRef, and useEffect.
The version of react used by the hook is 18.2.0
dependencies in this format:
"dependencies": {
"react": "^18.2.0"
}
I used the hook like this:
import React from "react";
import useTitle from "./hook/react-title-hook";
// import useTitle from "./title";
// import useTitle from "react-dynamic-title";
import { useNavigate } from "react-router-dom";
function App() {
const navigate = useNavigate();
useTitle("Home");
return (
<div className="App">
<header className="App-header">
app
</header>
<h1
onClick={() => {
navigate("/somting");
}}
>
somithing
</h1>
</div>
);
}
export default App;
There are 4 scenarios:
The hook has not a special package.json nor node_modules and it is using what the whole project uses in common. Then, there is no problem. it works smoothly. (It is like second useTitle of the above code)
The hook installed from npm and the version of react in main project is same as the version of hook 18.2.0 , so it would not install the dependencies specially. Then, there is no problem. It works smoothly. (It is like third useTitle of the above code)
The hook has special package.json and node_modules (because, we want to initialise and mention the dependencies when we publish our package). (It is like first useTitle of the above code) Then, the app not render and throw these two errors:
Invalid hook call. Hooks can only be called inside of the body of a function component. (actually the hook is inside of the component)
Uncaught TypeError: Cannot read properties of null (reading 'useRef'). (the first line of hook is useRef, so the error is like this. When I changed and make the useEffect the error is like cannot read properties of null (reading 'useEffect'))
The hook installed into a project that the version of react used by that project is not matching of the version of the hook. Then, the app throw the error as above.
So, this is the problem. The link of the hook is this: react-dynamic-title
How to fix it, Thank you in advance.

Re-exporting MUI components from React component library

I'm setting up a component library with React, Storybook, Typescript and Material UI. One of the main targets of the library is to re-export components that are imported from MUI (with a bit of config on top of them). I stumbled upon an issue where one of the components is not being rendered as intended when used in another React app. The component I am talking about is the Stepper component. Below is what I have now:
Stepper.tsx
import Stack from '#mui/material/Stack';
import MUIStepper, { StepperProps } from '#mui/material/Stepper';
const Stepper = (props: StepperProps) => {
return (
<Stack sx={{ width: '100%' }} spacing={4}>
<MUIStepper {...props}></MUIStepper>
</Stack>
);
};
export default Stepper
This is going to be built as a library using rollup.
I am not going to paste the entire rollup config here, but these are the plugins the config is using:
import babel from '#rollup/plugin-babel';
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import filesize from 'rollup-plugin-filesize';
import autoprefixer from 'autoprefixer';
import typescript from "rollup-plugin-typescript2";
import dts from "rollup-plugin-dts";
After the process of building and publishing the library to an npm registry, I am trying to use it in some other React application, but some of the styles/internal components of the Stepper are totally missing (ex: active step css, step connectors etc.). The usage of the Stepper component is the same as in the official docs and it works perfectly with the original Stepper component.
Can you think of any configuration I am missing? It looks like something is lost along the way while building the library, but not sure what. Either that or the children components do not receive props properly.
I can provide further insight into this if necessary, but I didn't want to clutter the post anymore that it already is.
The Stepper component expects two or more Step components as children. To fix this, you need to pass props.children to the Stepper component.
import Stack from '#mui/material/Stack';
import MUIStepper, { StepperProps } from '#mui/material/Stepper';
const Stepper = (props: StepperProps) => {
return (
<Stack sx={{ width: '100%' }} spacing={4}>
<MUIStepper {...props}>{props.children}</MUIStepper>
</Stack>
);
};
export default Stepper;
Answering my own question here:
It looks like this behavior si encountered whenever we deal with components that use the Context API internally. Somehow, the context gets messed up if we use the root component from our library and other descendant components from MUI. Simply importing and re-exporting descendant components and using them from owr library as well fixes this issue, although I would want to avoid that. Until then, I created an issue on the github page to see if it is a bug on their side or just an intended behavior which affects my case here.
All in all, it is not really a rollup config issue. Transpilation and bundling work as intended.
Issue link: https://github.com/mui/material-ui/issues/33320

Error using React Select Library Select Component: Invalid hook call

I am working on a React project, and I am utilizing the react-select library. However, I am unable to use it as it crashes my app. This is probably a very simple mistake, but I can't seem to figure it out. Any help is greatly appreciated!
Here is the error message:
Uncaught 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
Here is the relevant code:
import React, { useState, useEffect, Component} from 'react';
import Select from 'react-select'
export default function Card(props) {
return (
<Card>
<Select />
</Card>
);
}

Why is atomize not working with Gatsby JS (react)?

I'm trying to use Atomize (https://atomizecode.com/) with Gatsby JS (https://www.gatsbyjs.org/) and while it is successfully installed, the atomize components are not being rendered to the page.
I am trying to import a button to start "Hey", and while it renders something it is not the standard button component. Also, even though the button component is imported, I get the warning that reads it is not being used.
I am wrapping atomize around gatsby app by the following way:
import React from "react"
import { StyleReset } from "atomize"
export const wrapRootElement = ({ element }) => (
<>
<StyleReset />
{element}
</>
)
Did you install styletron toolkit?
According to their docs it's a dependency and looking at their package.json it's defined under peerDependencies which means it won't get installed along with atomize.
Styletron's docs sugggets using gatsby-plugin-styletron for Gatsby.
Hope that helps.

Resources