Using Electron with Reactstrap causes error: Uncaught SyntaxError: Unexpected token :

Question

When attempting to use the reactstrap package in an Electron boilerplate app by first installing the npm packages

npm install --save reactstrap react react-dom
npm install bootstrap --save

then importing the Bootstrap CSS in /app/renderer/app.js

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

we are getting the error in the JS console

Uncaught SyntaxError: Unexpected token :

Removing the import statement for bootstrap CSS removes the error, but the app ends up with no Bootstrap CSS styling.

Question: How can we get reactstrap to work properly in an Electron app?

Can you check if you have css loader configured in your webpack? — aks
@aks I think the boilerplate code does not use webpack. Having not setup webpack from scratch before, is there a simpler way than installing webpack and configuring css loader? — Nyxynyx
I don't know of a way to do this easily. The best route would be to configure the current setup to allow for css. What is it using? Gulp? Here is one useful link stackoverflow.com/questions/35879290/… — aks
@aks I believe it is not using gulp as well. The boilerplate code was created using electron builder. — Nyxynyx

ZedTuX ZedTuX · Accepted Answer · 2021-02-27T20:27:46

The basic electron setup doesn't understand CSS, therefor it fails at loading a CSS file.

Instead you could add the following line into the <head> section of the .index.html file:

<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" />

The electron app (a special Chromium web browser instance) will load the CSS.