1

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

Christian Aichner
  • 366
  • 3
  • 18
  • 1
    Did you try removing one by one each `import` in the `gatsby-browser.js` to check if one module is corrupted? – Ferran Buireu Sep 27 '20 at 12:02
  • I did, yes. I can use only bootstrap without the application failing. The official MDB documentation and other projects use this exact configuration too though, and theirs seems to work. – Christian Aichner Sep 27 '20 at 12:04
  • Did you removed your global styles in the `Layout` component? Check: https://mdbootstrap.com/articles/react/gatsby-mdb-react-quick-start-quide/ – Ferran Buireu Sep 27 '20 at 12:42

0 Answers0