React not Rendering Imported Component

Question

I'm just starting out trying to build a react webpage and having issues getting my first component to render successfully. I've tried many json solutions and am wondering if it's just a syntax error in my code at this point. Any help would be appreciated.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);


reportWebVitals();

App.js

import './App.scss';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Layout from './components/Layout'


function App() {
  return (
    <>
     <BrowserRouter>
     <Routes>
      <Route path="/" element={<Layout />} />
     </Routes>
     </BrowserRouter>
    </>
  )
}



export default App;

components/Layout/index.js

import './index.scss';
//import Sidebar from '../Sidebar';

const Layout = () => {
    return (
        <>
        Hello
        </>
    )
}

export default Layout

package.json

{
  "name": "react-portfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.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",
    "proxy": "http://localhost:3000"
  },
  "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"
    ]
  }
}

Errors I'm receiving in the browser

Uncaught ReferenceError: browser is not defined
    at onScriptLoad (adblock-onpage-icon-cs.js:172:3)
    at adblock-onpage-icon-cs.js:183:2
onScriptLoad @ adblock-onpage-icon-cs.js:172
(anonymous) @ adblock-onpage-icon-cs.js:183
react.development.js:209 Warning: 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.
Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at useRef (react.development.js:1630:1)
    at BrowserRouter (index.tsx:151:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)```

I can't see where you imported React in your index.js file and it's being used — sulaimon-olaniran, Jun 28 '22 at 20:25
Can you also add your `index.html` file and how did you init this app? Did you use `create-react-app`? — g14u, Jun 28 '22 at 20:26
apologies, the import react statement was there, was an issue with the codeblock. — Mr. Hargrove, Jun 28 '22 at 20:28
try adding console.log(Layout) to the App.js component and check the console to see what gets logged — sulaimon-olaniran, Jun 28 '22 at 20:30
It is not working. I added the console.log and i'm getting quite a few invalid hook call errors. — Mr. Hargrove, Jun 28 '22 at 20:41
These are adblock errors in your logs, see https://stackoverflow.com/questions/33136226/active-adblock-plus-shows-weird-error-in-chrome-js-console — voice, Jun 28 '22 at 21:01
commented out all scss imports and removed adblock and nothing changed. — Mr. Hargrove, Jun 28 '22 at 21:03
Tried in edge, same result. I downloaded the react dev tools for the browser and looked at the component field and it's finding none. — Mr. Hargrove, Jun 28 '22 at 21:07
It has quite a bit less errors, but still showing the same errors found in the original post. — Mr. Hargrove, Jun 28 '22 at 21:11
All errors can be found in the original post. the hook call error is shown in the output about 4 times — Mr. Hargrove, Jun 28 '22 at 21:14
Removed all the browserrouter calls besides in index.js. used npm i -s react-router-dom inside my project folder and still the same errors. — Mr. Hargrove, Jun 28 '22 at 21:25
If your node version is above stable 16.15 then downgrade it to 16.15 — voice, Jun 28 '22 at 21:36
thanks for all your help. This led me to figure out that for some reason I had installed dependencies and whatnot in the wrong place when I first set this up. Just created a new project and did this same thing and it worked just fine. — Mr. Hargrove, Jun 28 '22 at 21:39

score 0 · Accepted Answer · answered Jun 28 '22 at 21:40

0

This was due to having installed dependencies accidently outside of the project folder. Set up a brand new project and installed everything successfully and was able to get it working successfully.

answered Jun 28 '22 at 21:40

Mr. Hargrove

519
1
6
26

score 0 · Answer 2 · answered Jun 28 '22 at 21:51

0

you just remove <BrowserRouter> from index.js or App.js

answered Jun 28 '22 at 21:51

Ramin6032

9
1

React not Rendering Imported Component

2 Answers2