Getting invalid hook call warning when using react-bootstrap - reactjs

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:
boostrap#4.6.0
react-bootstrap#1.6.1
react-dom#17.0.2
react#17.0.2
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!

Answer 1

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.

Answer 2

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.