[Bug]: Not longer compiling with Shopify CLI 3.0

[patrickbjohnson]

Operating system

Mac OS Monterey

Node.js version

16

Shopify CLI version

3.0

Browsers

Chrome

Version

4 (Current)

Modifications

No response

Details

When updating to Shopify CLI 3.0 the current package scripts to run the Shopify environment do not work from the root directory. It seems as though Shopify requires their scripts to run directly within the shopify directory. So the only workaround possible so to run two different scripts: one for Vue, CSS and JS Compiling and one for Shopify CLI

Someone also posted this issue within the Shopify CLI github repo: https://github.com/Shopify/cli/issues/1394

Notice

• [X] I read the notice

[andyxmas]

you can supply a --path param to shopify theme dev

https://shopify.dev/docs/themes/tools/cli/commands#dev-flags

[crupko93]

you can supply a --path param to shopify theme dev

https://shopify.dev/docs/themes/tools/cli/commands#dev-flags

That works for me, thank you for help!

[DasunEdirisinghe]

This will fix start and deploy commands. Just replace {your_shopify_theme_directory} with your theme directory. As an exmple, "deploy": "run-s webpack:build && shopify theme push --path C:\Users\DLAD\Desktop\dlad-shopify-2.2.1\shopify",

also, you can modify the rest of the commands for CLI3.0 in the same manner.

"scripts": {
    "start": "run-p -sr shopify:serve webpack:watch",
    "deploy": "run-s webpack:build && shopify theme push --path {your_shopify_theme_directory}",
    "deploy:new": "run-s webpack:build && cd shopify && shopify theme push --unpublished",
    "webpack:watch": "cross-env NODE_ENV=development BROWSERSLIST_ENV=development BROWSERSLIST_CONFIG=.config/.browserslistrc webpack --config .config/webpack/webpack.dev.js --watch --progress",
    "webpack:build": "cross-env NODE_ENV=production BROWSERSLIST_ENV=production BROWSERSLIST_CONFIG=.config/.browserslistrc webpack --config .config/webpack/webpack.prod.js --progress",
    "shopify:serve": "shopify theme dev --path {your_shopify_theme_directory}",
    "shopify:pull": "cd shopify && shopify theme pull",
    "lint": "run-s -c lint:*",
    "lint:js": "eslint src/**/*.{js,vue} --config .config/.eslintrc.js",
    "lint:css": "stylelint src/**/*.{vue,css,sass,scss} --config .config/.stylelintrc.js",
    "lint:shopify": "cd shopify && shopify theme check",
    "fix": "run-s -c fix:*",
    "fix:js": "eslint src/**/*.{js,vue} --config .config/.eslintrc.js --fix",
    "fix:css": "stylelint src/**/*.{vue,css,sass,scss} --config .config/.stylelintrc.js --fix",
    "fix:shopify": "cd shopify && shopify theme check -a"
  }

[jonnyburch]

Thanks @DasunEdirisinghe - very useful! This should be merged in