Quick Start Frontend - Dependency throws an exception

[dev-sareno]

Bug report

Describe the bug

An [dependency] exception occurred when running the fresh installed Quick Start.

I followed the quick start guide from this link.

The backend endpoint (http://localhost:1337/admin/) runs without any issue; I can create an Admin account, Users, Articles, etc. The frontend however (http://localhost:8000/), the homepage was successfully loaded but if starts to scroll or click some article, the app crashes and the error says

C:\Users\xxxxx\Documents\Projects\xxxxx\strapi\my-project\frontend\node_modules\gatsby-cli\node_modules\yoga-layout-prebuil
t\yoga-layout\build\Release\nbind.js:53
        throw ex;
        ^

TypeError: Cannot read property 'bitmap' of undefined
    at Potrace._processLoadedImage (C:\Users\xxxxx\Documents\Projects\xxxxx\strapi\my-project\frontend\node_modules\potrace
\lib\Potrace.js:1002:35)
    at Jimp.<anonymous> (C:\Users\xxxxx\Documents\Projects\xxxxx\strapi\my-project\frontend\node_modules\potrace\lib\Potrac
e.js:1048:14)
    at Timeout._onTimeout (C:\Users\xxxxx\Documents\Projects\xxxxx\strapi\my-project\frontend\node_modules\@jimp\core\src\i
ndex.js:223:9)
    at listOnTimeout (internal/timers.js:557:17)
    at processTimers (internal/timers.js:500:7)

Steps to reproduce the behavior

Install using the quick start sample
Command:

npx create-strapi-starter my-project gatsby-blog

or

Manual run:

# Backend
cd my-project/backend && npm run develop

# Frontend
cd my-project/frontend && yarn develop

System

NodeJS version: v14.17.1
Npm version: 6.14.13
Yarn version: 1.22.10
OS: Windows 10/Ubuntu-20.04 WSL

my-project/frontend/package.json (unmodified)

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "@blocks/kit": "0.0.28",
    "@emotion/core": "^10.0.28",
    "babel-preset-gatsby": "^1.3.0",
    "gatsby": "^3.3.0",
    "gatsby-plugin-image": "^1.2.1",
    "gatsby-plugin-manifest": "^3.3.0",
    "gatsby-plugin-offline": "^4.2.0",
    "gatsby-plugin-react-helmet": "^4.2.0",
    "gatsby-plugin-sharp": "^3.3.0",
    "gatsby-source-filesystem": "3.3.0",
    "gatsby-source-strapi": "^1.0.1",
    "gatsby-transformer-sharp": "^3.3.0",
    "moment": "^2.26.0",
    "path-browserify": "^1.0.1",
    "process": "^0.11.10",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-markdown": "^4.3.1",
    "react-moment": "^0.9.7"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "2.x",
    "@typescript-eslint/parser": "2.x",
    "babel-eslint": "10.x",
    "eslint": "6.x",
    "eslint-config-prettier": "^6.11.0",
    "eslint-config-react-app": "^5.2.1",
    "eslint-plugin-flowtype": "4.x",
    "eslint-plugin-import": "2.x",
    "eslint-plugin-jsx-a11y": "6.x",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "7.x",
    "eslint-plugin-react-hooks": "2.x",
    "prettier": "^2.1.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop --open",
    "dev": "npm run develop",
    "lint": "eslint ./src",
    "lint:fix": "eslint ./src --fix",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

Expected behavior

The quick-start frontend should run without any errors.

Screenshots

[derrickmehaffy]

@remidej / @markkaylor is there any reason why we need to keep this issue in this repo instead of transferring it to the proper one?

[dev-sareno]

Update

Seems like the issue is only occurring in gatsby-blog starter as I tried another such gatsby-catalog and it runs without any error.

Strapi version: v3.6.5

[derrickmehaffy]

Transferring issue to the proper repo

[ahmadf20]

Having the same problem 😥

[Orlandohmor84]

Also having the same problem.

[markkaylor]

I haven't been able to reproduce yet but I did find this issue which might be helpful: gatsbyjs/gatsby#12552, and this one which links to two others gatsbyjs/gatsby#20377.

The issues are a bit old but maybe there is something useful in there. Looks like it is related to traced svg which we use as a placeholder here:

strapi-starter-gatsby-blog/starter/src/pages/article/{StrapiArticle.slug}.js

Line 20 in 0a08726

gatsbyImageData(layout: FULL_WIDTH, placeholder: TRACED_SVG)

I'm curious if by removing placeholder: TRACED_SVG it will resolve the issue. Still looking...

[UrologyUnbound]

Any updates on this issue?

[Juanfra24]

I haven't been able to reproduce yet but I did find this issue which might be helpful: gatsbyjs/gatsby#12552, and this one which links to two others gatsbyjs/gatsby#20377.

The issues are a bit old but maybe there is something useful in there. Looks like it is related to traced svg which we use as a placeholder here:

strapi-starter-gatsby-blog/starter/src/pages/article/{StrapiArticle.slug}.js

Line 20 in 0a08726

gatsbyImageData(layout: FULL_WIDTH, placeholder: TRACED_SVG)

I'm curious if by removing placeholder: TRACED_SVG it will resolve the issue. Still looking...

As @markkaylor said,
making that change the application no longer crashes