From afb2af99f75bff3c630f6840bd5ef433af12af7a Mon Sep 17 00:00:00 2001
From: Ty Hopp <tyhopp@users.noreply.github.com>
Date: Tue, 10 Jan 2023 15:08:16 +0800
Subject: [PATCH] fix(gatsby): Restore asset, path prefix for file-loader
 handled files (#37429)

---
 .../path-prefix/cypress/integration/asset-prefix.js  | 10 ++++++++++
 .../path-prefix/cypress/integration/path-prefix.js   | 12 ++++++++++++
 e2e-tests/path-prefix/package.json                   |  2 ++
 e2e-tests/path-prefix/src/pages/file-loader.js       |  8 ++++++++
 packages/gatsby/src/utils/webpack-utils.ts           |  2 +-
 5 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 e2e-tests/path-prefix/src/pages/file-loader.js

diff --git a/e2e-tests/path-prefix/cypress/integration/asset-prefix.js b/e2e-tests/path-prefix/cypress/integration/asset-prefix.js
index cd2ebf43cd2ea..d5b95c870cadc 100644
--- a/e2e-tests/path-prefix/cypress/integration/asset-prefix.js
+++ b/e2e-tests/path-prefix/cypress/integration/asset-prefix.js
@@ -48,3 +48,13 @@ describe(`assetPrefix`, () => {
     })
   })
 })
+
+describe(`assetPrefix with assets handled by file-loader`, () => {
+  beforeEach(() => {
+    cy.visit(`/file-loader/`).waitForRouteChange()
+  })
+
+  it(`prefixes an asset`, () => {
+    assetPrefixMatcher(cy.getTestElement(`file-loader-image`), `src`)
+  })
+})
diff --git a/e2e-tests/path-prefix/cypress/integration/path-prefix.js b/e2e-tests/path-prefix/cypress/integration/path-prefix.js
index 690a1008bbb56..b0dcea9507fd8 100644
--- a/e2e-tests/path-prefix/cypress/integration/path-prefix.js
+++ b/e2e-tests/path-prefix/cypress/integration/path-prefix.js
@@ -98,3 +98,15 @@ describe(`Production pathPrefix`, () => {
     cy.getTestElement(`server-data`).contains(`foo`)
   })
 })
+
+describe(`pathPrefix with assets handled by file-loader`, () => {
+  beforeEach(() => {
+    cy.visit(`/file-loader/`).waitForRouteChange()
+  })
+
+  it(`prefixes an asset`, () => {
+    cy.getTestElement(`file-loader-image`)
+      .invoke(`attr`, `src`)
+      .should(`include`, withTrailingSlash(pathPrefix))
+  })
+})
diff --git a/e2e-tests/path-prefix/package.json b/e2e-tests/path-prefix/package.json
index 850d114aced6a..9b8475d271b96 100644
--- a/e2e-tests/path-prefix/package.json
+++ b/e2e-tests/path-prefix/package.json
@@ -23,6 +23,7 @@
   ],
   "license": "MIT",
   "scripts": {
+    "clean": "gatsby clean",
     "prebuild": "del-cli -f assets && make-dir assets/blog",
     "build": "cross-env CYPRESS_SUPPORT=y gatsby build --prefix-paths",
     "postbuild": "cpy --cwd=./public --parents '**/*' '../assets/blog'",
@@ -30,6 +31,7 @@
     "format": "prettier --write '**/*.js'",
     "test": "npm run build && npm run start-server-and-test",
     "start-server-and-test": "start-server-and-test serve \"http://localhost:9000/blog/|http://localhost:9001/blog/\" cy:run",
+    "start-server-and-test:locally": "start-server-and-test serve \"http://localhost:9000/blog/|http://localhost:9001/blog/\" cy:open",
     "serve": "npm-run-all --parallel serve:*",
     "serve:site": "gatsby serve --prefix-paths",
     "serve:assets": "node scripts/serve.js",
diff --git a/e2e-tests/path-prefix/src/pages/file-loader.js b/e2e-tests/path-prefix/src/pages/file-loader.js
new file mode 100644
index 0000000000000..669feb5fe7b59
--- /dev/null
+++ b/e2e-tests/path-prefix/src/pages/file-loader.js
@@ -0,0 +1,8 @@
+import * as React from "react"
+
+// Test files that are handled by file-loader
+import logo from "../images/citrus-fruits.jpg"
+
+export default function FileLoaderPage() {
+  return <img src={logo} alt="Citrus fruits" data-testid="file-loader-image" />
+}
diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts
index f0ff549656503..2903dd4aee341 100644
--- a/packages/gatsby/src/utils/webpack-utils.ts
+++ b/packages/gatsby/src/utils/webpack-utils.ts
@@ -216,7 +216,7 @@ export const createWebpackUtils = (
       ROUTES_DIRECTORY,
       `public`
     )
-    fileLoaderCommonOptions.publicPath = `/`
+    fileLoaderCommonOptions.publicPath = publicPath || `/`
   }
 
   const loaders: ILoaderUtils = {