Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Relative paths in dist for assets

See original GitHub issue

Local server works great with images and stylesheets. However on output I have that causes images and stylesheet paths to break for subdirectory routes.

Output structure:

dist/
- index.html
- styles.css
- img/image.jpg
- about/index.html

The about/index.html references the stylesheet as ./style.css which should be ../style.css and the same for the image img/image.jpg should be ../image.jpg.

My src structure is setup so that each component has all of its assets next to it. The images and styles do get bundled into the style.css and img directory respectively.

Source Structure:

src/components/about/
index.jsx
__tests__/about.test.jsx
img/image.jpg
scss/about.scss

Not sure if this is an issue with react-static or webpack in general but placing here since react-static controls the output.

Issue Analytics

State:
Created 6 years ago
Comments:11 (11 by maintainers)

Top GitHub Comments

1reaction

poorpaddycommented, Nov 14, 2017

Figured it out. The publicPath: '' needed to be publicPath: '/' for the loaders

0reactions

poorpaddycommented, Nov 13, 2017

here’s the output of about/index.html

<!DOCTYPE html>
<html lang="en" data-reactroot="">

<head>
  <link rel="stylesheet" href="./styles.7b74ab99.css" />
  <title data-react-helmet="true">Redacted</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta charSet="UTF-8" />
  <meta data-react-helmet="true" name="description" content="Redacted" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="shortcut icon" href="img/favicon.ico" />
  <link data-react-helmet="true" rel="canonical" href="Redacted" />
  <meta name="robots" content="index,follow,noodp" />
  <meta name="slurp" content="noydir" />
  <meta name="apple-itunes-app" content="app-id=1242998361" />
  <style type="text/css" data-styled-components="" data-styled-components-is-local="false">
    /* sc-component-id: sc-global-3360241726 */

    html,
    body {
      overflow-x: hidden;
    }

    button,
    .btn,
    .btn-primary,
    .cta-primary {
      margin: 0;
      min-width: 0;
      text-decoration: none;
      font-weight: $fwBold;
    }

  </style>
</head>

<body>
  <div id="root">
    <header class="navbar">
      <a class="logo-link" href="Redacted">
        <img width="92" height="29" src="img/logo.svg" alt="Redacted" class="logo" />
      </a>
    </header>
    <div class="row terms-content">
      <div class="col-xs-12">
        <p>Redacted Content</p>
      </div>
      <script type="text/javascript">
        window.__routeData = {
          "path": "/terms",
          "siteProps": {
            "title": "Front Doors"
          }
        };
        window.__routesList = [];

      </script>
      <script async="" src="/app.acc9b507.js"></script>
</body>

</html>