No template-based JS bundles are imported on Product and Collection template alternatives

[davidwarrington]

This repo is currently on low maintenance. See README for details

Problem

I'm not sure if I'm going about this the wrong way, but the template based JS bundling doesn't seem to work on product or collection templates. I tried creating templates/product.product-builder.js template file to be used on templates/product.product-builder.liquid and none of the JS works. Similarly with the collection templates. To make matters worse, neither import templates/product.js or template/collection.js either.

This does work fine for alternative page templates though.

Replication steps

1. Make matching template files in your src/templates and src/scripts/templates directories, e.g src/template/product.alt.liquid and src/scripts/templates/product.alt.js.
2. Add a simple script such as a console.log to your new JS file.
3. Run yarn watch.
4. Set a product or collection page to use the new alternative template via the admin.
5. Visit said page and check

[justinmetros]

I have found that when you add a new js file to src/scripts/templates - you will need to run a full yarn start again.

Edit: Just ran into this. Definitely looks like a bug. Webpack is emitting the chunks but they are not getting written properly to style-tags and/or script-tags. Maybe something in here? https://github.com/Shopify/slate/blob/master/packages/slate-tools/tools/webpack/style-tags.html

[davidwarrington]

Not going to lie, I'm somewhat relieved that I wasn't just being stupid and missing a step like that