JS scripts question working with slate v1

[pveen2]

Problem

First of all, i love working with slate v1 instead of timber, it is really a big upgrade! The autoprefix and minify is a big step forward for me!

But i have 1 question and i think it is webpack related but i hope you guys can help me in the right direction.

For example: i want to intergrate Flickety in slate, i add a file flickety.js in assets/templates and add the unminified script of Flickety.

In theme.js i do import './templates/flickety';

Now when i add my own script for flickety underneath the import statement in the $(document).ready(() => {}

i get a undefined error, same problem for instafeed.js.

When i add the scripts with a CDN link:

in the theme.liquid it works like a charm.

But i would like to integrate the scripts without the CDN but with slate.

I hope you someone can help me!

[t-kelly]

Best would be to use NPM so you can easily update it in the future:

npm install flickity --save

then import it the JS and CSS into your theme.js file:

import 'flickety';
import 'flickety/dist/flickety.min.css'

This is a pretty general JS/theme dev question concerning dependency management and webpack. There are plenty of resources available on the web that would answer this question. Please keep issues on the Slate repo specific to Slate bugs and feature requests.

[jonathanmoore]

I was actually running into the same issue, and I wasn't sure if it's an issue with Slate or simply a lack of knowledge on how webpack works. After running npm install flickity --save or any similar npm install yarn start no longer works. Prior to npm install it works as expected.

Here is what I see when trying yarn start

yarn run v1.3.2
$ slate-tools start
/bin/sh: slate-tools: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I also noticed that after running npm install flickity --save npm added a few packages but removed a even more.

+ flickity@2.0.11
added 8 packages and removed 1801 packages in 11.608s

[t-kelly]

@jonathanmoore you need to stick to using either Yarn or NPM. Mixing them is not recommended. I bet that's the source of your problems 😅

[pveen2]

I still need to get more webpack experience, got Flickety working with the tips of t-kelly. Only needed to add jQueryBridget plugin aswel.
@jonathanmoore , if you do yarn install everything will work again.

[lock[bot]]

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.