hayes0724 / shopify-packer Goto Github PK

When running packer theme:download I get the following error:

`
Error downloading files

TypeError: obj[key].reduce is not a function
`

Am I missing something?

Also, I'm curious what workflow you use for making sure you have the latest them files. I'm assuming you need to run theme:download to make sure you always have the latest files in case changes were made via the shopify editor?

Thanks for making this great tool available.

Describe the bug
A clear and concise description of what the bug is.
Whilst running the packer watch command and saving two files in quick succession, the library throws a 'Deploy already in progress' error.

This causes the watch command to stop. Ideally it should just carry on running, and queue another deployment with the new file?

To Reproduce
Steps to reproduce the behavior:

1. npm run watch
2. Change a file
3. Save
4. Change again
5. Save
6. See error

(Note: Steps 2-5 need to happen quite quickly, so that the second save happens before the first finishes deploying)

Expected behavior
I'd expect the second file saved to get queued for deployment after the first.

Screenshots

System (please complete the following information):

• OS: Mac OSX 10
• Node Version: 15.4.0
• NPM Version: 7.0.15
• Browser: Chrome

Packer (please complete the following information):

• Version: 1.3.4

Theme (please complete the following information):

• Shopify Packer theme [e.g. True]
• Version 1.0.9

Describe the bug
After cloning repo from coworker, i run yarn install.

When running 'packer start', i got error in my terminal:

ERROR in ./src/scripts/layout/theme.js 13:0-33
Module not found: Error: Can't resolve 'style-loader' in '/Users/josipanic/Projekti/the-hardscape-exchange'
resolve 'style-loader' in '/Users/josipanic/Projekti/the-hardscape-exchange'
Parsed request is a module
using description file: /Users/josipanic/Projekti/the-hardscape-exchange/package.json (relative path: .)
resolve as module
looking for modules in /Users/josipanic/.config/yarn/global/node_modules/@hayes0724/shopify-packer/node_modules
single file module
using description file: /Users/josipanic/.config/yarn/global/node_modules/@hayes0724/shopify-packer/package.json (relative path: ./node_modules/style-loader)
no extension
/Users/josipanic/.config/yarn/global/node_modules/@hayes0724/shopify-packer/node_modules/style-loader doesn't exist
.js
/Users/josipanic/.config/yarn/global/node_modules/@hayes0724/shopify-packer/node_modules/style-loader.js doesn't exist
/Users/josipanic/.config/yarn/global/node_modules/@hayes0724/shopify-packer/node_modules/style-loader doesn't exist
looking for modules in /Users/josipanic/.config/yarn/global/node_modules/@hayes0724/shopify-packer/src
single file module
using description file: /Users/josipanic/.config/yarn/global/node_modules/@hayes0724/shopify-packer/package.json (relative path: ./src/style-loader)
no extension
/Users/josipanic/.config/yarn/global/node_modules/@hayes0724/shopify-packer/src/style-loader doesn't exist
.js
/Users/josipanic/.config/yarn/global/node_modules/@hayes0724/shopify-packer/src/style-loader.js doesn't exist
/Users/josipanic/.config/yarn/global/node_modules/@hayes0724/shopify-packer/src/style-loader doesn't exist
looking for modules in /Users/josipanic/Projekti/the-hardscape-exchange/node_modules
single file module
using description file: /Users/josipanic/Projekti/the-hardscape-exchange/package.json (relative path: ./node_modules/style-loader)
no extension
/Users/josipanic/Projekti/the-hardscape-exchange/node_modules/style-loader doesn't exist
.js
/Users/josipanic/Projekti/the-hardscape-exchange/node_modules/style-loader.js doesn't exist
/Users/josipanic/Projekti/the-hardscape-exchange/node_modules/style-loader doesn't exist
looking for modules in /Users/josipanic/Projekti/the-hardscape-exchange
single file module
using description file: /Users/josipanic/Projekti/the-hardscape-exchange/package.json (relative path: ./style-loader)
no extension
/Users/josipanic/Projekti/the-hardscape-exchange/style-loader doesn't exist
.js
/Users/josipanic/Projekti/the-hardscape-exchange/style-loader.js doesn't exist
/Users/josipanic/Projekti/the-hardscape-exchange/style-loader doesn't exist

Also, seems there are missing node modules in my global and project folder.

Expected behavior
Packer local development will start

System (please complete the following information):

• OS: [OSX]
• Node Version [15.20.0]
• NPM Version [7.6.3]
• Browser [All]

Packer (please complete the following information):

• Version [2.0.13]

Theme (please complete the following information):

• Shopify Packer theme [True]
• Version [1.0.13]

Describe the bug
The new 2.x versions of packer causes several postcss plugins like tailwindcss, postcss-import, and postcss-nested to issue an error, "PostCSS plugin [XXX] requires PostCSS 8""

To Reproduce
Steps to reproduce the behavior:

1. install (or upgrade) packer 2.x globally (this happens with both yarn and npm)
2. add the following to your postcss.config.js file:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-preset-env')({
      stage: 1, 
      features: {
        'focus-within-pseudo-class': false
      } 
    }),
    require('postcss-nested'),
    require('autoprefixer'),
    // require('postcss-preset-env'),
    require('cssnano')({
      preset: 'advanced',
    })
  ]
}

3. import css file in your js template entrypoint
4. packer start

System (please complete the following information):

• OS: macOS 11.2.3
• Node Version v15.11.0 (also happens with v14.16.0)

Packer (please complete the following information):

• Version 2.x (any of them, I specifically tried several)

Theme (please complete the following information):

• Shopify Packer theme [True]

When running build. I get the following.
`
@hayes0724\shopify-packer\src\env\index.js:25
process.env[key] = env[name][_getConfigKey(key)];
^

TypeError: Cannot read property 'store' of undefined
`

Feels like Im missing something obvious

My colleague already made html templates for our new store.
These templates have sub-directories in their 'assets' directory. example "assets/css/...", "assets/js/...", "assets/plugins/font-awesome/...", "assets/images/...";

In the process of splitting and converting these templates into '.liquid' files; and deploying, I found out that the Shopify "assets" directory does not support sub-directories. (I'm very new to Shopify theme'ing)

I came here searching for a way to flatten the original 'assets' directory, so that all references to the assets in the in all 'js' and 'css' files, will be 'corrected', before I "theme deploy".

Is this something I can achieve with this package? If yes, a little help please on how to use the package to go about it.

While creating a new project, following the documentation's Quick Start; On step 3. packer theme:create, I get the error Theme name is required.

my config.json file:

...
"development": {
      "id": "",
      "password": "xxxxxxxxxxxxxxxxxxxxx",
      "store": "xxxxxxx.myshopify.com",
      "ignore": ["settings_data.json"]
    }
 ...

Describe the bug
Hello and thanks for creating this great tool. Love it. I found a bug when running "packer start", its not compiling scss and js, but in terminal i see that changes are detected. But when running packer build, changes are then compiled and working as expected. Can you please help?

To Reproduce
Steps to reproduce the behavior:

1. run packer start
2. change scss or js
3. nothing changes, new files are not compiled both on localhost with hmr or preview via shopify admin
4. close terminal session
5. run packer build
6. run packer deploy
7. changes are compiled and visible

Expected behavior
When you change scss or js file, it get compiled and changes visible on localhost or preview via admin

Screenshots
If applicable, add screenshots to help explain your problem.

System (please complete the following information):

• OS: osx
• Node Version: v14.16.0
• NPM Version: v7.7.6
• Browser: all

Packer (please complete the following information):

• Version: latest

Theme (please complete the following information):

• [Shopify Packer theme]
• Version: latest

For me all packer versions above 1.3.8 successfully compile (as in there are no errors in the terminal) and upload but the JS doesn't evaluate and the CSS file(s) are blank.

If I open the browser inspector I can see a <script> and <link> tag before </head>. If I open the JS file(s) link in a new tab I can see the code is correctly in there, but the browser doesn't load or evaluate the javascript code webpack builds; it never runs. I emptied all the JS code and placed console.log('testing packer in [template name here]') in each template and you never see a single console message on any of the templates. Likewise if you open the CSS file(s) through their address in a new tab they are completely blank for me, like packer isn't actually compiling and bundling the CSS.

This project was NOT built on packer-blank-theme; it was an existing project that I retroactively added packer to. And this worked beautifully up until 1.3.8 but after I upgrade to the latest versions the same exact setup no longer works.

OS: macOS 11.3
Node: v14.16.0
Yarn: 1.22.10

Perhaps also related to #76

I have product templates 1-10. product.liquid, product.1.liquid, product.2.liquid, etc. They all share the same product.css file. This causes webpack to try to create the following file: /dist/assets/[email protected]@[email protected]@[email protected]@[email protected]@[email protected]@[email protected]@template.product.7@templat~2507575e.css.liquid' which results in a ENAMETOOLONG error.

I tried to edit the prod.config.js file to instruct mini-css-extract-plugin to change the chunkfilename but seems like there's an issue with mini-css-extract-plugin and webpack 5? It results in a "The 'compilation' argument must be an instance of Compilation" error. I see that in the following file here:

Any way to resolve this? In reality I don't even need product.1.js, product.2.js, product.3.js, etc. They could all share the base product.js entry file, I just need the separate templates so that I can have independent sections for each of the templates. So if there's a way to have them all share the same product.js template that would resolve my problem too.

Describe the bug
Anytime you run packer deploy on a theme which is "live/active" in shopify - the upload will simply fail.

To Reproduce
Steps to reproduce the behavior:

1. packer build --env=live && packer deploy --env=live
2. You are about to deploy to the published theme. Continue? (Y/n) Y
3. Packer will report the following:

↑  Uploading to Shopify...

[live] This is the live theme on ASDF. If you wish to make changes to it, then you will have to pass the --allow-live flag
cannot make changes to a live theme without an override

- cannot make changes to a live theme without an override


Files overwritten successfully!

4. Passing the --allow-live flag has no effect on packer

Expected behavior
Packer should add this flag if i confirm that i want to Continue to deploy to published theme.

Screenshots
Screenshot of Terminal

System (please complete the following information):

• OS: OSX Catalina
• Node Version [15.2.1]
• NPM Version [6.14.8]
• Browser [Chrome]

Packer (please complete the following information):

• Version [1.2.1]

Theme (please complete the following information):

• Shopify Packer theme [False]

There seems to be a lot of overlap between the two and I'm not fully understanding where one should take the place of the other?

All the snippets and templates files I just removed from /src folder still exist in the /dist folder after a successful build.

Is this intentional?

Describe the bug
When running packer build, the built theme contains a single " ` " right at the beginning of . This makes the page move downward. I have to manually remove this quote from the code in Shopify. I found this single quote is inside of style-tags.liquid inside of /dist

To Reproduce
Steps to reproduce the behavior:

1. packer build
2. packer deploy (optional to view in production)
3. Go to /dist folder and check style-tags.liquid

Expected behavior
This single quote shouldn't be here. I believe the quote is a straggler quote inside of style-tags.html of the shopify-packer source code. Screenshots below.

Screenshots
Compiled style-tags.liquid:
https://ibb.co/rthLMWy

Shopify Packer Webpack style-tags.html
https://ibb.co/PcN2XvQ

Quote above web page:
https://ibb.co/M5VmdHJ

System (please complete the following information):

• OS: Mac
• Node Version 10.13.0
• NPM Version 6.4.1
• Browser (All)

Packer (please complete the following information):

• Version [e.g. 1.2.1]

Theme (please complete the following information):

• Shopify Packer theme [e.g. True]
• Version [e.g. 22]

Describe the bug
I followed the steps in the documentation up to Existing project. After running "packer start" I get the following errors:
ERROR in Conflict: Multiple assets emit different content to the same filename ../snippets/script-tags.liquid
ERROR in Conflict: Multiple assets emit different content to the same filename ../snippets/style-tags.liquid

To Reproduce
Steps to reproduce the behavior:

1. packer init
2. yarn install
3. packer start

Expected behavior
These errors prevent changes in my theme. This needs to be resolved to make it work.

System (please complete the following information):

• OS: macOS Bug Sur 11.2.3
• Node Version: 12.21.0
• Yarn Version: 1.22.10
• Browser: Chrome

Packer (please complete the following information):

• Version: v2.1.1

Running packer deploy spits out:

↑  Uploading to Shopify...

- Error: ENOENT: no such file or directory, stat '/usr/local/lib/node_modules/@hayes0724/shopify-packer/node_modules/@shopify/themekit/bin/theme'

Files overwritten successfully!

running packer start or packer watch does not actually change any files on shopify.

Here's the issue:

Editing SCSS or HTML files does trigger a recompile, upload and then refresh of the page to show latest project. However, editing any JS files compiles it (console shows everything up to date), but the page does not refresh to show latest project. Instead, I have to manually refresh the page to view JS changes. Sometimes, JS changes don't come through at all.

Any ideas as to why this happens, is this default behavior?

Specs:
Node v10.13 - 12.9.0
Macbook Pro
Sublime Text
Terminal

Thanks!

I'm just curious. How hard would it be to allow the packer watch command to be run with --allow-live flag? I am trying to use packer to deploy updates to a live site and I simply can't due to the fact that I'm unable to run the watch command with this flag. Would be super nice and probably really easy to do.

⠴ Compiling...

Does not upload the js files in the assets folder after the file is changed while running the 'watch' command.
The changed file is visable in the dist folder.

Steps to reproduce the behavior:

1. packer watch
2. change the js file
3. does not upload the file, but changes are made in the dist folder
4. packer deploy
5. now it works

System:

• Windows 10
• Node Version 14.16.1
• NPM Version 6.14.12
• Browser egde

Packer:

• Version v2.1.5

Describe the bug
I followed the instructions to get a new project setup, however packer start didn't upload any files initially so I had to run packer deploy first. When I make changes to theme.liquid or theme.scss they don't sync or reload automatically. To view changes in theme.liquid, I need to reload the page, and changes made in theme.scss can't be seen at all in theme.css.liquid or when I reload the page. Even after running packer deploy, I don't see the style changes I made in theme.scss or on the page.

To Reproduce
Steps to reproduce the behavior:

1. Follow steps from https://hayes0724.github.io/shopify-packer/docs/quick-start to get started.
2. Start making changes to files after running packer start, however styles don't seem to compile and changes in theme.liquid aren't hot-reloaded.

Expected behavior
I would have expected to see changes in .liquid files to automatically reload the browser, and styles to be injected into the page, or at least compiled when reloading the page.

System (please complete the following information):

• OS: macOS 11.3.1
• Node Version: 14.17.0
• NPM Version: 6.14.13
• Browser: Chrome. Safari won't load because of an insecure connection.

Packer (please complete the following information):

• Version: 2.2.0

Theme (please complete the following information):

• Shopify Packer theme: True
• Version: 1.0.13
• Added 'network.reload': 3000, to packer.config.js.

Not sure if I'm not meeting a specific requirement, or something isn't working as they should, but would really appreciate any help or guidance.

Describe the bug
Upon Upgrading packer to the latest version, HMR doesn't work anymore.

Firefox throws CORS issues.

Meanwhile, Chrome sees the certificate as valid, but is still "Not Secure".

To Reproduce
Steps to reproduce the behavior:

Use a starter on mac os

Expected behavior
HMR should work

Screenshots

System (please complete the following information):

• OS: Mac OS Big Sur
• Node Version 14.15.4
• NPM Version 6.14.10
• Browser chrome, firefox

Packer (please complete the following information):

• Version 2.1.3

Steps to reproduce:

1. Setup new theme as per readme
2. Run packer start and window opens to https://localhost:3000/?preview_theme_id=83158335535 (which is the correct ID for the new packer theme), but it displays the else part of a JS conditional (because of document.write - it's likely missing a closing tag or quote), and displays the live theme below it instead of the new packer theme. I previewed the theme with id=83158335535 and it was blank as expected, so that is the right theme.

Any thoughts here? This looks like the holy grail of Shopify dev tools, and I'm excited to get it up and running. Thanks!

Describe the bug
Whenever i use packer theme:download the command fails with error:

❯ packer theme:download
Error downloading files

TypeError: obj[key].reduce is not a function

To Reproduce
Steps to reproduce the behavior:

1. Run packer theme:download
2. Error will show up as described above

Expected behavior
Downloading files from remote host.

System (please complete the following information):

• OS: [OSX Catalina]
• Node Version [15.2.1]
• NPM Version [6.14.8]
• Terminal [iTerm]

Packer (please complete the following information):

• Version [e.g. 1.2.1]

Theme (please complete the following information):

• Shopify Packer theme [False]

Describe the bug
If you create a section and get something wrong in the liquid code, such as forgetting to close an "include" snippet, or leave an extra comma in a schema definition, shopify replies with an error. That error causes packer to panic and exit instead of simply displaying the issue and waiting to re-upload the file after you fix it.

To Reproduce
Follow standard set up and set up instructions in the github docs. Make an error in the liquid code on purpose. Wait for themekit to upload the file and reply with the error.

Expected behavior
Should just display the error and continue running in case you decide to fix it. Right now it requires you run packer watch or packer start all over again.

System (please complete the following information):

• OS: macOS big sur
• Node Version: v14.15.3
• NPM Version: [email protected]
• Browser: every

Packer (please complete the following information):

• Version: v1.3.4

Theme (please complete the following information):

• Shopify Packer theme [true]
• Version: latest

When I start packer, I got this error: //</script>".replace("HOST", location.hostname)); //]]>.

Describe the bug
A clear and concise description of what the bug is.

In my theme.js I have several imports. I have two different product templates; product and product.alternate. Because they share the same JS, I've created a module (scripts/modules/product-template.js) and successfully importing into both /scripts/templates/product.js and /scripts/templates/product.alternate.js.

Within the scripts/modules/product-template.js, i'm attempting to import a module that is also imported by /scripts/layout/theme.js

When I add the import to either theme.js or product-template.js, it works, but when I add it to both, the build fails.

Strangely, I have one other shared module that doesn't cause any errors. I've tried making exact copies of it but it doesn't make any difference

I have throughly checked the module and created test modules with the same result.

To Reproduce
Steps to reproduce the behavior:

1. create a valid/tested 'hello-world' module under /scripts/modules/test.js with export default 'MyTest' for example
2. import the module 'import MyTest from "../modules/test.js"; to theme.js and also to product.js
3. run Packer Build
4. See error

Expected behavior
A build with no errors

Screenshots
` ERROR in SplitChunksPlugin
Cache group "default" conflicts with existing chunk.
Both have the same name "layout.theme" and existing chunk is not a parent of the selected modules.
Use a different name for the cache group or make sure that the existing chunk is a parent (e. g. via dependsOn).
HINT: You can omit "name" to automatically create a name.
BREAKING CHANGE: webpack < 5 used to allow to use an entrypoint as splitChunk. This is no longer allowed when the entrypoint is not a parent of the selected modules.
Remove this entrypoint and add modules to cache group's 'test' instead. If you need modules to be evaluated on startup, add them to the existing entrypoints (make them arrays). See migration guide of more info.

webpack 5.28.0 compiled with 1 error in 6410 ms
C:\Users\Q\AppData\Roaming\nvm\v15.6.0\node_modules@hayes0724\shopify-packer\cli\commands\build.js:42
if (stats.compilation.errors.length) throw Error('Compile errors');
^

Error: Compile errors
at C:\Users\Q\AppData\Roaming\nvm\v15.6.0\node_modules@hayes0724\shopify-packer\cli\commands\build.js:42:48
at C:\Users\Q\AppData\Roaming\nvm\v15.6.0\node_modules@hayes0724\shopify-packer\node_modules\webpack\lib\webpack.js:132:8
at C:\Users\Q\AppData\Roaming\nvm\v15.6.0\node_modules@hayes0724\shopify-packer\node_modules\webpack\lib\HookWebpackError.js:69:3
at Hook.eval [as callAsync] (eval at create (C:\Users\Q\AppData\Roaming\nvm\v15.6.0\node_modules@hayes0724\shopify-packer\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Q\AppData\Roaming\nvm\v15.6.0\node_modules@hayes0724\shopify-packer\node_modules\tapable\lib\Hook.js:18:14)
at Cache.shutdown (C:\Users\Q\AppData\Roaming\nvm\v15.6.0\node_modules@hayes0724\shopify-packer\node_modules\webpack\lib\Cache.js:150:23)
at C:\Users\Q\AppData\Roaming\nvm\v15.6.0\node_modules@hayes0724\shopify-packer\node_modules\webpack\lib\Compiler.js:1104:15
at Hook.eval [as callAsync] (eval at create (C:\Users\Q\AppData\Roaming\nvm\v15.6.0\node_modules@hayes0724\shopify-packer\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Q\AppData\Roaming\nvm\v15.6.0\node_modules@hayes0724\shopify-packer\node_modules\tapable\lib\Hook.js:18:14)
at Compiler.close (C:\Users\Q\AppData\Roaming\nvm\v15.6.0\node_modules@hayes0724\shopify-packer\node_modules\webpack\lib\Compiler.js:1102:23)`

System (please complete the following information):

• OS: Windows 10
• Node Version v15.6.0.
• NPM Version 7.4.0
• Browser NA

Packer (please complete the following information):

• Version 2.1.3 and earlier

Theme (please complete the following information):

• Shopify Packer theme - occurs on 2 different custom themes both of which were started from Shopify Packer Theme

Is your feature request related to a problem? Please describe.
When working on a development Shopify account, I work on the published theme.

But I would need to be able to pass the --allow-live flag in order to do that.

Additional context
It doesn't seem to work currently

Hello, Eric.

Thank you for your great tool!

We have a lot of pages (page.sections* etc), but in dist/snippets/script-tags it is only a single page script including allowed:
{%- if template == 'page' -%}

Maybe it will be creat if you can change it to something like {%- if template contains 'page' -%} for make possible to have just a single script for all pages.

Describe the bug
The only time I was able to have the SSL cert work was when they were named server.crt & server.key

Using any other name, in this case localhost.(cer/crt), worked with Packer, but not the browser.

To Reproduce
Steps to reproduce the behavior:

On a fresh packer-blank-theme

1. Install mkcert + nss
2. Add function to bash
3. ssl-check
4. mkcert -install
5. packer start

Change the names in the bash function to debug

function ssl-check() {
    f=~/.localhost_ssl;
    ssl_crt=$f/server.crt // --> localhost.cer
    ssl_key=$f/server.key // --> localhost.key
    ...

Expected behavior
Packer should accept the .crt extension as it seems to the norm.
It should also look for the extension alone, not the filename.

That way, most cert files would work.

I used mkcert following the late Slate docs

System (please complete the following information):

• OS: Mac Big Sur
• Node Version: 14.15.4
• NPM Version: 6.14.10
• Browser: Chrome, Firefox

Packer (please complete the following information):

• Version: 1.3.4

Theme (please complete the following information):

• true
• Version 1.0.9

Dynamic sections are not being output in the {{ content_for_index }} section of the Shopify template. Sections will only render using the {% include %} method

Describe the bug
Not always, but sometimes packer/themekit uploads a file and refreshes the page as it should, but the refresh doesn't actually load the new updated file or changes. It still contains the old markup and content. Then you manually refresh and the changes are there. I assume this is an issue with the shopify backend taking a little longer than expected to process the file so a solution may be to add a 0.5s delay to refreshing the page?

Expected behavior
After themekit uploads a file, the page should refresh like it currently does, but it should load the updated file(s).

System (please complete the following information):

• OS: macOS big sur
• Node Version: v14.15.3
• NPM Version: [email protected]
• Browser: every

Packer (please complete the following information):

• Version: v1.3.4

Theme (please complete the following information):

• Shopify Packer theme [true]
• Version: latest

Describe the bug
When using either packer start or packer watch, modifying existing locale files locally does not upload changes to the Shopify theme. New files added to the locales folder do not upload either.

To Reproduce
Steps to reproduce the behavior:

1. packer start
2. make changes in en.default.json and save
3. refresh the browser

Expected behavior
"Uploading to Shopify..." should appear in the console and changes should be seen in the browser.

System (please complete the following information):

• OS: Mac OSX 11.3
• Node Version v12.22.1
• NPM Version 6.14.12
• Browser chrome 90.0.4430.93

Packer (please complete the following information):

• Version v2.1.5

Theme (please complete the following information):

• Shopify Packer theme True
• Version 1.0.13

Is this tool supports HMR of liquid files?

Describe the bug
I set up a fresh install and when i run packer start i receive the error Module not found: Error: Can't resolve 'concat-style-loader

once i install concat-style-loader i get this error

`./src/scripts/layout/theme.js
Module not found: Error: Can't resolve 'concat-style-loader' in '/Users/rebelmac010921/sites/anther-2021'
@ ./src/scripts/layout/theme.js 14:0-40
@ multi /Users/rebelmac010921/.config/yarn/global/node_modules/@hayes0724/shopify-packer/src/webpack/hot-client.js ./src/scripts/layout/theme.js

./src/scripts/layout/theme.js
Module not found: Error: Can't resolve 'style-loader' in '/Users/rebelmac010921/sites/anther-2021'
@ ./src/scripts/layout/theme.js 13:0-33
@ multi /Users/rebelmac010921/.config/yarn/global/node_modules/@hayes0724/shopify-packer/src/webpack/hot-cli`

once i install concat-style-loader and style-loader i receive this error

./src/scripts/layout/theme.js Module not found: Error: Can't resolve 'css-loader' in '/Users/rebelmac010921/sites/anther-2021' @ ./src/scripts/layout/theme.js 13:0-33 @ multi /Users/rebelmac010921/.config/yarn/global/node_modules/@hayes0724/shopify-packer/src/webpack/hot-client.js ./src/scripts/layout/theme.js

once i install css-loader i receive this error

./src/scripts/layout/theme.js Module not found: Error: Can't resolve 'sass-loader' in '/Users/rebelmac010921/sites/anther-2021' @ ./src/scripts/layout/theme.js 13:0-33 @ multi /Users/rebelmac010921/.config/yarn/global/node_modules/@hayes0724/shopify-packer/src/webpack/hot-client.js ./src/scripts/layout/theme.js

once i install sass-loader i receive this error

./src/styles/theme.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!/Users/rebelmac010921/.config/yarn/global/node_modules/@hayes0724/shopify-packer/node_modules/postcss-loader/dist/cjs.js??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./src/styles/theme.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader (/Users/rebelmac010921/sites/anther-2021/node_modules/sass-loader/dist/index.js:25:24) @ ./src/styles/theme.scss 2:12-275 9:17-24 13:7-14 45:20-27 47:4-60:5 49:6-59:7 50:38-45 56:26-33 58:21-28 68:15-22 @ ./src/scripts/layout/theme.js @ multi /Users/rebelmac010921/.config/yarn/global/node_modules/@hayes0724/shopify-packer/src/webpack/hot-client.js ./src/scripts/layout/theme.js

NOTE: If i run packer watch local host does work and theme files (.liquid) work and display, but no styles come through.

To Reproduce
Steps to reproduce the behavior: (followed quick start guide)

1. packer init
2. cd into
3. Add app password and store url to config.json
4. packer theme:create --name=my-theme-name
5. yarn (also tried npm install)
6. packer start

Expected behavior
styles to be compiled without errors

Screenshots
If applicable, add screenshots to help explain your problem.

System (please complete the following information):

• OS: OSX Big Sur
• Node Version: v14.16.0 (tried 10 and 12 also)
• NPM Version: 6.14.11
• Browser: chrome

Packer (please complete the following information):

• Version: Shopify Packer - v1.3.4

Theme (please complete the following information):
"name": "packer-blank-theme",
"version": "1.0.9",

Is there a method for using environment variables for the values that are used in packer.env.json? I need to avoid checking in that file because it has sensitive credentials and it would be nice to use environment variables for assigning those values.

Themekit, for example, allows string interpolation for this.

Thanks for creating this thoughtful library, looking forward to trying it out.

My packer was throwing customer templates into the /templates folder instead of /templates/customers

Fixed with the following:

{ from: config.get('theme.src.templates'), to: config.get('theme.dist.templates'), globOptions: { ignore: ['**/customers/**'], }, }, { from: config.get('theme.src.customers'), to: config.get('theme.dist.customers'), },

Hello,

I'm on Windows 10 and I have this error after "packer init folder" success command.
This for any command, like: packer theme:create --name=sample-theme-name
Also, the same for: "packer start" command
config.json credentials added.
Please, can you help with it?

`
d:\Work\Test>packer theme:create --name=sample-theme-name
(node:15208) UnhandledPromiseRejectionWarning: Error: Cannot find module 'd:\Work\Test\packer.env.json'
Require stack:

• C:\Users\Андрей\AppData\Roaming\npm\node_modules@hayes0724\shopify-packer\src\env\index.js
• C:\Users\Андрей\AppData\Roaming\npm\node_modules@hayes0724\shopify-packer\src\theme\index.js
• C:\Users\Андрей\AppData\Roaming\npm\node_modules@hayes0724\shopify-packer\cli\commands\theme.js
• C:\Users\Андрей\AppData\Roaming\npm\node_modules@hayes0724\shopify-packer\cli\index.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
  at Function.Module._load (internal/modules/cjs/loader.js:690:27)
  at Module.require (internal/modules/cjs/loader.js:852:19)
  at require (internal/modules/cjs/helpers.js:74:18)
  at assign (C:\Users\Андрей\AppData\Roaming\npm\node_modules@hayes0724\shopify-packer\src\env\index.js:22:15)
  at module.exports (C:\Users\Андрей\AppData\Roaming\npm\node_modules@hayes0724\shopify-packer\cli\commands\theme.js:12:3)
  at Object. (C:\Users\Андрей\AppData\Roaming\npm\node_modules@hayes0724\shopify-packer\cli\index.js:45:32)
  at Module._compile (internal/modules/cjs/loader.js:959:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
  at Module.load (internal/modules/cjs/loader.js:815:32)
  (node:15208) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
  (node:15208) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
  `

I had to install the following dev dependencies after a fresh init:

• sass-loader
• style-loader
• concat-style-loader
• css-loader
• sass

When my stylesheet contains url to images, like url("../images/home/hero.jpg") or url(../images/fancybox_loading.gif), I get the following error, when I run packer build:

....
ERROR in ./src/styles/css/style.scss
Module build failed (from /****/lib/node_modules/@hayes0724/shopify-packer/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
....

If I comment out all urls from the stylesheet, build works fine.

This is obviously related to the webpack config..
Please, do I need to include a file-loader? Or is there something else I'm missing?

Trying to use import modules
getting errors Cannot use import statement outside a module

Describe the bug
After i build and deployed my theme with packer, packer start is not working anymore. I can't see any css update on first deploy or while writing code.

To Reproduce
Steps to reproduce the behavior:

1. packer build
2. packer deploy --env=development
3. packer start
4. Code is not updated and live updates don't work

Expected behavior
Localhost server should run with live updates working.

System (please complete the following information):

• OS: [OSX]
• Node Version [14.16.0]
• NPM Version [6.14.11]
• Browser [Brave]

Packer (please complete the following information):

• Version [1.0.9]

Theme (please complete the following information):

• Shopify Packer theme [false]

Describe the bug
Cannot GET / - https://127.0.0.1:3001/ doesn't work + Packer start doesn't watch changes

To Reproduce
Steps to reproduce the behavior:

1. npm install
2. npm run build
3. npm run deploy
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

System (please complete the following information):

• Windows 10
• Last One
• Last One
• Vivaldi, Firefox Dev Edition

Packer (please complete the following information):

Theme (please complete the following information):

• Shopify Packer theme [e.g. True]
• Version [e.g. 22]

Describe the bug
I am trying to initialize default packer project , this issue is producing not only in mac but also in my window machine

To Reproduce
Steps to reproduce the behavior:

1. npm i @hayes0724/shopify-packer -g
2. packer init my_packer_theme
3. ✖ There was an error:
   ENOENT: no such file or directory, stat '/usr/local/lib/node_modules/@hayes0724/shopify-packer/docs/my-packer-theme/packer-blank-theme-v1.0.9'
   Removing directory /usr/local/lib/node_modules/@hayes0724/shopify-packer/docs/my-packer-theme...

Expected behavior
should create packer empty project

Screenshots

System (please complete the following information):

• OS: [macOS Catalina version 10.15.6]
• Node Version [14.15.4]
• NPM Version [6.14.10]

Packer (please complete the following information):

• Version [1.3.2]

Theme (please complete the following information):

• Shopify Packer theme [e.g. True]
• Version [1.0.9]

The blank packer template has a src/scripts/sections dir, but there doesn't seem to be any docs on how those are handled, if at all. Scripts in there don't seem to load along with their respective section. So I'm just wondering if it is meant to work somehow or not?

Thanks!

Describe the bug
While packer start or packer watch is running, deleting a liquid file in the src folder causes development to break. The file in the src folder is deleted, but that same file in the dist folder still remains.

To Reproduce
Steps to reproduce the behavior:

1. packer start
2. create a liquid file in the src folder (e.g. src/snippets/product-card.liquid)
3. Delete the newly created file
4. See error

Expected behavior
Deleting a liquid file under any subdirectory in the src folder should also delete the file in the dist folder and upload the change to Shopify.

Screenshots

System (please complete the following information):

• OS: Mac OSX 11.3
• Node Version v12.22.1
• NPM Version 6.14.12
• Browser chrome 90.0.4430.93

Packer (please complete the following information):

• Version v2.1.5

Theme (please complete the following information):

• Shopify Packer theme True
• Version 1.0.13

Describe the bug
When doing packer deploy --nodelete, everything gets replaced by the build.
So ignored files are deleted, this includes the settings_data.json

SSL key not recognized by packer
Packer does not seem to recognize my SSL Keys.
I have just hacked my browser settings to allow non secure connection from localhost - since i had too many issues and less time to solve. I am looking at the docs and i think they are lacking some information. I have generated some certs on mac os and none of them worked. If anyone would share his solution or ways to solve - i would highly appreciate any help.

To Reproduce
Steps to reproduce the behavior:

1. Packer init & configure credentials in config.json
2. Create self-signed SSL Key
3. localhost.cer stored in ~/.localhost_ssl
4. run packer "start"
5. It will still complain about unsecure connection and invalid Cert

Expected behavior
Expected as described in the documentation to work with self signed key.

System (please complete the following information):

• OS: MacOS Catalina
• Node Version 15.2.1
• NPM Version 6.14.8
• Browser Chrome 86 (latest)

Packer:

• Version 1.2.1

Theme:

• Shopify Packer theme [False]

Describe the bug
I keep getting this error.

Section 1: settings is required, Section 1: 'theme_name' is not a valid attribute, Section 1: 'theme_version' is not a valid attribute, Section 1: 'theme_author' is not a valid attribute, Section 1: 'theme_documentation_url' is not a valid attribute, and Section 1: 'theme_support_email' is not a valid attribute

To Reproduce
Steps to reproduce the behavior:
packer theme:create --name=sample-theme-name
packer start

Expected behavior
There should be no errors.

Screenshots
If applicable, add screenshots to help explain your problem.

System (please complete the following information):

• OS: Mac OS Catalina
• v10.21.0
• 6.14.4
• Chrome

Packer (please complete the following information):

• Version 1.3.2

Theme (please complete the following information):

• Shopify Packer theme Yes

When I try to create a new project with packer init <dirname> terminal just show "Extracting the files from archive..." without stopping

To Reproduce
Steps to reproduce the behavior:

1. packer init dirname
2. showing "Extracting the files from archive..."

System:

• OS: macOS Catalina
• Node Version 15.12.0
• NPM Version 7.6.3
• Browser chrome

Packer:

• Version v2.0.1