slate
slate copied to clipboard
Javascript runs on localhost but not live after deploying
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
How is the code in ./sections structured? Is it possible you're running the code before your DOM or other dependencies are ready?
@bitwitch Did you ever figure this out? Running into the same problem.
@bitwitch Same exact problem. Seems like only js files under scripts/template/*.js
are being added as entrypoints when compiled.