Problems running through the public quick-start project exercise: Gatsy blog images are not displaying?

Troubleshoot Gatsby Blog site problem (images not rendering) submitted to the Strapi Member Forum (w/ no response)

Since it’s been 48 hours w/ no useful response to this Strapi Member Forum request…

Walking slowly through the product-branded quick start page for troubleshooting ideas, we note:

Make sure Node.js and npm are properly installed on your machine.

…which is easy to graze right over, especially if you are already doing node/npm-based builds (as we are).

Going to the linked page, we note:

The CLI installation guide requires at least two software prerequisites to be already installed on your computer:

  • Node.js: only LTS versions are supported (version 12.x minimum). Other versions of Node.js may not be compatible with the latest release of Strapi. The 14.x version is most recommended by Strapi.

  • npm (version 6.x minimum) or yarn (opens new window) to run the CLI installation scripts.

A quick check of our versions yields:

$ node --version
v12.14.1

$ npm  --version
6.14.14

…which indicates that our version of node might be the source of the problem.

Let’s see if upgrading to a stable (LTS) version of node will resolve the problem(s).

Using guidance from this article:
How to Update Node.js to Latest Version {Linux, Windows, and macOS}

…we will try “Option 2: Update Node.js with NPM (Node Package Manager)”:

  • (using sudo where needed)
npm cache clean -f
npm install -g n
sudo n stable

…or possibly: sudo n [version.number]


Results:

  • Our node and npm version are now up-tp-date & good-per-spec.
  • Gatsby site still has problems – images still not rendering.
  • This build error message:
    [develop:frontend]  ERROR #98123  WEBPACK
    [develop:frontend] 
    [develop:frontend] Generating development JavaScript bundle failed
    [develop:frontend] 
    [develop:frontend] ESLint is not a constructor
    [develop:frontend] 
    failed Building development bundle - 11.936s
    ERROR in ESLint is not a constructor
    [develop:frontend] 
    [develop:frontend] webpack compiled with 1 error
    success Writing page-data.json files to public directory - 0.212s - 3/15 70.88/s
    
    • …might possibly be the source of the problem, but it is cryptic (no source/line)
    • …it does not yield any clear ideas to try.

Session Log below…