strapi-starter-gatsby-blog
strapi-starter-gatsby-blog copied to clipboard
Quick Start Frontend - Dependency throws an exception
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
@remidej / @markkaylor is there any reason why we need to keep this issue in this repo instead of transferring it to the proper one?
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
Transferring issue to the proper repo
Having the same problem 😥
Also having the same problem.
I haven't been able to reproduce yet but I did find this issue which might be helpful: https://github.com/gatsbyjs/gatsby/issues/12552, and this one which links to two others https://github.com/gatsbyjs/gatsby/issues/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:
https://github.com/strapi/strapi-starter-gatsby-blog/blob/0a08726a4fb8d15e6bc1c330ee07e0b8ce479566/starter/src/pages/article/%7BStrapiArticle.slug%7D.js#L20
I'm curious if by removing placeholder: TRACED_SVG
it will resolve the issue. Still looking...
Any updates on this issue?
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:
https://github.com/strapi/strapi-starter-gatsby-blog/blob/0a08726a4fb8d15e6bc1c330ee07e0b8ce479566/starter/src/pages/article/%7BStrapiArticle.slug%7D.js#L20
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