WebpackError: #95313 Gatsby Building failed - reactjs

Question

I looked up many threads but i couldn´t find a related thread to this so I´m asking here.
I basically added a GLTF file (which i declared in Sushi.jsx) in my gatsby site using the #drei dependency.
On my local development server everything works fine: no errors with gatsby develop or gatsby build. But on my ubuntu droplet it always throws this WebpackError: #95313.
Im not sure if this is related to the 3D Model or it is just a converting error from #drei itself..
ERROR #95313
Building static HTML failed
See our docs page for more info on this error: https://gatsby.dev/debug-html
12 | }
13 |
> 14 | const createImageUrl = (blob, type) => URL.createObjectURL(new
Blob([fixBinary(atob(blob))], {
| ^
15 | type
16 | }));
17 |
WebpackError: ReferenceError: Blob is not defined
- base64.js:14
node_modules/drei/helpers/base64.js:14:1
- cloud.base64.js:4
node_modules/drei/assets/cloud.base64.js:4:32
- Cloud.js:1
node_modules/drei/Cloud.js:1:1
- index.js:1
node_modules/drei/index.js:1:1
- Sushi.jsx:1
src/components/Sushi/Sushi.jsx:1:1
- Hero.jsx:1
src/components/Hero/Hero.jsx:1:1
- App.jsx:1
src/components/App.jsx:1:1
- index.js:1
src/pages/index.js:1:1
My dependencies are down here:
"dependencies": {
"bootstrap": "^4.5.0",
"drei": "^2.2.21",
"gatsby": "^2.23.7",
"gatsby-image": "^2.4.7",
"gatsby-plugin-manifest": "^2.4.12",
"gatsby-plugin-offline": "^3.2.11",
"gatsby-plugin-react-helmet": "^3.3.4",
"gatsby-plugin-sass": "^2.3.4",
"gatsby-plugin-sharp": "^2.6.12",
"gatsby-source-filesystem": "^2.3.12",
"gatsby-transformer-sharp": "^2.3.16",
"nanoid": "^3.1.10",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-github-btn": "^1.2.0",
"react-helmet": "^6.1.0",
"react-native-animated-emoji": "^0.1.4",
"react-reveal": "^1.2.2",
"react-scroll": "^1.7.16",
"react-spring": "^8.0.27",
"react-three-fiber": "^5.1.4",
"react-tilt": "^0.1.4",
"react-typewriter-effect": "^1.0.2",
"three": "^0.122.0",
"typewriter-effect": "^2.17.0"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.4",
"husky": "^4.2.5",
"lint-staged": "^10.2.11",
"prettier": "^2.0.5"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.+(js|jsx)": [
"eslint --fix",
"git add"
],
"*.+(json|css|md)": [
"prettier --write",
"git add"
]
}
}

Answer 1

According to:
Node.js v15.0.1. on the droplet Node.js v12.19.0. on my local system
This is causing mismatching dependency versions. What is running and working under v12.19.0 apparently is not in the v15.0.1.
Use the same Node version (at least the major version) in both environments. If the one in your local machine is working, use the v12.19.0 on both sides. Alternatively, you can use the v15.0.1 in your local machine, fix the issue, and push the fix.
Use the NVM (Node Version Manager) to help you with using Node versions:
nvm install 12.19.0
nvm use 12.19.0