Help with Importing JavaScript Module from main-product.liquid in Shopify

Technical Q&A

Topic summary

A developer is struggling to import a JavaScript variable (productSizes) from main-product.liquid (located in the Sections folder) into size-guide-1.js.liquid (in the Assets folder) within a Shopify store.

Error encountered:

  • TypeError: Failed to resolve module specifier with an “Invalid relative URL or base scheme” message

Current implementation:

  • A script tag is added in main-product.liquid
  • An import statement using Liquid templating ({% ... %}) is attempted in size-guide-1.js.liquid

Key issue:

  • The module import syntax appears malformed or incompatible with Shopify’s file structure
  • The hierarchical relationship between Sections and Assets folders may be causing path resolution problems

Status: The question remains unanswered, with the original poster adding a follow-up message (content unclear). The developer seeks guidance on proper import syntax and understanding why the current approach fails.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I’m encountering an issue with JavaScript modules in my Shopify store, and I could really use some help.

I’ve added a script tag in main-product.liquid like this:

This file is located in the Sections folder.

Then, in size-guide-1.js.liquid which is in the Assets folder, I tried to import productSizes like this:

import productSizes from "{% section 'main-product' %}";

However, this doesn’t seem to work, and I get the following error:

TypeError: Failed to resolve module specifier "". Invalid relative URL or base scheme isn't hierarchical.

Can anyone help me understand why this import is failing and how to properly import the productSizes variable from main-product.liquid into size-guide-1.js.liquid?

Thanks in advance!

2

Ignore this message.