Search code examples
javascriptreactjsreact-bootstrap

React-bootstrap components breake my whole page

I'm developing a React frontend with react-bootstrap. React is working fine, but when I use any react-bootstrap component in any page, Chrome just shows a fully blank page.

I think the problem might be in the index.html. I have this in the <head> tag, but no alert showing, I'm not sure if it should.

<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script>

<script>var Alert = ReactBootstrap.Alert;</script>

Anyway, here's all the other code I consider relevant:

This is my index.js:

import React from 'react';
import {createRoot} from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>
);

reportWebVitals();

This is my App.js working fine, Chrome shows the text:

import React from 'react';

export default function App() {
    return (
        <div className="App">
            <p>This is some text.</p>
        </div>
    );
}

This is my App.js not working. It doesn't give any error, just a completely blank page, not even the text shows.

import React from 'react';
import { Button } from 'react-bootstrap';

export default function App() {
    return (
        <div className="App">
            <p>This is some text.</p>
            <Button variant="primary" type="button" value="Input" />
        </div>
    );
}

This happens with any bootstrap component, not only the Button (I've tried a few). I'm new to React, so any kind of help is welcome.

EDIT: Here's a screenshot of the Chrome console when the blank page problem happens.

Chrome console

EDIT 2: Here's my package.json:

{
  "name": "asignacionesfrontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "http-proxy-middleware": "^2.0.4",
    "jest-editor-support": "^30.0.2",
    "react": "^18.0.0",
    "react-bootstrap": "^2.2.3",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "sass": "^1.50.0",
    "sweetalert": "^2.1.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "set HTTPS=true&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prestart": "node aspnetcore-https && node aspnetcore-react"
  },
  "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"
    ]
  }
}
Solution

  • I solved it. I needed to actually install all the packages with npm in my project folder. I had them installed in my Windows user folder and globally, but not in my project.

    Basically, just open a cmd in your project folder and run:

    C:\SomePath\MyReactProject>npm install react-bootstrap bootstrap