Reloading & caching of assets

[estrattonbailey]

Reload is a little weird, sometimes updates are reflected properly. Pry need to confirm reload is happening after the asset is uploaded.

Also for JS/CSS updates, ensure it's only reloading once.

[antonioOrtiz]

@estrattonbailey Hey I can't get reloading at all. The documentation between the npm and github are off and this medium article is not explicit enough.

1. I went to my shopify admin created a private app and duplicated my theme for dev, stag, prod

2. Entered this in the slater.config.js file:

const path = require('path')

module.exports = {
  themes: {
    development: {
      id: '40913666136',
      password: 'secret',
      store: 'myshop.myshopify.com',
      ignore: [
        'settings_data.json' // leave this here to avoid overriding theme settings on sync
      ]
    }
  }
}

3. Ran npm run deploy:development
4. I then run and then npm start I get slatter running on https://localhost:4000/ Which I am not sure what that means. However when I navigate to my shopify instance and make some adjust locally. I see the terminal chugging but no updates.

Can you help me get where you are?

[waywardm]

are you on windows by any chance? I cannot get it to work either.

Regards

Paul Kidd

Thunderfix

---

From: antonio notifications@github.com Sent: Friday, May 17, 2019 9:10 pm To: the-couch/slater Cc: Subscribed Subject: Re: [the-couch/slater] Reloading & caching of assets (#16)

@estrattonbaileyhttps://github.com/estrattonbailey Hey I can't get reloading at all. The documentation between the npmhttps://npmjs.com/packages/slater and githubhttps://github.com/the-couch/slater are off and this medium articlehttps://medium.com/the-couch/getting-started-with-slater-bundling-and-deployment-with-any-existing-shopify-theme-d994a17f590f is not explicit enough.

1. I went to my shopify admin created a private app and duplicated my theme for dev, stag, prod

2. Entered this in the slater.config.js file:

const path = require('path')

module.exports = { themes: { development: { id: '40913666136', password: 'secret', store: 'myshop.myshopify.com', ignore: [ 'settings_data.json' // leave this here to avoid overriding theme settings on sync ] } } }

1. Ran npm run deploy:development
2. I then run and then npm start I get slatter running on https://localhost:4000/ Which I am not sure what that means. However when I navigate to my shopify instance and make some adjust locally. I see the terminal chugging but no updates.

Can you help me get where you are?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/the-couch/slater/issues/16?email_source=notifications&email_token=AC7LM6UZJVE2EHJCHDX6JI3PV4GJZA5CNFSM4HNEFBE2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVVX2XI#issuecomment-493583709, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AC7LM6UF6XT25PKF7FKKBODPV4GJZANCNFSM4HNEFBEQ.

[tomaszbujnowicz]

Hi, anyone has been able to figure out where the problem is? Every time when I update the CSS file, I got that one https://take.ms/lACIY

JS and CSS files are synced and then the browser reloads twice (once for each file)... every single time ;) Can't figure out why do we need to sync them both every time, is that required or?

[antonioOrtiz]

@waywardm I'm on a macOS Mojave Version 10.14.4. Can you get anything to work?

[estrattonbailey]

@antonioOrtiz hey, sorry to hear it's not working for you. Have you opened the localhost URL in your browser and made a security exception?

[antonioOrtiz]

@estrattonbailey Hey I attached a gif so you can see what's going on. I get the localhost: 4000 to render slater running and the changes are synced to the instance on shopify, but there is no live reloading.

Also like I mentioned earlier why do you have an explicit development setting if its going to hit your live theme anyway.

If someone doesn't chime in, I guess the logical thing to do would be to make another instance of your site solely for development.

Anyway I attached a gif here:

[seandogg]

@antonioOrtiz Your localhost looks good. The correct response is slater running which is what you've got. Here is my slater.config.js file, maybe you can benefit from seeing this in solving the live/development issue you're experiencing. In this example I have three themes: production, staging, and development

const path = require('path')

module.exports = {
 themes: {
    production: {
      id: '47992111158',
      password: 'xxxxxxxxxxxx',
      store: 'xxxxxx.myshopify.com',
      ignore: [
        'settings_data.json', 'settings_schema.json' // leave this here to avoid overriding theme settings on sync
      ]
    },
    development: {
      id: '47863857206',
      password: 'xxxxxxxxxx',
      store: 'xxxxxxxx.myshopify.com',
      ignore: [
        'settings_data.json', 'settings_schema.json' // leave this here to avoid overriding theme settings on sync
      ]
    },
    staging: {
      id: '48006332470',
      password: 'xxxxxxxx',
      store: 'xxxxxxx.myshopify.com',
      ignore: [
        'settings_data.json', 'settings_schema.json' // leave this here to avoid overriding theme settings on sync
      ]
    }
  }
}

As for live-reloading, perhaps test it with css, maybe using body { background-color: fuchsia !important; } to see if you get an interesting reload from slater. Mucking with the settings_data.json file or anything in config/ is probably not the most ideal way to test hot-reload. Not 100% sure if Slater is listening to config folder changes.

[estrattonbailey]

@seandogg thanks for chiming in and helping answer questions! CC @all-contributors

@antonioOrtiz thanks for the GIF, super helpful. Not sure what's up, but I'm sure we can get it figured out :)

Would you mind sharing a screenshot or letting me know if there are errors in your JS console for the americancrewshop.myshopify.com window? If settings_data.json is not ignored in your slater.config.js, then it should live-reload on the frontend.

Also like I mentioned earlier why do you have an explicit development setting if its going to hit your live theme anyway.

If someone doesn't chime in, I guess the logical thing to do would be to make another instance of your site solely for development.

I'm not sure I'm aware of another option here. Slater doesn't proxy the site locally, like Slate does, so yes, everything is pushed to the theme you specify. As @seandogg says, it's easy to specify separate themes though, which should make for a pretty nice DX. If you have suggestions here we'd love to hear them!

[tomaszbujnowicz]

Ah, that drives me crazy. Every time when the new CSS is uploaded, the browser reloads 2-3 times. Any hints what could be wrong? I've been trying to play around with the "sync" but couldn't figure what's the issue. https://github.com/the-couch/slater/issues/16#issuecomment-496942291

[antonioOrtiz]

@estrattonbailey @seandogg Thanks so much for sharing your experience and insight with slater!

So funny I didn't even think of looking in the console! Great call! I mean slater is analogous to any other great development tool i.e. gulp, browser-sync etc. so I should have thought of that! I think the fact shopify is playing a big role and doing so much for you, perhaps made me forget it created like with any other web tech under the hood.

Anyway below is the screenshot of my console.

On first blush I'm thinking Uncaught ReferenceError: b_close is not defined and Uncaught TypeError: $[_0xe319[2]] is not a function could be breaking the live-reloading but not sure.

So with:

As @seandogg says, it's easy to specify separate themes though, which should make for a pretty nice DX.

Your saying:

1. Go into themes > current theme and under the actions dropdown, duplicate the live theme and call it some-theme-development

2. So that means each duplicate gets its own id? And that's what you plug into the the slater.config.js

module.exports = {
  themes: {
    development: {
      id: '72942518324', /* Get id from newly duplicated theme */
      password: 'c895a56f00dc4fcdd83bcf9d29d30480', /* Where is this coming from */
      store: 'americancrewshop.myshopify.com',
      ignore: [
        'settings_data.json' // leave this here to avoid overriding theme settings on sync
      ]
    }
  }
}

So is the password coming from the generating of a private app which you would create to coincide with the duplicate theme? That came from slate...

Like for example I duplicated my main theme and called it development and then I create a private app named after that duplicated theme:

e.g. some-theme-development and some-theme-private-app-development

Is that how it will work?

[estrattonbailey]

@antonioOrtiz hey no problem, happy to help :)

So Slater outputs your compiled JS to /assets/index.js. During development, that file also includes the live-reload script. If there's an error in that file, it could break the live-reloading.

First thing I'd recommend is ensuring there are no errors coming from your main index.js file. If that doesn't fix it, then we know it's something else.

Re: duplicating themes, you're spot on. I'll make an update the the README to make that more clear. Each theme should have its own id.

As for the password property, yep, it's created when you create a private app. Didn't even know Slate did that for you! You can reuse the same private app for all themes, only the id needs to be different.

[estrattonbailey]

Still learning how best to use the allcontributors bot :P

@all-contributors please add @seandogg for question

[allcontributors[bot]]

@estrattonbailey

I've put up a pull request to add @seandogg! :tada:

[estrattonbailey]

@all-contributors please add @antonioOrtiz for bug and doc

[allcontributors[bot]]

@estrattonbailey

I've put up a pull request to add @antonioOrtiz! :tada:

[estrattonbailey]

@tomaszbujnowicz try installing latest, npm i slater@latest -g or npm i slater@latest --save-dev. Version should be 1.5.0

I did have a duplicate "refresh" call in there, but it does technically receive two updates for both index.js and index.css. What I did was debounce those calls by 100ms, which should catch most instances and only call "refresh" once on each JS or CSS change.

[antonioOrtiz]

@estrattonbailey Thank you SOOO much for your help with this and for adding me as a contributor!

One last thing. This may fall into more of a shopify question—but here goes:

Would the theme would have to be active (meaning published) for slater to make updates? I would think so because then how would you be seeing any of the changes...

And I guess if you had a main theme which you were treating as production and then wanted to work on development does that mean all your customers would then be seeing development when you switched? I could think of ways to circumvent that. But because of the uniqueness of shopify i.e. liquid files etc. I was interested in knowing how to handle that.

Thanks so much!

P.S. My company is using shopify, and this workflow could be just what we looking for!!!! Thanks for all your work towards it. Its a great tool!

[estrattonbailey]

@antonioOrtiz my pleasure!

With Shopify, you can preview individual themes using the "Actions" dropdown on the Themes page. This is the same URL that is generated when you run slater in your command line, just simply click on that link.

I recommend always leaving your production theme published, and develop on one or more duplicate themes. Then, when you're ready to publish your updates, you can deploy to your production theme without having to actually unpublish/publish anything from the Shopify admin.

Also, keep in mind that Slater doesn't download the theme from Shopify. Any changes that are made in the Shopify theme editor (or by plugins) can potentially be overwritten by Slater when it syncs files.

[estrattonbailey]

@antonioOrtiz is live-reload working for you now?

[antonioOrtiz]

@estrattonbailey So just to update you the files definitely sink, but I can't get the live-reloading to work. Just going to share a view newer things which could help:

I am using slater v1.4.0

Ran:

npm run deploy:development

which is doing from package.json scripts.deploy:development "slater build && slater sync --theme development"

This is what I get back from the terminal:

slater v1.4.0

build development theme (https://americancrewshop.myshopify.com/?fts=0&preview_theme_id=73412706356)

error ./src/styles/main.css
Module build failed (from /Users/antoniopavicevac-ortiz/.nvm/versions/node/v10.15.3/lib/node_modules/slater/node_modules/@slater/compiler/node_modules/mini-css-extract-plugin/di
st/loader.js):
ModuleBuildError: Module build failed (from /Users/antoniopavicevac-ortiz/.nvm/versions/node/v10.15.3/lib/node_modules/slater/node_modules/@slater/compiler/node_modules/postcss-
loader/src/index.js):
Error: Failed to find 'svbstrate/src/lib/reset.css'
   in [
     /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/styles
   ]
     at resolveModule.catch.catch (/Users/antoniopavicevac-ortiz/.nvm/versions/node/v10.15.3/lib/node_modules/slater/node_modules/postcss-import/lib/resolve-id.js:35:13)
     at runLoaders (/Users/antoniopavicevac-ortiz/.nvm/versions/node/v10.15.3/lib/node_modules/slater/node_modules/webpack/lib/NormalModule.js:301:20)
     at /Users/antoniopavicevac-ortiz/.nvm/versions/node/v10.15.3/lib/node_modules/slater/node_modules/loader-runner/lib/LoaderRunner.js:367:11
     at /Users/antoniopavicevac-ortiz/.nvm/versions/node/v10.15.3/lib/node_modules/slater/node_modules/loader-runner/lib/LoaderRunner.js:233:18
     at context.callback (/Users/antoniopavicevac-ortiz/.nvm/versions/node/v10.15.3/lib/node_modules/slater/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
     at Promise.resolve.then.then.catch (/Users/antoniopavicevac-ortiz/.nvm/versions/node/v10.15.3/lib/node_modules/slater/node_modules/@slater/compiler/node_modules/postcss-loa
der/src/index.js:208:9)
  @ ./src/scripts/index.js 9:0-28,./src/scripts/index.js
Module not found: Error: Can't resolve 'lazim' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts'
resolve 'lazim' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts'
   Parsed request is a module
   using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./src/scripts)
     Field 'browser' doesn't contain a valid alias configuration
     resolve as module
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/node_modules doesn't exist or is not a directory
       /Users/node_modules doesn't exist or is not a directory
       /node_modules doesn't exist or is not a directory
       looking for modules in /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules
         using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules)
           Field 'browser' doesn't contain a valid alias configuration
           using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules/lazim)
             no extension
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/lazim doesn't exist
             .wasm
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/lazim.wasm doesn't exist
             .mjs
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/lazim.mjs doesn't exist
             .js
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/lazim.js doesn't exist
             .json
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/lazim.json doesn't exist
             as directory
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/lazim doesn't exist
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/node_modules]
[/Users/antoniopavicevac-ortiz/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/lazim]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/lazim.wasm]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/lazim.mjs]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/lazim.js]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/lazim.json]
  @ ./src/scripts/index.js 11:0-26 19:13-18,./src/scripts/router.js
Module not found: Error: Can't resolve 'operator' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts'
resolve 'operator' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts'
   Parsed request is a module
   using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./src/scripts)
     Field 'browser' doesn't contain a valid alias configuration
     resolve as module
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/node_modules doesn't exist or is not a directory
       /Users/node_modules doesn't exist or is not a directory
       /node_modules doesn't exist or is not a directory
       looking for modules in /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules
         using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules)
           Field 'browser' doesn't contain a valid alias configuration
           using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules/operator)
             no extension
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/operator doesn't exist
             .wasm
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/operator.wasm doesn't exist
             .mjs
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/operator.mjs doesn't exist
             .js
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/operator.js doesn't exist
             .json
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/operator.json doesn't exist
             as directory
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/operator doesn't exist
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/node_modules]
[/Users/antoniopavicevac-ortiz/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/operator]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/operator.wasm]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/operator.mjs]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/operator.js]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/operator.json]
  @ ./src/scripts/router.js 1:0-32 9:13-21
  @ ./src/scripts/index.js,./src/scripts/app.js
Module not found: Error: Can't resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts'
resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts'
   Parsed request is a module
   using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./src/scripts)
     Field 'browser' doesn't contain a valid alias configuration
     resolve as module
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/node_modules doesn't exist or is not a directory
       /Users/node_modules doesn't exist or is not a directory
       /node_modules doesn't exist or is not a directory
       looking for modules in /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules
         using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules)
           Field 'browser' doesn't contain a valid alias configuration
           using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules/picoapp)
             no extension
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
             .wasm
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm doesn't exist
             .mjs
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs doesn't exist
             .js
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js doesn't exist
             .json
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json doesn't exist
             as directory
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/node_modules]
[/Users/antoniopavicevac-ortiz/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json]
  @ ./src/scripts/app.js 1:0-34 21:15-22
  @ ./src/scripts/index.js,./src/scripts/components/header.js
Module not found: Error: Can't resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components'
resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components'
   Parsed request is a module
   using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./src/scripts/components)
     Field 'browser' doesn't contain a valid alias configuration
     resolve as module
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/node_modules doesn't exist or is not a directory
       /Users/node_modules doesn't exist or is not a directory
       /node_modules doesn't exist or is not a directory
       looking for modules in /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules
         using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules)
           Field 'browser' doesn't contain a valid alias configuration
           using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules/picoapp)
             no extension
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
             .wasm
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm doesn't exist
             .mjs
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs doesn't exist
             .js
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js doesn't exist
             .json
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json doesn't exist
             as directory
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/node_modules]
[/Users/antoniopavicevac-ortiz/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json]
  @ ./src/scripts/components/header.js 1:0-36 2:15-24
  @ ./src/scripts/app.js
  @ ./src/scripts/index.js,./src/scripts/components/cartDrawer.js
Module not found: Error: Can't resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components'
resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components'
   Parsed request is a module
   using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./src/scripts/components)
     Field 'browser' doesn't contain a valid alias configuration
     resolve as module
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/node_modules doesn't exist or is not a directory
       /Users/node_modules doesn't exist or is not a directory
       /node_modules doesn't exist or is not a directory
       looking for modules in /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules
         using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules)
           Field 'browser' doesn't contain a valid alias configuration
           using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules/picoapp)
             no extension
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
             .wasm
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm doesn't exist
             .mjs
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs doesn't exist
             .js
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js doesn't exist
             .json
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json doesn't exist
             as directory
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/node_modules]
[/Users/antoniopavicevac-ortiz/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json]
  @ ./src/scripts/components/cartDrawer.js 5:0-36 33:15-24
  @ ./src/scripts/app.js
  @ ./src/scripts/index.js,./src/scripts/components/slater-welcome.js
Module not found: Error: Can't resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components'
resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components'
   Parsed request is a module
   using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./src/scripts/components)
     Field 'browser' doesn't contain a valid alias configuration
     resolve as module
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/node_modules doesn't exist or is not a directory
       /Users/node_modules doesn't exist or is not a directory
       /node_modules doesn't exist or is not a directory
       looking for modules in /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules
         using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules)
           Field 'browser' doesn't contain a valid alias configuration
           using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules/picoapp)
             no extension
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
             .wasm
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm doesn't exist
             .mjs
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs doesn't exist
             .js
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js doesn't exist
             .json
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json doesn't exist
             as directory
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/node_modules]
[/Users/antoniopavicevac-ortiz/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json]
  @ ./src/scripts/components/slater-welcome.js 1:0-36 2:15-24
  @ ./src/scripts/app.js
  @ ./src/scripts/index.js,./src/scripts/components/cartDrawerItem.js
Module not found: Error: Can't resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components'
resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components'
   Parsed request is a module
   using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./src/scripts/components)
     Field 'browser' doesn't contain a valid alias configuration
     resolve as module
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/node_modules doesn't exist or is not a directory
       /Users/node_modules doesn't exist or is not a directory
       /node_modules doesn't exist or is not a directory
       looking for modules in /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules
         using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules)
           Field 'browser' doesn't contain a valid alias configuration
           using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules/picoapp)
             no extension
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
             .wasm
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm doesn't exist
             .mjs
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs doesn't exist
             .js
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js doesn't exist
             .json
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json doesn't exist
             as directory
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/node_modules]
[/Users/antoniopavicevac-ortiz/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json]
  @ ./src/scripts/components/cartDrawerItem.js 1:0-36 3:15-24
  @ ./src/scripts/app.js
  @ ./src/scripts/index.js,./src/scripts/components/product.js
Module not found: Error: Can't resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components'
resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components'
   Parsed request is a module
   using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./src/scripts/components)
     Field 'browser' doesn't contain a valid alias configuration
     resolve as module
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/node_modules doesn't exist or is not a directory
       /Users/node_modules doesn't exist or is not a directory
       /node_modules doesn't exist or is not a directory
       looking for modules in /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules
         using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules)
           Field 'browser' doesn't contain a valid alias configuration
           using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules/picoapp)
             no extension
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
             .wasm
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm doesn't exist
             .mjs
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs doesn't exist
             .js
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js doesn't exist
             .json
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json doesn't exist
             as directory
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/node_modules]
[/Users/antoniopavicevac-ortiz/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json]
  @ ./src/scripts/components/product.js 1:0-36 3:15-24
  @ ./src/scripts/app.js
  @ ./src/scripts/index.js,./src/scripts/components/product-selection.js
Module not found: Error: Can't resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components'
resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components'
   Parsed request is a module
   using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./src/scripts/components)
     Field 'browser' doesn't contain a valid alias configuration
     resolve as module
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/node_modules doesn't exist or is not a directory
       /Users/node_modules doesn't exist or is not a directory
       /node_modules doesn't exist or is not a directory
       looking for modules in /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules
         using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules)
           Field 'browser' doesn't contain a valid alias configuration
           using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules/picoapp)
             no extension
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
             .wasm
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm doesn't exist
             .mjs
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs doesn't exist
             .js
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js doesn't exist
             .json
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json doesn't exist
             as directory
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/node_modules]
[/Users/antoniopavicevac-ortiz/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json]
  @ ./src/scripts/components/product-selection.js 1:0-36 6:15-24
  @ ./src/scripts/app.js
  @ ./src/scripts/index.js,./src/scripts/components/accountLogin.js
Module not found: Error: Can't resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components'
resolve 'picoapp' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components'
   Parsed request is a module
   using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./src/scripts/components)
     Field 'browser' doesn't contain a valid alias configuration
     resolve as module
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/node_modules doesn't exist or is not a directory
       /Users/node_modules doesn't exist or is not a directory
       /node_modules doesn't exist or is not a directory
       looking for modules in /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules
         using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules)
           Field 'browser' doesn't contain a valid alias configuration
           using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules/picoapp)
             no extension
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
             .wasm
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm doesn't exist
             .mjs
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs doesn't exist
             .js
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js doesn't exist
             .json
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json doesn't exist
             as directory
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp doesn't exist
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/components/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/node_modules]
[/Users/antoniopavicevac-ortiz/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.wasm]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.mjs]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.js]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/picoapp.json]
  @ ./src/scripts/components/accountLogin.js 1:0-36 2:15-24
  @ ./src/scripts/app.js
  @ ./src/scripts/index.js,./src/scripts/lib/select.js
Module not found: Error: Can't resolve 'sliced' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/lib'
resolve 'sliced' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/lib'
   Parsed request is a module
   using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./src/scripts/lib)
     Field 'browser' doesn't contain a valid alias configuration
     resolve as module
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/lib/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/node_modules doesn't exist or is not a directory
       /Users/node_modules doesn't exist or is not a directory
       /node_modules doesn't exist or is not a directory
       looking for modules in /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules
         using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules)
           Field 'browser' doesn't contain a valid alias configuration
           using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules/sliced)
             no extension
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/sliced doesn't exist
             .wasm
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/sliced.wasm doesn't exist
             .mjs
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/sliced.mjs doesn't exist
             .js
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/sliced.js doesn't exist
             .json
               Field 'browser' doesn't contain a valid alias configuration
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/sliced.json doesn't exist
             as directory
               /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/sliced doesn't exist
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/lib/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/node_modules]
[/Users/antoniopavicevac-ortiz/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/sliced]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/sliced.wasm]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/sliced.mjs]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/sliced.js]
[/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules/sliced.json]
  @ ./src/scripts/lib/select.js 1:0-28 7:11-17 10:11-17
  @ ./src/scripts/index.js,./src/scripts/lib/cart.js
Module not found: Error: Can't resolve 'unfetch' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/lib'
resolve 'unfetch' in '/Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/lib'
   Parsed request is a module
   using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./src/scripts/lib)
     Field 'browser' doesn't contain a valid alias configuration
     resolve as module
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/lib/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/scripts/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/src/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/Sites/node_modules doesn't exist or is not a directory
       /Users/antoniopavicevac-ortiz/node_modules doesn't exist or is not a directory
       /Users/node_modules doesn't exist or is not a directory
       /node_modules doesn't exist or is not a directory
       looking for modules in /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/node_modules
         using description file: /Users/antoniopavicevac-ortiz/Sites/americancrewshop.myshopify.com/americancrewshop/package.json (relative path: ./node_modules)
slater v1.4.0

slater.config.s:

const path = require('path')

module.exports = {
  themes: {
    development: {
      id: '73412706356',
      password: 'c895a56f00dc4fcdd83bcf9d29d30480',
      store: 'americancrewshop.myshopify.com',
      ignore: [
        'settings_data.json', 'settings_schema.json' // leave this here to avoid overriding theme settings on sync
      ]
    }
  }
}

Went into theme.liquid And pasted this script before closing </body> tag:

        <script src='{{ ' index.js ' | asset_url }}' defer='defer'></script>

ran npm start which yields slater watch

Which enables a server running on https://localhost:4000/ and a message in the browser slater running

And upon navigating to theme.css.liquid and writing to test:

body {
    background-color: red !important;
}

It does propagate but does not reload.

My thinking at this point is the errors I'm getting in the browser console and the terminal must not matter. Well maybe at least the browser console only because changes are making way to the site, its just the reloading which is not happening.

Thank you in advance!

[estrattonbailey]

@antonioOrtiz hey, thanks for the details. Have you installed the npm dependencies?

[antonioOrtiz]

@estrattonbailey Sure! Yup! One question for you. Normally in most local development settings — i.e. MAMP for Wordpress, static sites or SPA's using a static server. The server or port is where the content is being viewed and worked on. In slaters case https://localhost:4000/ is just showing slater running Is there something to that?

[estrattonbailey]

@antonioOrtiz that's strange, because all those errors are saying that those modules are not installed.

To be clear, you should be in the root of your project and run npm i and slater from there.

Also, you still haven't answered my previous questions of which OS and Node version you're using.

[antonioOrtiz]

@estrattonbailey

Folder structure & node version

OS:

[estrattonbailey]

@antonioOrtiz thanks! Good to know we're on the same page.

So I'm not entirely sure how to debug further. There are no errors above that point to an internal issue necessarily, just that those npm dependencies can't be resolved from the local node modules directory. That's not to say that there isn't and internal issue, but just that those errors don't point there explicitly.

The live-reload code is bundled into index.js, so if that fails to continues to fail to compile – as it is currently – then you won't have live reload.

Re: localhost URL, the GET request to that endpoint is just in place so that users can ensure that Slater is running. 4000 serves as the websocket port that communicates with the index.js file that is loaded on the Shopify site. While Slate proxies all files to a localhost URL, we opt to keep things simple and reload the remote Shopify site. So in our case, locahost:4000 is simply a utility.

At this point I'm thinking this is an issue specific to your machine, so I don't think I'll be able to help you debug much further. If you can pinpoint an issue to Slater, we'd be happy to hear about it and reopen this so that we can get it fixed :)

EDIT: btw, my apologies, I had never asked you for OS/Node versions. Was mixed up with another issue. Long week!