htmlburger / wpemerge-theme

An organized, ES6 and SASS powered theme taking advantage of the WP Emerge framework. 🚀
https://wpemerge.com/
GNU General Public License v2.0
286 stars 33 forks source link

Can't reference an image (getAssetUrl) when running yarn hot #58

Closed TCattd closed 4 years ago

TCattd commented 4 years ago

Version

Expected behavior

Being able to reference an image using getAssetUrl when in yarn hot reload mode.

Actual behavior

Can't reference an image, getAssetUrl method returns empty string.

Steps to reproduce

  1. Create a fresh wpemerge 0.16.0 theme following the quickstart https://docs.wpemerge.com/#/starter/theme/quickstart as seen here: https://tppr.me/UP3N2
  2. Add an image https://tppr.me/95Ri1 and import it https://tppr.me/VBXpd
  3. Reference it in the theme https://tppr.me/bwyTI
  4. Run: yarn hot
  5. Error: https://tppr.me/FaEkH

Comments

If you instead run "yarn start", it will process the image and build the correct manifest.json https://tppr.me/wwJKs so the referenced image inside the theme's file will work https://tppr.me/g7FQk

var_dump on the getAssetUrl method while on hot reload mode https://tppr.me/Z7FDm will output an empty string https://tppr.me/gsaaC

atanas-dev commented 4 years ago

Thank you for the detailed report (and especially the screenshots!) @TCattd ! I have a pretty good idea why this is happening and I'll try to have a fix for this soon.

TCattd commented 4 years ago

Didn't want to open another issue, but it seems that the opposite isn't working well too. Don't know if it's related.

I mean, when running yarn start, images referenced with getAssetUrl() are working fine, but when referenced inside a scss file, then they (those images) don't point to the right url.

This is running yarn hot:

https://tppr.me/zJ5OQ

Logo and other broken aside (this bug), check the url in the css the browser evals. This is the bit that imports it: https://tppr.me/qeFtb That should fine i think (ref: https://docs.wpemerge.com/#/starter/assets/overview ).

But then changing to yarn start, watch this:

https://tppr.me/PfUf2

No bg image loads.

The image is in there: https://tppr.me/NnDLk And it's loaded at the manifest.json: https://tppr.me/WHGOx

Of course, that url doesn't exists at that path. It lacks the /wp-content/themes/etc part on it.

Is this a bug? and related this previously reported one?

Thanks again for the time, @atanas-dev

atanas-dev commented 4 years ago

The issues have been fixed and new versions have been released for wpemerge-theme, wpemerge-plugin and wpemerge-app-core.

To get the fixes in your 0.16.0 theme setup you can follow these steps:

  1. Download https://github.com/htmlburger/wpemerge-theme/compare/0.16.0...0.16.1.patch
  2. Apply the downloaded patch via git apply
  3. Run composer update
  4. Run yarn upgrade