Cannot reference JS asset files in Liquid

[t-kelly]

Followup to #407 and #408

Problem

There is currently a bug when including a script asset reference, e.g. <script src="{{ '../assets/scripts/modernizr.js' | asset_url }}"></script>, where the src gets transformed into {{ [object Object] | asset_url }} and not {{ 'modernizr.js' | asset_url }}.

Replication steps

How to replicate the problem. Screenshots or video?

More Information

This transformation happens so that in dev build (slate-tools start) we can reference the localhost, and then in prod build (slate-tools build) we can reference the lib uploaded on the Shopify CDN. To avoid this transformation and always reference the Shopify CDN, developers could use double quotes, e.g. {{ "../assets/vendors/modernizr.js" | asset_url }}, but we should also support the above approach.

[YCMitch]

Wait so for my own sanity, it's currently impossible to include a script from the assets folder, right?

Like the tutorial for multiple currencies is currently not actually achievable in Slate?

[t-kelly]

@MitchEff -- correct. In the mean time, just import that file like any other JS file into your main theme JS file:

src/assets/layout/theme.js

import 'jquery.currencies.min.js';

[ghost]

It also seems to be stripping stylesheet_tag and script_tag filters.

input

{{ '../assets/static/some-asset.js' | asset_url | script_tag }} 
{{ '../assets/static/some-asset.scss' | asset_url | stylesheet_tag  }} 

output

https://localhost:8080/some-asset.js
https://localhost:8080/some-asset.scss

[numediaweb]

Also stuck on this: the documentation of Slate needs huge improvement :(

undefined
./layout/theme.liquid
Module not found: Error: Can't resolve './admin-panel.js' in '/Users/aidrissi/apps/trassig-theme-dev/src/layout'
 @ ./layout/theme.liquid ./admin-panel.js
 @ . sync ^\.\/layout.*\.liquid$
 @ ../node_modules/@shopify/slate-tools/tools/webpack/static-files-glob.js
 @ multi ../node_modules/@shopify/slate-tools/tools/webpack/hot-client.js ../node_modules/@shopify/slate-tools/tools/webpack/static-files-glob.js

[sebbean]

@numediaweb can you show how you're referencing the .js file in your theme.liquid?

[numediaweb]

@sebbean I fixed it by switching single quotes to double.. wasn't easy to find though in documentation :(

[callaginn]

@numediaweb Did you figure out where to put your css or js sources? I've tried putting them in various locations in the src folder, such as src/assets/scripts, src/assets/templates, src/assets/static, but the slate-tools watcher doesn't do anything with them. I even tried moving them to the /dist folder, but they don't upload automatically.

I've only found two options that work, but they aren't the best solution:

• Compile JS using CodeKit and upload via the web interface (too slow). Haven't found a way to compile JS via yarn / slate-tools yet.
• Insert CSS into src/assets/styles/theme.scss as @import statements. I've also found I can insert css into theme.scss.liquid. Is there a way to insert a new css link though?

All of this was really straightforward with Slate v0, but Slate v1 is throwing me for a loop.

[sebbean]

@callaginn i'm putting them in my static folder actually src/assets/static/vueapp.js
seems to work ok - only on a full deploy.

npm start doesn't seem to see any file changes in there while i'm deving

[t-kelly]

Assets have been simplified in #850 and the change is now available in v1.0.0-beta.12

Docs that have also been updated:

• https://github.com/Shopify/slate/wiki/Slate-themes
• https://github.com/Shopify/slate/wiki/Template-and-layout-bundles
• https://github.com/Shopify/slate/wiki/Local-development

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.