chore(webpack): remove remnants of PUBLIC_URL and hard code

client/config/env.js

@@ -40,7 +40,7 @@ process.env.NODE_PATH = (process.env.NODE_PATH || "")
 // injected into the application via DefinePlugin in webpack configuration.
 const REACT_APP = /^REACT_APP_/i;
 
-function getClientEnvironment(publicUrl) {
+function getClientEnvironment() {
   const raw = Object.keys(process.env)
     .filter((key) => REACT_APP.test(key))
     .reduce(
@@ -52,11 +52,8 @@ function getClientEnvironment(publicUrl) {
         // Useful for determining whether we’re running in production mode.
         // Most importantly, it switches React into the correct mode.
         NODE_ENV: process.env.NODE_ENV || "development",
-        // Useful for resolving the correct path to static assets in `public`.
-        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
-        // This should only be used as an escape hatch. Normally you would put
-        // images into the `src` and `import` them in code to get their paths.
-        PUBLIC_URL: publicUrl,
+        // TODO: Can't remove yet as it makes the build differ, remove later
+        PUBLIC_URL: "",
         // We support configuring the sockjs pathname during development.
         // These settings let a developer run multiple simultaneous projects.
         // They are used as the connection `hostname`, `pathname` and `port`

client/config/paths.js

@@ -1,27 +1,11 @@
-import fs from "node:fs";
 import { fileURLToPath } from "node:url";
-import getPublicUrlOrPath from "react-dev-utils/getPublicUrlOrPath.js";
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebook/create-react-app/issues/637
 const appDirectory = new URL("..", import.meta.url);
 const resolveApp = (relativePath) =>
   fileURLToPath(new URL(relativePath, appDirectory));
 
-const appPackage = JSON.parse(fs.readFileSync(resolveApp("package.json")));
-
-// We use `PUBLIC_URL` environment variable or "homepage" field to infer
-// "public path" at which the app is served.
-// webpack needs to know it to put the right <script> hrefs into HTML even in
-// single-page apps that may serve index.html for nested URLs like /todos/42.
-// We can't use a relative path in HTML because we don't want to load something
-// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-const publicUrlOrPath = getPublicUrlOrPath(
-  process.env.NODE_ENV === "development",
-  appPackage.homepage,
-  process.env.PUBLIC_URL
-);
-
 const buildPath = process.env.BUILD_PATH || "build";
 
 const moduleFileExtensions = ["mjs", "js", "ts", "tsx", "json", "jsx"];
@@ -37,7 +21,6 @@ const config = {
   appSrc: resolveApp("src"),
   appTsConfig: resolveApp("tsconfig.json"),
   yarnLockFile: resolveApp("../yarn.lock"),
-  publicUrlOrPath,
   libsPath: resolveApp("../libs"),
   moduleFileExtensions,
 };

client/config/webpack.config.js

@@ -32,22 +32,14 @@ function config(webpackEnv) {
   const isEnvProductionProfile =
     isEnvProduction && process.argv.includes("--profile");
 
-  // We will provide `paths.publicUrlOrPath` to our app
-  // as `process.env.PUBLIC_URL` in JavaScript, omitting trailing slash.
-  // Get environment variables to inject into our app.
-  const env = getClientEnvironment(paths.publicUrlOrPath.replace(/\/$/, ""));
+  const env = getClientEnvironment();
 
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
     const loaders = [
       isEnvDevelopment && resolve.sync("style-loader"),
       isEnvProduction && {
         loader: MiniCssExtractPlugin.loader,
-        // css is located in `static/css`, use '../../' to locate index.html folder
-        // in production `paths.publicUrlOrPath` can be a relative path
-        options: paths.publicUrlOrPath.startsWith(".")
-          ? { publicPath: "../../" }
-          : {},
       },
       {
         loader: resolve.sync("css-loader"),
@@ -135,10 +127,7 @@ function config(webpackEnv) {
         ? "static/js/[name].[contenthash:8].chunk.js"
         : isEnvDevelopment && "static/js/[name].chunk.js",
       assetModuleFilename: "static/media/[name].[hash][ext]",
-      // webpack uses `publicPath` to determine where the app is being served from.
-      // It requires a trailing slash, or the file assets will get an incorrect path.
-      // We inferred the "public path" (such as / or /my-project) from homepage.
-      publicPath: paths.publicUrlOrPath,
+      publicPath: "/",
       // Point sourcemap entries to original disk location (format as URL on Windows)
       devtoolModuleFilenameTemplate: isEnvProduction
         ? (info) =>
@@ -450,7 +439,6 @@ function config(webpackEnv) {
       //   can be used to reconstruct the HTML if necessary
       new WebpackManifestPlugin({
         fileName: "asset-manifest.json",
-        publicPath: paths.publicUrlOrPath,
         generate: (seed, files, entrypoints) => {
           const manifestFiles = files.reduce((manifest, file) => {
             manifest[file.name] = file.path;

client/config/webpackDevServer.config.js

@@ -24,13 +24,11 @@ function config() {
       // project directory is dangerous because we may expose sensitive files.
       // Instead, we establish a convention that only files in `public` directory
       // get served. Our build script will copy `public` into the `build` folder.
-      // In JavaScript code, you can get URL of `public` folder with `process.env.PUBLIC_URL`.
       // Note that we only recommend to use `public` folder as an escape hatch
       // for files like `favicon.ico`, `manifest.json`, and libraries that are
       // for some reason broken when imported through webpack. If you just want to
       // use an image, put it in `src` and `import` it from JavaScript instead.
       directory: paths.appPublic,
-      publicPath: [paths.publicUrlOrPath],
     },
     client: {
       webSocketURL: {
@@ -46,20 +44,12 @@ function config() {
         warnings: false,
       },
     },
-    devMiddleware: {
-      // It is important to tell WebpackDevServer to use the same "publicPath" path as
-      // we specified in the webpack config. When homepage is '.', default to serving
-      // from the root.
-      // remove last slash so user can land on `/test` instead of `/test/`
-      publicPath: paths.publicUrlOrPath.slice(0, -1),
-    },
     server: getServerConfig(),
     host,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
-      index: paths.publicUrlOrPath,
     },
     setupMiddlewares(middlewares, devServer) {
       // This registers user provided middleware for proxy reasons

client/src/react-app.d.ts

@@ -5,7 +5,6 @@
 declare namespace NodeJS {
   interface ProcessEnv {
     readonly NODE_ENV: "development" | "production" | "test";
-    readonly PUBLIC_URL: string;
   }
 }
 

package.json

@@ -45,7 +45,7 @@
     "style-dictionary": "style-dictionary build -c sd-config.js",
     "stylelint": "stylelint \"**/*.scss\"",
     "test": "yarn prettier-check && yarn test:client && yarn test:kumascript && yarn test:libs && yarn test:content && yarn test:testing",
-    "test:client": "cd client && tsc --noEmit && cross-env NODE_ENV=test BABEL_ENV=test PUBLIC_URL='' node scripts/test.js --env=jsdom",
+    "test:client": "cd client && tsc --noEmit && cross-env NODE_ENV=test BABEL_ENV=test node scripts/test.js --env=jsdom",
     "test:content": "yarn jest --rootDir content",
     "test:developing": "cross-env CONTENT_ROOT=mdn/content/files TESTING_DEVELOPING=true playwright test developing",
     "test:headless": "playwright test headless",

server/react-app.d.ts

@@ -1,7 +1,6 @@
 declare namespace NodeJS {
   interface ProcessEnv {
     readonly NODE_ENV: "development" | "production" | "test";
-    readonly PUBLIC_URL: string;
   }
 }
 

ssr/react-app.d.ts

@@ -1,7 +1,6 @@
 declare namespace NodeJS {
   interface ProcessEnv {
     readonly NODE_ENV: "development" | "production" | "test";
-    readonly PUBLIC_URL: string;
   }
 }