Problem compiling React-Bootstrap in SPFx Project

Question

I have installed react-bootstra[email protected] on my machine and included it in my project with 'import ~bootstrap/scss/bootstrap'.

When I run gulp serve I get the following error:

[13:46:14] Error - [webpack] 'dist':
./lib/webparts/mslHomePage/components/MslHomePage.module.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./lib/webparts/mslHomePage/components/MslHomePage.module.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(40:4) Missed semicolon
 @ ./lib/webparts/mslHomePage/components/MslHomePage.module.css 1:14-161
 @ ./lib/webparts/mslHomePage/components/MslHomePage.module.scss.js
 @ ./lib/webparts/mslHomePage/components/MslHomePage.js
 @ ./lib/webparts/mslHomePage/MslHomePageWebPart.js

This doesn't happen if I don't import react-bootstrap.

This is what I have installed:

[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- react[email protected]
+-- [email protected]
`-- [email protected]

I'm thinking that there is a problem with the bootstrap CSS that is getting picked up but I can't think what I can do about it.

Any suggestions?

Answer 1

I am sharing the steps that I did to add bootstrap to my spfx project

npm install bootstrap@4 --save 

In .ts file add the following with correct paths

import * as bootstrap from "bootstrap";
require('../../../node_modules/bootstrap/dist/css/bootstrap.css');
require('../../../node_modules/bootstrap/dist/css/bootstrap.min.css');

In config.json add the following

"externals": {
   
     
    "jquery": {
    "path": "node_modules/jquery/dist/jquery.min.js",
    "globalName": "jQuery"
    },
    "bootstrap": {
    "path": "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "globalName":"bootstrap"
    },
     
      "jqueryui": "node_modules/jqueryui/jquery-ui.min.js"
    },