From 5ea513c7041e65039b3d3dedb0b1b664cd7b9565 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20St=C4=99pie=C5=84?=
 <57643748+pastepi@users.noreply.github.com>
Date: Tue, 19 Dec 2023 08:43:21 +0100
Subject: [PATCH] fix(gatsby): Restore asset, path prefix for file-loader
 handled files (#38764)

* fix(gatsby): Restore asset, path prefix for file-loader handled files (#37429)

* add missing import, read vars from config

---------

Co-authored-by: Ty Hopp <tyhopp@users.noreply.github.com>
---
 .../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           |  6 +++++-
 5 files changed, 37 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..ea173fc200b54 100644
--- a/packages/gatsby/src/utils/webpack-utils.ts
+++ b/packages/gatsby/src/utils/webpack-utils.ts
@@ -13,6 +13,7 @@ import { getBrowsersList } from "./browserslist"
 import ESLintPlugin from "eslint-webpack-plugin"
 import { cpuCoreCount } from "gatsby-core-utils"
 import { GatsbyWebpackStatsExtractor } from "./gatsby-webpack-stats-extractor"
+import { getPublicPath } from "./get-public-path"
 import {
   GatsbyWebpackVirtualModules,
   VIRTUAL_MODULES_BASE_PATH,
@@ -183,6 +184,9 @@ export const createWebpackUtils = (
 
   const isSSR = stage.includes(`html`)
   const { config } = store.getState()
+  const { assetPrefix, pathPrefix } = config
+
+  const publicPath = getPublicPath({ assetPrefix, pathPrefix, ...program })
 
   const makeExternalOnly =
     (original: RuleFactory) =>
@@ -216,7 +220,7 @@ export const createWebpackUtils = (
       ROUTES_DIRECTORY,
       `public`
     )
-    fileLoaderCommonOptions.publicPath = `/`
+    fileLoaderCommonOptions.publicPath = publicPath || `/`
   }
 
   const loaders: ILoaderUtils = {