Gatsby ReactJS importing CSS from modules infinite loading

Question

Currently I'm trying to start a new Gatsby ReactJS project.

The page loads without the use of CSS. But as soon as I enter css external CSS files in gatsby-browser.js the page has infinite loading and just displays a blank white screen.

(CSS imported from modules - importing these files has always worked with pure ReactJS.)

gatsby-browser.js

import "@fortawesome/fontawesome-free/css/all.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";

versions

"react": "^4.14.1",
"mdbreact": "^4.27.0",
"gatsby": "^2.24.63",

my basic gatsby config

module.exports = {
  plugins: [
    "gatsby-plugin-sass",
    "gatsby-plugin-react-svg",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
  ],
};

I did try to remove one at a time and it seems like I can only load in bootstrap-css-only/css/bootstrap.min.css without failing.

Any idea why this is happening?

Best regards, Chris