Docs-website: Issues with editing image filenames and Gatsby plugin caches

[paperclypse]

Description

There seems to be an issue with images that have encoded values, such as img-integration-k8s%402x.png, and/or that are being imported.

I got a report of a broken Kubernetes image icon in this collapser: https://docs.newrelic.com/docs/synthetics/synthetic-monitoring/private-locations/install-containerized-private-minions-cpms/#system-requirements

I thought perhaps the issue was related to the % sign in the filename. When I tried to rename the file, my build crashed. We noticed that the image was being used in more than one place throughout the site. I updated the image name wherever it was being used, in its import line, and also within the doc itself.

It appears this image path is somehow being used in a cache for a Gatsby plugin.

Steps to reproduce

1. Go to the install-cpm-fix-broken-image branch.
2. Try to build the site.
3. See error

Expected behavior

I expect to be able to rename an image and not have the site completely fail to build locally.

Error text

 ERROR #98124  WEBPACK

Generating development SSR bundle failed

Can't resolve '../../../../src/content/docs/integrations/prometheus-integrations/install
-configure-openmetrics/images/img-integration-k8s.png' in '/Users/skilburn/Documents/Git
Hub/docs-website/.cache/caches/gatsby-plugin-mdx/mdx-scopes-dir'

If you're trying to use a package make sure that
'../../../../src/content/docs/integrations/prometheus-integrations/install-configure-ope
nmetrics/images/img-integration-k8s.png' is installed. If you're trying to use a local
file make sure that the path is correct.

File: .cache/caches/gatsby-plugin-mdx/mdx-scopes-dir/029ec0e418550b8569deb36088ef78ab.js


 ERROR #98124  WEBPACK

Generating development SSR bundle failed

Can't resolve '../../../../src/content/docs/integrations/prometheus-integrations/install
-configure-openmetrics/images/img-integration-k8s.png' in '/Users/skilburn/Documents/Git
Hub/docs-website/.cache/caches/gatsby-plugin-mdx/mdx-scopes-dir'

If you're trying to use a package make sure that
'../../../../src/content/docs/integrations/prometheus-integrations/install-configure-ope
nmetrics/images/img-integration-k8s.png' is installed. If you're trying to use a local
file make sure that the path is correct.

File: .cache/caches/gatsby-plugin-mdx/mdx-scopes-dir/1cee6649d5c98c98aee269274ed9f912.js

not finished Building development bundle - 26.941s

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Additional context

Add any other context about the problem here.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

[bradleycamacho]

This failed for both @paperclypse and I even after running:
rm -rf node_modules && yarn && yarn clean

My assumption is that the path "imported" is stored somewhere in the gatsby cache, and it gets confused when we rename the file and change the path.

[jpvajda]

trying dumping gatsby's cache

https://www.gatsbyjs.com/docs/build-caching/

Since cache files are stored within the .cache directory, deleting it will clear all cache. You can also use gatsby clean to delete the .cache and public folders. The cache is also invalidated by Gatsby in a few cases, specifically

[bradleycamacho]

@jpvajda Thanks for the suggestion! I couldn't run gatsby clean as ZSH didn't register gatsby as a command. I manually deleted the .cache directory, and it still gave me the same error.

[jpvajda]

@bradleycamacho one thing you could do is looking if Gatsby has this an issue reported in their gatsby Opensource project, perhaps it's a known problem? Perhaps some fancy googling may lead to some insights. whatever you find feel free to drop it here.

[paperclypse]

@jpvajda I installed the Gatsby CLI, ran Gatsby clean to clear out the cache, and am still getting the exit code 1 error.

[paperclypse]

@jpvajda

Here are specific docs affected by this one broken image:
https://docs.newrelic.com/docs/synthetics/synthetic-monitoring/private-locations/install-containerized-private-minions-cpms/
https://docs.newrelic.com/docs/integrations/prometheus-integrations/troubleshooting/no-data-appears-prometheus-integration/
https://docs.newrelic.com/docs/integrations/prometheus-integrations/view-query-data/view-query-your-prometheus-data/
https://docs.newrelic.com/docs/synthetics/synthetic-monitoring/private-locations/containerized-private-minion-cpm-maintenance-monitoring/

Weirdly, here's a doc that's using the image inside a collapser and also outside of it. The image outside the collapser is working:
https://docs.newrelic.com/docs/integrations/prometheus-integrations/install-configure-openmetrics/configure-prometheus-openmetrics-integrations/

This issue seems to come up for images that have an encoded value (for example %), that are being imported, and that are being used inline inside of collapsers.

There are other images that have encoded values like this throughout the site, but I'd rather not track them all down.

[roadlittledawn]

i pulled the branch down and it saw the following:
in src/content/docs/integrations/prometheus-integrations/install-configure-openmetrics/install-update-or-uninstall-your-prometheus-openmetrics-integration.mdx i saw markdown links referencing the old filename.

in src/content/docs/synthetics/synthetic-monitoring/private-locations/install-containerized-private-minions-cpms.mdx the import for the image was removed at the top but there were references to it in the body.

this commit got it working locally

[jpvajda]

@roadlittledawn so, are you suggestion we merge this commit in and this in and this will resolve the problem? I'm not clear on next steps.

[jpvajda]

@roadlittledawn I've linked your PR to this issue, I assume this is the fix for it. In the future can you ensure to link PRs to issues? It helps contributors to see that and indicates there is a related PR on our board.

[roadlittledawn]

had to hop in and out of working on this one yesterday and today. build is currently running at ~38 min so assuming it eventually succeeds, the ultimate causes were:

• references to the new image filenames not updated in across all .mdx files
• missing import statement in one of the .mdx files
• a malformed markdown link that used a [ instead of (
• had to force clear gatsby cache on build so Validate PR build could pass

[roadlittledawn]

@jpvajda oh and fyi i didn't open that PR but i'll update the description too

[zstix]

This issue has been resolved.

[austin-schaefer]

Woop, thanks for swarming on this everybody!