CDN assets not working since 3.2.0

[navied]

I am having issues with imported assets not being embedded with their proper CDN links since 3.2.0. The asset is being imported like this on top:

import ContentImg from '../images/content.svg';

It shows up properly in dev but when pushing to staging the assets do not attach the proper CDN link associated with it. I also tried setting webpack_public_path on top of the file to the cdn root but to no luck.

I have tried using url-loader as well but it just ends up breaking the assets in dev as well.

I believe it is because of #1107 that is causing this issue now, is there something that I need to change to support CDN imports again in 3.2.0?

[gauravtiwari]

@navied It should work if you configure Rails to use CDN.

config.action_controller.asset_host = 'mycdnsubdomain.fictional-cdn.com'

[navied]

@gauravtiwari Yup! That is already set to the CDN url, all my JS assets within the manifest.json works fine with the proper CDN url attached it is only images that are being imported within my react component that are not being attached with a CDN url.

[gauravtiwari]

Ahh right, will try to reproduce later and report back but in meantime you could try either:

// config/webpack/environment.js

const fileLoader = environment.loaders.get('file')
fileLoader.use[0].options.publicPath = process.env.SOME_CDN

// OR
// THIS SHOULD BE AT THE TOP BEFORE ALL IMPORTS/PACKS THAT USED IMAGES/FONTS
 __webpack_public_path__ = process.env.SOME_CDN
// rest of your application entry

[navied]

Great! I was able to get it to work with 1 by doing this:

const fileLoader = environment.loaders.get('file')
fileLoader.use[0].options.publicPath = 'https://mycdnsubdomain.fictional-cdn.com/packs/'

Are we able to access what is in config.action_controller.asset_host here?

EDIT:

I was able to make it less "static" by just bringing back some of the code that was removed from #1107

Came up with this:

const { environment } = require('@rails/webpacker')
const env = process.env.NODE_ENV || 'development'
const { resolve } = require('path')
const { safeLoad } = require('js-yaml')
const { readFileSync } = require('fs')
const filePath = resolve('config', 'webpacker.yml')
const appConfig = safeLoad(readFileSync(filePath), 'utf8')[env]
const config = appConfig

const removeOuterSlashes = string =>		
  string.replace(/^\/*/, '').replace(/\/*$/, '')

const formatPublicPath = (host = '', path = '') => {		
  let formattedHost = removeOuterSlashes(host)		
  if (formattedHost && !/^http/i.test(formattedHost)) {		
  	formattedHost = `//${formattedHost}`		
  }		
  const formattedPath = removeOuterSlashes(path)		
  return `${formattedHost}/${formattedPath}/`		
}

const fileLoader = environment.loaders.get('file')
fileLoader.use[0].options.publicPath = formatPublicPath(process.env.WEBPACKER_ASSET_HOST, config.public_output_path)

module.exports = environment

It looks a bit messy but it does work, bringing back the old code in some form might end up being a better solution

[johannesluedke]

#1186 (comment) worked for us, maybe it would be a good thing to bring back some of the code as @navied suggested

[marexandre]

@gauravtiwari any update on this? Is there a work around for this or will I'll need to do something like #1186 (comment)?

[gauravtiwari]

Please try the latest RC, otherwise feel free to open a new issue with more details.