CODEWITHSUNDEEP
reactjswebpackgatsbyreact-three-fiber
untitled-ux
untitled-ux

Reputation: 11

WebpackError: #95313 Gatsby Building failed

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"
    ]
  }
}

Upvotes: 1

Views: 2318

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29335

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

Upvotes: 1

Related Questions