React bootstrap CSS Unexpected Token - css

Question

I'm trying to use Bootstrap with a SSR React app. I installed several bootstrap npm packages, but when importing the css into a React component I get an unexpected token error. I made sure that I have css loaders in webpack, and from examples online it doesn't seem like I need to do anything other than importing the css into a component. I'm not sure what I'm doing wrong.
error:
C:\Users\aw030085\OneDrive - Cerner Corporation\Desktop\test2\myssr\node_modules\bootstrap\dist\css\bootstrap.min.css:6
*/:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:
SyntaxError: Unexpected token :
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)
at Module._compile (internal/modules/cjs/loader.js:664:28)
at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Object.newLoader [as .js] (C:\Users\aw030085\OneDrive - Cerner Corporation\Desktop\test2\myssr\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
package.json dependencies:
"dependencies": {
"bootstrap": "^4.4.1",
"compression": "^1.7.4",
"express": "^4.17.1",
"immer": "^6.0.2",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.12.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-toastify": "^5.5.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.9.0",
"#babel/node": "^7.8.7",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-transform-runtime": "^7.9.0",
"#babel/polyfill": "^7.8.7",
"#babel/preset-env": "^7.9.0",
"#babel/preset-react": "^7.9.4",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"css-loader": "^3.4.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^6.8.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-react": "^7.19.0",
"jest": "^25.1.0",
"nodemon": "^2.0.2",
"npm-run-all": "^4.1.5",
"serialize-javascript": "^3.0.0",
"style-loader": "^1.1.3",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"
}
webpack:
const path = require("path");
const webpack = require('webpack');
module.exports = {
entry: "./src/components/index.js",
output: {
path: path.resolve(__dirname, "public"),
filename: "[name].js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /(\.css)$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: {
extensions: [".js", ".jsx", ".json", ".wasm", ".mjs", "*"]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
},
}),
]
};
Header.js
import React from 'react';
import { Navbar, Nav} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
const Header = () => {
return (
<>
<Navbar bg="light" variant="light">
<Navbar.Brand href="/">Brand</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/world">World</Nav.Link>
</Nav>
</Navbar>
</>
)
}
export default Header;

Answer 1

Also you write you only use css bootstrap.js requires jQuery. So
npm install jquery#latest
might be the step you missed