Unable to import javascript file in liquid

Highlighted
Tourist
5 0 3

I'm trying to import a js file into a liquid file.

 

I'm using parcel bundler to combine my js files in a single js file.

 

scripts/scripts.js:

import 'babel-polyfill';
import './productConfigurator.js';

 

I include the file in theme.liquid right before </head> like so:

{{ 'scripts.js' | asset_url | script_tag }}

Now I have a product-configurator.liquid file in the sections folder and I want to import the productConfigurator.js and call a test static function:

 

<div>
    <script type="module">
        import ProductConfigurator from "../scripts/productConfigurator.js"
        ProductConfigurator.callTest();
    </script>
</div>

that produces an error message:

 

GET https://inlivity.shop/scripts/productConfigurator.js net::ERR_ABORTED 404

 

when I change the scripts.js to this:

 

import 'babel-polyfill';
import ProductConfigurator from "./productConfigurator";

ProductConfigurator.callTest();

everything works fine.

 

How can I import js module files inside a liquid file?

1 Like
Highlighted
Hello inlivity,
Refer below link this will help you:
https://community.shopify.com/c/Shopify-Design/Include-Javascript-Files-Help/td-p/358653
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
5 0 3

I'm sorry, but that didn't help. It just points out how to add a js file in general

0 Likes
Highlighted
New Member
3 0 0

it is basically like this: 

{{ 'your-script.js' | asset_url | script_tag }} {{ 'your-styles.css' | asset_url | stylesheet_tag }}

Should be copied right above </head> tag in your theme.liquid Layout.

It may also be necessary to modify this line:

<!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'theme.js' | asset_url }}" defer="defer"></script><!--<![endif]-->

by removing defer="defer" to ensure that jQuery loads before your javascript, which may need it.

The way you are importing javascript module is right in parcel-bundler to combine my js files in a single js file.

0 Likes
Highlighted
Astronaut
1087 180 213

Within Shopify you can't use modules like this:

 import ProductConfigurator from "../scripts/productConfigurator.js"


You'll want to use liquid to import it as well, like you were doing with  {{ 'scripts.js' | asset_url | script_tag }}

However If you are coding a theme in your local machine I'd recommend that you just make one bundle with everything into one single file like app.js 

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes