Prefix-paths not always prefixing static assets on build

Description

When I run gatsby build --prefix-paths after running gatsby clean, all of the paths in my site are appropriately link; however, if I run gatsby build --prefix-paths again (without cleaning), certain assets lose their path prefix. This affects the assets that have a link starting with /static/ in particular, and effects objects across my site, such as images loaded with Gatsby Image in JSX, as well as images and files generated from markdown.

Steps to reproduce

1. Use a prefix path, and add an image somewhere in your gatsby site
2. Run gatsby clean
3. Run gatsby build --prefix-paths
4. Inspect the link to that image in the generated ssr html file in /public/. It should have the form PREFIX_PATH/static/...
5. Run gatsby build --prefix-paths again
6. Return to that image in the generated ssr html file in /public/. It should now have the (incorrect) form $static/...

This is happening with a class website site I’m building for fun: https://github.com/ReillyBova/COS426-Website

Expected result

Prefix paths should always prefix paths! It should not be necessary to clean the compiled files and build from scratch every time.

Actual result

Prefix paths does not work for certain assets when the build is not 100% fresh.

Environment

System: OS: macOS 10.15.3 CPU: (8) x64 Intel® Core™ i7-6700HQ CPU @ 2.60GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.15.0 - /usr/local/bin/node npm: 6.14.2 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 80.0.3987.122 Safari: 13.0.5 npmPackages: gatsby: ^2.19.27 => 2.19.27 gatsby-image: ^2.2.42 => 2.2.42 gatsby-plugin-layout: ^1.1.22 => 1.1.22 gatsby-plugin-manifest: ^2.2.42 => 2.2.42 gatsby-plugin-material-ui: ^2.1.6 => 2.1.6 gatsby-plugin-module-resolver: ^1.0.3 => 1.0.3 gatsby-plugin-react-helmet: ^3.1.22 => 3.1.22 gatsby-plugin-sharp: ^2.4.5 => 2.4.5 gatsby-plugin-sitemap: ^2.2.27 => 2.2.27 gatsby-remark-copy-linked-files: ^2.1.37 => 2.1.37 gatsby-remark-images: ^3.1.44 => 3.1.44 gatsby-remark-katex: ^3.1.24 => 3.1.24 gatsby-remark-prismjs: ^3.3.32 => 3.3.32 gatsby-remark-smartypants: ^2.1.21 => 2.1.21 gatsby-source-filesystem: ^2.1.48 => 2.1.48 gatsby-transformer-remark: ^2.6.53 => 2.6.53 gatsby-transformer-sharp: ^2.3.16 => 2.3.16 npmGlobalPackages: gatsby-cli: 2.8.29 gatsby: 2.19.27

[philsinatra]

I was able to use a Gatsby function withPrefix to solve this without having to incorporate the production/development check.

import { withPrefix } from 'gatsby'

Had to wrap each reference to a static asset in this function call. For example:

<link
  rel="apple-touch-icon"
  sizes="57x57"
  href={withPrefix('/apple-icon-57x57.png')}
/>

This solved the issue, assets load properly with the correct paths in both development and production mode.

[ibrent]

This feature still doesn’t work correctly. Even after CLEAN and building with the prefix-path, my app related JS and CSS are still going to the ROOT and not a sub directory as I listed in pathPrefix: /subdirectory.

All it does is move my static assets into the subdirectory. My app js etc are all at the root of the domain, and get a 404 unfound asset error. This doesn’t work as listed on this page: https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/

Please review and QA this feature. Thanks.