Skip to content

Template variables not being replaced when publicPath is not "/" #1146

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
ericclemmons opened this issue Jan 26, 2019 · 3 comments
Closed

Template variables not being replaced when publicPath is not "/" #1146

ericclemmons opened this issue Jan 26, 2019 · 3 comments

Comments

@ericclemmons
Copy link

Expected behaviour

I opened a bug for facebook/create-react-app#6280, but upon review I'm thinking the issue is more with this plugin.

tldr; Changing publicPath from / to /whatever/ breaks %PUBLIC_HTML% replacement:

diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js
index 2a2128e..f0f14b8 100644
--- a/packages/react-scripts/config/webpackDevServer.config.js
+++ b/packages/react-scripts/config/webpackDevServer.config.js
@@ -72,7 +72,7 @@ module.exports = function(proxy, allowedHost) {
     // ❌ /whatever/static/js/bundle.js doesn't work
     // ✅ /static/js/bundle.js still does
     // 🤔 Changing this to /whatever prevents %PUBLIC_URL% from being replaced!?
-    publicPath: '/',
+    publicPath: '/whatever/',
     // WebpackDevServer is noisy by default so we emit custom message instead
     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
     quiet: true,

Current behaviour

The HTML remains untouched:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

(Whereas with publicPath: "/" in the webpack-dev-server, %PUBLIC_URL% is replaced correctly! Although the files aren't served because the public path should be /whatever/)

Environment

Tell us which operating system you are using, as well as which versions of Node.js, npm, webpack, and html-webpack-plugin. Run the following to get it quickly:

Node.js v10.13.0
darwin 18.2.0
6.4.1
4.0.0-beta.5

Config

See facebook/create-react-app#6280 to reproduce

Relevant Links

Additional context

Add any other context about the problem here.
@jantimon
Copy link
Owner

Thank you for submitting a bug report

I having troubles to find out how I could reproduce this bug.
Could you please try to create a minimal reproduction example (especially remove all dependencies, loaders and plugins which are not necessary for reproduction) and attach it (with out node_modules) as a zip to this issue?

The html-webpack-plugin doesn't replace %PUBLIC_HTML%. Could you please explain why you believe the bug might be part of the html-webpack-plugin?

@sheldonh
Copy link

sheldonh commented May 3, 2019

Take any project that relies on EJS template parsing of index.html, and set webpack's output.publicPath to a string value other than /, e.g. /custom/.

Fire up webpack-dev-server behind a reverse proxy so that you can browse your index at /custom/.

View source.

You'll see the literal EJS template tags (e.g. <%= "Hello" %>) instead of their values, (e.g. Hello).

@jantimon
Copy link
Owner

jantimon commented May 4, 2019

@sheldonh that sounds like you are using a loader for html files

@lock lock bot locked as resolved and limited conversation to collaborators Aug 18, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ericclemmons @sheldonh @jantimon