Broken components after building Gatsby

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

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;