Webpacker: Asset path not correct in production with asset_host

[zinkkrysty]

Instead of https://assets.autouncle.com/packs/au_logo-ca819eb380d16ccacaa27b58bf6de9b3.png the link becomes https://packs/au_logo-ca819eb380d16ccacaa27b58bf6de9b3.png in production.

I am referencing the asset from .jsx:

import auLogo from './au_logo.png'

<img
  className={styles.auLogo}
  src={auLogo}
  alt="React is alive!"
/>

CSS and JS assets work as they should though.

My manifest.json looks like this in production:

{
  "application.js": "/packs/application-e59ce04015f5c4805038.js",
  "au_logo.png": "/packs/au_logo-ca819eb380d16ccacaa27b58bf6de9b3.png",
  "hello_react.css": "/packs/hello_react-e4f8b7143d6099d4ae0d.css",
  "hello_react.js": "/packs/hello_react-05621acfe18a877fb479.js",
  "react.svg": "/packs/react-4009eef3b3e291f296e71962c70895c5.svg"
}

I am using this assets.js webpack config:

const Url = require('url-parse')
const { env, paths, publicPath } = require('../configuration.js')

// Make sure host has slashes
const ensureSlashes = ({ host, slashes }) => {
  if (slashes) { return `${host}/${paths.entry}/` }
  return `//${host}/${paths.entry}/`
}

// Compute path for internal pack assets if ASSET_HOST is supplied
const computeAssetPath = (host) => {
  if (!host) { return `/${paths.entry}/` }
  return ensureSlashes(new Url(host))
}

// Get asset options based on NODE_ENV
const assetOptions = (nodeENV) => {
  if (nodeENV === 'production') {
    return { publicPath: computeAssetPath(env.ASSET_HOST), name: '[name]-[hash].[ext]' }
  }
  return { publicPath, name: '[name].[ext]' }
}

module.exports = {
  test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
  use: [{
    loader: 'file-loader',
    options: assetOptions(env.NODE_ENV)
  }]
}

[gauravtiwari]

@zinkkrysty One small change you have to fix - Please use the updated code - https://github.com/gauravtiwari/webpacker/blob/28279eab44be336469b4bef56023ee61233c9ddc/lib/install/config/loaders/core/assets.js

You are using host in the ensureSlashes method, change it to href please 👍

[zinkkrysty]

Oh I missed that @gauravtiwari , thanks! I am trying it out now :)

[gauravtiwari]

No worries, thanks. You would need to recompile the assets 😄 (unless on heroku)

[zinkkrysty]

Works! Thanks for help

[rezadhah]

so do we need to add this code from https://github.com/gauravtiwari/webpacker/blob/28279eab44be336469b4bef56023ee61233c9ddc/lib/install/config/loaders/core/assets.js to webpacker loader config or is it already available ouf of the box?

my assets did not give url from cdn, but from the public folder in production server(we have defined env ASSET_HOST for the asset_host) :(

import Icon from 'images/icon.svg';
import React from 'react';

export default class HelloComponent extends React.Component {}