Bootstrap module not found in react SPFX

Question

My node version - v16.13.0 and npm v - 8.1.0 ----- i have installed bootstrap 4 or bootstrap 5 but it gives me same error

Answer 1

You should import Css using import statement instead of require.

Try below code:

import * as React from 'react';
import { IBootstrapDemoProps } from './IBootstrapDemoProps';


import 'bootstrap/dist/css/bootstrap.min.css';

export default class BootstrapDemo extends React.Component<IBootstrapDemoProps, {}> {
  public render(): React.ReactElement<IBootstrapDemoProps> {
    return <div>
      
      <main className="form-signin w-100 m-auto">
        <form>
        
            <h1 className="h3 mb-3 fw-normal">Please sign in</h1>

            <div className="form-floating">
              <input type="email" className="form-control" id="floatingInput" placeholder="[email protected]"/>
                <label >Email address</label>
            </div>
            <div className="form-floating">
              <input type="password" className="form-control" id="floatingPassword" placeholder="Password"/>
                <label >Password</label>
            </div>

            <div className="checkbox mb-3">
              <label>
                <input type="checkbox" value="remember-me" /> Remember me
              </label>
            </div>
            <button className="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
            <p className="mt-5 mb-3 text-body-secondary">&copy; 2017–2023</p>
        </form>
      </main>

    </div>;
  }
}

I just added sample bootstrap template here. See output below.