Shopify / slate

Slate is a toolkit for developing Shopify themes. It's designed to assist your workflow and speed up the process of developing, testing, and deploying themes.
https://shopify.github.io/slate
MIT License
1.28k stars 365 forks source link

WSL Ubuntu 18.04 / Win10 -- Fails on fresh install #667

Open zgjonbalaj opened 6 years ago

zgjonbalaj commented 6 years ago

Problem

Fails on Fresh install of NVM, Node 10.6.0, Yarn 1.7.0, Ubuntu 18.04/WSL Win10

Replication steps

  1. Install WSL, Ubuntu 18.04, NVM, Node & Yarn
  2. Run 'yarn create slate-theme mythemename'

More Information

Creating a new Slate theme in: /mnt/d/Code/Projects/hausextension.
Cloning theme from a git repo: https://github.com/shopify/starter-theme.git
Installing theme dependencies...
yarn install v1.7.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@shopify/slate-tools > babel-loader@7.1.4" has unmet peer dependency "babel-core@6".
warning "@shopify/slate-tools > stylelint-webpack-plugin@0.10.5" has incorrect peer dependency "stylelint@^8.0.0".
warning "@shopify/slate-tools > webpack-dev-middleware@1.10.2" has incorrect peer dependency "webpack@1 || ^2.1.0-beta || ^2.2.0-rc.0".
warning "@shopify/slate-tools > stylelint > postcss-html@0.23.7" has incorrect peer dependency "postcss-syntax@^0.10.0".
warning "@shopify/slate-tools > stylelint > postcss-markdown@0.23.7" has incorrect peer dependency "postcss-syntax@^0.10.0".
warning "babel-preset-shopify > react-hot-loader > redbox-react@1.6.0" has unmet peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0".
warning "babel-preset-shopify > react-hot-loader > redbox-react@1.6.0" has unmet peer dependency "react-dom@^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0".
warning " > eslint-plugin-shopify@19.0.1" has unmet peer dependency "eslint@<5 >=4.7.1".
warning "eslint-plugin-shopify > eslint-config-prettier@2.9.0" has unmet peer dependency "eslint@>=3.14.1".
warning "eslint-plugin-shopify > eslint-plugin-ava@4.5.1" has unmet peer dependency "eslint@>=3.6".
warning "eslint-plugin-shopify > eslint-plugin-babel@4.1.2" has unmet peer dependency "eslint@>=3.0.0".
warning "eslint-plugin-shopify > eslint-plugin-flowtype@2.47.1" has unmet peer dependency "eslint@>=2.0.0".
warning "eslint-plugin-shopify > eslint-plugin-import@2.12.0" has unmet peer dependency "eslint@2.x - 4.x".
warning "eslint-plugin-shopify > eslint-plugin-jest@21.15.2" has unmet peer dependency "eslint@>=3.6".
warning "eslint-plugin-shopify > eslint-plugin-jsx-a11y@6.0.3" has unmet peer dependency "eslint@^3 || ^4".
warning "eslint-plugin-shopify > eslint-plugin-lodash@2.7.0" has unmet peer dependency "eslint@>=2.10.0".
warning "eslint-plugin-shopify > eslint-plugin-mocha@4.12.1" has unmet peer dependency "eslint@^2.0.0 || ^3.0.0 || ^4.0.0".
warning "eslint-plugin-shopify > eslint-plugin-node@5.2.1" has unmet peer dependency "eslint@>=3.1.0".
warning "eslint-plugin-shopify > eslint-plugin-react@7.8.2" has unmet peer dependency "eslint@^3.0.0 || ^4.0.0".
warning "eslint-plugin-shopify > eslint-plugin-sort-class-members@1.3.1" has unmet peer dependency "eslint@>=0.8.0".
warning "eslint-plugin-shopify > typescript-eslint-parser@11.0.0" has unmet peer dependency "typescript@*".
warning " > stylelint-config-shopify@5.0.1" has unmet peer dependency "stylelint@>=9.0".
warning "stylelint-config-shopify > stylelint-order@0.8.1" has unmet peer dependency "stylelint@^8.0.0 || ^9.0.0".
warning "stylelint-config-shopify > stylelint-scss@3.1.0" has unmet peer dependency "stylelint@^8.0.0 || ^9.0.0".

`[4/4] Building fresh packages...
[-/6] ⠠ waiting...
[-/6] ⠠ waiting...
[-/6] ⠠ waiting...
[-/6] ⠠ waiting...
error /mnt/d/Code/Projects/hausextension/node_modules/pngquant-bin: Command failed.
Exit code: 1
Command: node lib/install.js
Arguments:
Directory: /mnt/d/Code/Projects/hausextension/node_modules/pngquant-bin
Output:
⚠ The `/mnt/d/Code/Projects/hausextension/node_modules/pngquant-bin/vendor/pngquant` binary doesn't seem to work correctly
  ⚠ pngquant pre-build test failed
  ℹ compiling from source
  ✔ pngquant pre-build test passed successfully
  ✖ Error: pngquant failed to build, make sure that libpng-dev is installed

(node:1362) UnhandledPromiseRejectionWarning: Error: Command failed: yarnpkg
    at makeError (/home/zgjonbalaj/.config/yarn/global/node_modules/execa/index.js:169:9)
    at Promise.all.then.arr (/home/zgjonbalaj/.config/yarn/global/node_modules/execa/index.js:274:16)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:1362) 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: 2)
(node:1362) [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.
Done in 326.52s.`
zgjonbalaj commented 6 years ago

Checked for libpng-dev, installed it, same issue.

Reading package lists... Done Building dependency tree Reading state information... Done libpng-dev is already the newest version (1.6.34-1). 0 upgraded, 0 newly installed, 0 to remove and 98 not upgraded.

Update:

Installed the latest LTS Release of Node (8.11.3) with npm 5.6.0 with the same results.

YogiZoli commented 6 years ago

Do you have any solution for this? Thanks

lloydstubber commented 6 years ago

@YogiZoli @zgjonbalaj -- I'm using an older version of Ubuntu but this is my work around: https://github.com/Shopify/slate/issues/570

dustinboettcher commented 6 years ago

Here is what works for me (08/23/18) - cp paste each line after a fresh WSL 18.04 install. (Note: If you already installed most of it line 2 might be interesting for you)

Update (01/18/19): New nvm script version 0.33.11 -> 0.34.0

sudo apt update && sudo apt -y upgrade sudo apt install -y build-essential libssl-dev libpng-dev curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash exit nvm ls-remote (optional: choose which Version suits you best e.g. LTS 8.x see below) nvm install 8.15.0 curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list sudo apt update && sudo apt install -y --no-install-recommends yarn source ~/.profile yarn create slate-theme my-new-theme

axlmcc commented 6 years ago

@dustinboettcher -- I'm on a machine running Ubuntu 18.04, but I was experiencing these same issues.

The instructions you gave worked very well for me. I already had yarn installed, but uninstalling it before running your commands fixed the issues for me.

Thanks!

t-kelly commented 5 years ago

Was able to replicate this as well. The missing piece that @dustinboettcher was able to nail was:

sudo apt update && sudo apt -y upgrade
sudo apt install -y build-essential libssl-dev libpng-dev

Going to add this to the docs!

zgjonbalaj commented 5 years ago

I recently decided to try scoop for Windows and was able to get this running with npx since yarn didn't like the space in between the user name assuming and returned an exit code 1. Running npx however worked well. I still have yet to figure out the SSL certificate as installing a self signed certified in both root certificate store and chrome didn't help.

t-kelly commented 5 years ago

Will take a look at Scoop! Thanks.

It's been a dogs age since I've touched Windows so I'll take any help y'all can throw at me!

zgjonbalaj commented 5 years ago

@t-kelly Yeah scoop seems to be a great alternative to installing all of the dev environment tools on Windows. Very similar to brew if your familiar with that. Somehow that build just worked right out of the box but i did uninstall everything (php, python, nodejs, npm etc) before running scoop.

https://scoop.sh/

Edit: As mentioned i did not go the extra step of troubleshooting the SSL if you figure that part out let me know lol.

ChariseWalraven commented 5 years ago

This works for me as well, although I'm using zsh and oh-my-zsh. I've found that it doesn't work when doing a fresh install on the zsh shell, but that it does work in regular bash in WSL, which is a little weird.

tracy-codes commented 4 years ago

Figured I'd chime in here. If you're running into SSL issues still on Ubuntu/Linux, I opened #1083 to update the docs with a Linux-specific ssl-check function. I've tested on a few different versions of Ubuntu and so far it seems to work.

The new function for Linux is as follows:

function ssl-check() {
         f=~/.localhost_ssl;
         ssl_crt=$f/server.crt
         ssl_key=$f/server.key
         b=$(tput bold)
         c=$(tput sgr0)

         # gets the first IP returned fro the hostname function
         local_ip=$(hostname -I | cut -d' ' -f1)
         # local_ip=999.999.999 # (uncomment for testing)
         domains=(
             "localhost"
             "$local_ip"
         )
         if [[ ! -f $ssl_crt ]]; then
             echo -e "\n🛑  ${b}Couldn't find a Slate SSL certificate:${c}"
             make_key=true
         elif [[ ! $(openssl x509 -noout -text -in $ssl_crt | grep $local_ip) ]]; then
             echo -e "\n🛑  ${b}Your IP Address has changed:${c}"
             make_key=true
         else
             echo -e "\n✅  ${b}Your IP address is still the same.${c}"
         fi
         if [[ $make_key == true ]]; then
             echo -e "Generating a new Slate SSL certificate...\n"
             count=$(( ${#domains[@]} - 1))
             mkcert ${domains[@]}
             # Create Slate's default certificate directory, if it doesn't exist
             test ! -d $f && mkdir $f
             # It appears mkcert bases its filenames off the number of domains passed after the first one.
             # This script predicts that filename, so it can copy it to Slate's default location.
             if [[ $count = 0 ]]; then
                 mv ./localhost.pem $ssl_crt
                 mv ./localhost-key.pem $ssl_key
             else
                 mv ./localhost+$count.pem $ssl_crt
                 mv ./localhost+$count-key.pem $ssl_key
             fi
         fi
     }

This does still utilize mkcert. I highly recommend installing it via their instructions still.

Feel free to test it out and let me know if you run into any issues, I'll work to update the new ssl-check function if any errors happen on other Linux distros.

martinseanhunt commented 4 years ago

Has anyone currently got this working on ubuntu? I'm running in to issues with node-sass

zgjonbalaj commented 4 years ago

I've given up on this and have gone back to just using themekit to download and upload files manually. Not the integrated workflow I was hoping for but then again Shopify has dropped all support on this. Hopefully we get to see a fully working integrated environment in the future.