Getting invalid hook call warning when using react-bootstrap

Question

I'm having issues with react-bootstrap, specifically whenever I try and use a react-bootstrap tag, like <Row></Row>, I'm getting the "Invalid hook call" error on my app.

I've run npm ls and these are the packages/versions I currently have installed:

[email protected] [email protected] [email protected] [email protected]

I've also followed the advice in the React documentation on this error and added logs to see if I've got duplicate copies of React, but the test is returning 'true' in the console.

Here's the package.json file in my project:

    {
  "name": "kanvaswebappr",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.1.3",
    "jquery": "^3.5.1",
    "merge": "^1.2.1",
    "oidc-client": "^1.9.0",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.4",
    "reactstrap": "^8.4.1",
    "rimraf": "^2.6.2"
  },
  "devDependencies": {
    "ajv": "^6.9.1",
    "cross-env": "^5.2.0",
    "typescript": "^3.7.5",
    "eslint": "^6.8.0",
    "eslint-config-react-app": "^5.2.0",
    "eslint-plugin-flowtype": "^4.6.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.18.3",
    "nan": "^2.14.1"
  },
  "peerDependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

As you can see, I've moved react and reactdom into peeDependencies and then run npm install, but that hasn't helped either.

My app is currently super basic because I'm just starting out/learning.

My index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './containers/App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

ReactDOM.render(
  <BrowserRouter basename={baseUrl}>
    <App />
  </BrowserRouter>,
  rootElement);

My App.js file:

import React, { Component } from 'react';
import './App.css';
import Layout from '../components/Layout/Layout';
class App extends Component {
    render() {
        return (
            <Layout>
                <strong>This content is going to be rendered as the props.children inside the Layout component.</strong>
            </Layout>
        );
    }
}
export default App;

My Layout.js file:

import React from 'react';
import Alert from 'react-bootstrap/Alert';
const layout = (props) => {
    return (
        <div>
            <div>
                This is the place for the navigation component.
            </div>
            <Alert>
                This is an alert—check it out!
  </Alert>
            <main>
                {props.children}
            </main>
        </div>
    )
}
export default layout;

If anyone is able to help I would be incredibly grateful!

Apologies, you're right, I used <Row> in my example but I had switched to using <Alert> in my code by the time I shared it. The issue is the same regardless. — Hannah Hayes
– Hannah Hayes, Commented Jun 7, 2021 at 6:24
Your component doesn't look like a component. Its name should start with uppercase. So, write this: const Layout = .... — Ajeet Shah
– Ajeet Shah, Commented Jun 7, 2021 at 8:32

Hannah Hayes · Accepted Answer · 2021-06-07 09:46:28Z

2

I fixed it myself after a bit more messing around this morning. Posting this here in case it's of any use to anyone else.

I'm building my React app as part of an asp.net solution and I had a node_modules folder at both solution level and in my actual React app/project. I'm very new to all this so I think I'd managed to install packages in both places and they were out of sync in terms of what was installed and version numbers. I ran npm update at both levels to bring everything up to date and then I ran npm link MyApp/node-modules/react from the solution folder just to make sure that React wasn't being duplicated (although I don't think it was).

All seems to be working now.

answered Jun 7, 2021 at 9:46

Hannah Hayes

3171 silver badge22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

segni · Accepted Answer · 2022-05-26 20:21:01Z

0

solved it by going into node modules folder to check the versions react and react-dom installations. then I changed those that were behind. actually i deleted the node modules folder.

edited May 26, 2022 at 20:21

answered May 26, 2022 at 20:20

segni

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Getting invalid hook call warning when using react-bootstrap

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related