Shopify / slate

Slate is a toolkit for developing Shopify themes. It's designed to assist your workflow and speed up the process of developing, testing, and deploying themes.
https://shopify.github.io/slate
MIT License
1.28k stars 364 forks source link

Javascript runs on localhost but not live after deploying #948

Open bitwitch opened 5 years ago

bitwitch commented 5 years ago

Problem

I have javascript files that I was including in scripts/layout/theme.js. These files were loading and executing fine when running on localhost. However, when I ran deploy the files were not executing nor were any errors logged.

After searching for similar issues and trying a lot of things, I finally discovered that if I moved the import statements out of theme.js and into template files then everything worked as expected.

There are other javascript files included in theme.js that work fine (for example third party JS), it seems that the issue is only with importing from the scripts/sections directory.

I am wondering what is going on here and if this is known / intended behavior? Are developers not intended to create subdirectories in scripts/ and then include files from this subdirectory in theme.js? Why does it work on localhost but not live?

If this is in fact a bug, then I am posting here to identify it.

Replication steps

My directory structure looks something like this:

scripts
|--- layout
|     |--- theme.js
|
|--- sections
|     |--- fileOne.js
|     |--- fileTwo.js
|
|--- templates
      |--- index.js
      |--- product.js

Include both fileOne and fileTwo in theme.js.

import '../sections/fileOne'; 
import '../sections/fileTwo';

Then, running yarn start works as expected and the javascript executes.

However, running yarn deploy and then previewing the live site, the javascript in fileOne and fileTwo does not execute, and no errors are logged.

More Information

The javascript works if I move the import statement for fileOne and fileTwo into templates/index.js. Also, if for example fileTwo is used by both the index and product templates, then the import statement for fileTwo must be placed both in templates/index.js and templates/product.js.

I am NOT running a local server at the same time I attempt to deploy or view the live site, I checked this.

I also have a live theme that I wrote a few months ago that is built on Slate v1 (though it may be a few updates behind) where the javascript is included exactly like I outlined above (from scripts/sections into theme.js), however it IS working on the production build. I suppose that implies that this behavior was introduced recently.

Perhaps related to #639

justinmetros commented 5 years ago

How is the code in ./sections structured? Is it possible you're running the code before your DOM or other dependencies are ready?

namwen commented 4 years ago

@bitwitch Did you ever figure this out? Running into the same problem.

grantkang5 commented 4 years ago

@bitwitch Same exact problem. Seems like only js files under scripts/template/*.js are being added as entrypoints when compiled.