gatsby-plugin-image Not Working

[Himadu2000]

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 {element} | ^ 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

[katterek]

I'm having the same issue... 😢 Is there any suggested workaround yet?

[dennislo]

Thanks @Himadu2000 for creating this issue. We are experiencing the same issue 😢. as we would like to use the gatsby-plugin-image on our gatsby + nx app.

[Himadu2000]

I'm having the same issue... 😢 Is there any suggested workaround yet?

@katterek You could temporary use <img src="" /> tag. Such as, Using url <img src="https://picsum.photos/200" /> Or as a query to image folder,

import { graphql, useStaticQuery } from "gatsby"
import React, { FC } from "react"

const Image: FC = () => {
  // Edit image.png to your image name
  // image.png is located in src/image folder
  const data = useStaticQuery(graphql`
    {
      imageSharp(fluid: { originalName: { eq: "image.png" } }) {
        fluid {
          src
        }
      }
    }
  `)
  return <img src={data.imageSharp.fluid.src} alt="Image" />
}
// You might need to install gatsby-plugin-sharp (This does come with default starter)

But there won't be optimizations done by gatsby-plugin-image. But they are a good temporary NX gatsby have lot of bugs so I don't think it will be soon fixed either

[Himadu2000]

@dennislo Well lucky me my app only uses svg but some of other issues I created actually costing me time and Benjamins . And my release date for production app delay and my schedule getting haywire.

[Kerosz]

Is there any updates on the issue ? We would like to use gatsby + gatsby-plugin-image for our landing-web. The project is in early development. So we still debate if we should move away from nx for time being.

[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.

[smetzdev]

@adrian-marcelo-gallardo Thank you, this runs well for now. Since you're installing @babel/cli, you do not need to run npx inside your postinstall script anymore

[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": {}
}

[jaysoo]

Closing this issue since we've moved Gatsby plugin to the labs repo. https://github.com/nrwl/nx-labs

Feel free to open it there.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.