gatsby-plugin-image Not Working

Current Behavior

Running nx build app provide following error (Failure Logs)

Also note doing what was informed in log made no deference. Branch

Expected Behavior

Open the app without errors or warnings Is this a regression? No

Steps to Reproduce

Here’s a Github repo And the following actions run

Steps,

1. Create a basic gatsby app with nx
2. Add gatsby-plugin-image as dependency
3. Add gatsby-plugin-image to gatsby-config.js
4. Run nx build or serve

Failure Logs

nx run test:build success open and validate gatsby-configs - 0.208s success load plugins - 3.092s success onPreInit - 0.272s success initialize cache - 0.476s success copy gatsby files - 15.342s success onPreBootstrap - 0.117s success createSchemaCustomization - 0.017s success Checking for changed pages - 0.047s success source and transform nodes - 0.368s success building schema - 2.290s success createPages - 0.036s success createPagesStatefully - 0.909s info Total nodes: 40, SitePage nodes: 3 (use --verbose for breakdown) success Checking for changed pages - 0.014s success Cleaning up stale page-data - 0.021s success update schema - 0.213s success onPreExtractQueries - 0.039s success extract queries from components - 1.341s success write out redirect data - 0.050s success Build manifest and related icons - 12.340s success onPostBootstrap - 12.432s info bootstrap finished - 60.058s success run page queries - 0.106s - 3/3 28.24/s success write out requires - 0.396s failed Building production JavaScript and CSS bundles - 41.554s

ERROR #98123 WEBPACK

Generating JavaScript bundles failed

C:\Website\Recreate-gatsby-image\node_modules\gatsby-plugin-image\gatsby-browser.js: Support for the experimental syntax ‘jsx’ isn’t currently enabled (5:10):

3 | 4 | export function wrapRootElement({ element }) {

5 | return <LaterHydrator>{element}</LaterHydrator> | ^ 6 | } 7 |

Add @babel/preset-react (https://git.io/JfeDR) to the ‘presets’ section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the ‘plugins’ section to enable parsing.

File: …..\node_modules\gatsby-plugin-image\gatsby-browser.js:5:9

Could not build “test”. See errors above.

———————————————————————————————————————————————

NX ERROR Running target “test:build” failed

Failed tasks:

• test:build

Environment

NX Report complete - copy this into the issue template

Node : 14.17.0 OS : linux x64 yarn : 1.22.10

nx : Not Found @nrwl/angular : Not Found @nrwl/cli : 12.3.6 @nrwl/cypress : 12.3.6 @nrwl/devkit : 12.3.6 @nrwl/eslint-plugin-nx : 12.3.6 @nrwl/express : Not Found @nrwl/jest : 12.3.6 @nrwl/linter : 12.3.6 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : 12.3.6 @nrwl/react : 12.3.6 @nrwl/schematics : Not Found @nrwl/tao : 12.3.6 @nrwl/web : 12.3.6 @nrwl/workspace : 12.3.6 @nrwl/storybook : 12.3.6 @nrwl/gatsby : 12.3.6 typescript : 4.3.2

[xiongemi]

i got it working by also adding ‘gatsby-plugin-image’ to app’s package.json. (not package.json at root level, but at project level).

So the app’s project.json looks like:

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and develop quickly with Gatsby",
  "version": "0.0.0",
  "license": "MIT",
  "dependencies": {
    "gatsby": "*",
    "gatsby-plugin-image": "*"
  },
  "devDependencies": {}
}

[adrian-marcelo-gallardo]

I have struggled with this too for several hours. Finally, I managed to get the plugin working by manually compiling plugin’s gatsby-browser.js; I followed these steps:

• Run: npm install @babel/cli
• Run: npx babel node_modules/gatsby-plugin-image/gatsby-browser.js --out-file node_modules/gatsby-plugin-image/gatsby-browser.js --presets=@babel/preset-react

This will compile gatsby-browser.js and replace the original version within node_modules; for reference, output result looks like this:

import React from "react";
import { LaterHydrator } from ".";
export function wrapRootElement({
  element
}) {
  return /*#__PURE__*/React.createElement(LaterHydrator, null, element);
}

As this change is done within node_modules, then it’s very fragile and a temporary solution. I strongly recommend you add the 2nd command to your package.json postinstall script, as follows:

{
  "scripts": {
     ...
     "postinstall": "npx babel node_modules/gatsby-plugin-image/gatsby-browser.js --out-file node_modules/gatsby-plugin-image/gatsby-browser.js --presets=@babel/preset-react"
  }
}

This way, if you reinstall your node_modules this command will run automatically.