Broken components after building Gatsby - reactjs

Question

The site loses all functionalities after building it. In develop mode everything works fine, but when I build the website it looks like all scripts are missing. Bootstrap (Carousel DropDowns) are not responding, leflet map and background image not loading and react-multi-carousel do not work. I don't see any errors in the browser console, of course I ran gatsby clean before building. I uploaded the project to netlify. Below I am enclosing the json package:
{
"name": "Website",
"private": true,
"description": "Description",
"version": "0.1.0",
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"bootstrap": "^4.6.0",
"gatsby": "^3.2.1",
"gatsby-background-image": "^1.5.0",
"gatsby-image": "^3.2.0",
"gatsby-link": "^3.2.0",
"gatsby-plugin-image": "^1.2.0",
"gatsby-plugin-postcss": "^4.2.0",
"gatsby-plugin-react-helmet": "^4.2.0",
"gatsby-plugin-react-leaflet": "^3.0.0",
"gatsby-plugin-recaptcha": "^1.0.5",
"gatsby-plugin-robots-txt": "^1.5.5",
"gatsby-plugin-sass": "^4.2.0",
"gatsby-plugin-sharp": "^3.2.0",
"gatsby-plugin-sitemap": "^3.2.0",
"gatsby-remark-images": "^4.2.0",
"gatsby-source-filesystem": "^3.2.0",
"gatsby-transformer-remark": "^3.2.0",
"gatsby-transformer-sharp": "^3.2.0",
"gbimage-bridge": "^0.1.2",
"leaflet": "^1.7.1",
"node-sass": "^5.0.0",
"postcss": "^8.2.9",
"react": "^17.0.2",
"react-animations": "^1.0.0",
"react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-leaflet": "^3.1.0",
"react-multi-carousel": "^2.6.2",
"react-scripts": "^4.0.3",
"styled-components": "^5.2.3"
},
"devDependencies": {
"http-proxy-middleware": "^1.1.0",
"netlify-lambda": "^2.0.3",
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1"
}
}

Answer 1

There's not much debug in the question however, to me, it seems that you are using some dependencies outside React's scope, which may potentially block React's hydration process, which may explain the problem described. For example, using Leaflet instead of React's Leaflet or (depending on its implementation) Bootstrap instead of React's Boostrap.
You should be able to change all React-unfriendly modules to React's ones without too much effort and that should fix your problems.
Keep in mind that if your project "work in develop and breaks in build" doesn't mean that your project work or stops working, it just means that is working under certain and specific circumstances. Basically, and summarizing (to avoid extending the answer), gatsby develop uses the browser as an interpreter, where there are, among other things, global objects like window or document. However, gatsby build occurs in the Node server, where at the build time, there are not global objects because there are not even created yet, that the main reason why you may face a different behavior between both scenarios but doesn't mean that the project stopped working magically.
You can read further details in the Overview of Gatsby Build Process.
Another option, linked with blocking React's hydration, is that some component may be blocking that process because of its own behavior. Be careful when using global objects like window or document (or when importing modules that uses it), they use should be always be wrapped inside the following condition, as you can see from the docs:
When referencing window in a React component.
import * as React from "react"
// Check if window is defined (so if in the browser or in node.js).
const isBrowser = typeof window !== "undefined"
export default function MyComponent() {
let loggedIn = false
if (isBrowser) {
window.localstorage.getItem("isLoggedIn") === "true"
}
return <div>Am I logged in? {loggedIn}</div>
}
Or when requiring a module:
// Requiring a function causes an error during builds
// as the code tries to reference window
const module = require("module") // Error
// Wrap the require in check for window
if (typeof window !== `undefined`) {
const module = require("module")
}
The same approach can be done using loadable components as the docs suggests but without providing any piece of code it's impossible to guess what should be its implementation.

Answer 2

I solved the problem by wrapping the leaflet maps in Loadable
import React from 'react';
import Loadable from "#loadable/component"
const LoadableMap = Loadable(() => import("./map.js"))
export default LoadableMap;