WSL Ubuntu 18.04 / Win10 -- Fails on fresh install

[zgjonbalaj]

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 [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@shopify/slate-tools > [email protected]" has unmet peer dependency "babel-core@6".
warning "@shopify/slate-tools > [email protected]" has incorrect peer dependency "stylelint@^8.0.0".
warning "@shopify/slate-tools > [email protected]" has incorrect peer dependency "webpack@1 || ^2.1.0-beta || ^2.2.0-rc.0".
warning "@shopify/slate-tools > stylelint > [email protected]" has incorrect peer dependency "postcss-syntax@^0.10.0".
warning "@shopify/slate-tools > stylelint > [email protected]" has incorrect peer dependency "postcss-syntax@^0.10.0".
warning "babel-preset-shopify > react-hot-loader > [email protected]" 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 > [email protected]" has unmet peer dependency "react-dom@^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0".
warning " > [email protected]" has unmet peer dependency "eslint@<5 >=4.7.1".
warning "eslint-plugin-shopify > [email protected]" has unmet peer dependency "eslint@>=3.14.1".
warning "eslint-plugin-shopify > [email protected]" has unmet peer dependency "eslint@>=3.6".
warning "eslint-plugin-shopify > [email protected]" has unmet peer dependency "eslint@>=3.0.0".
warning "eslint-plugin-shopify > [email protected]" has unmet peer dependency "eslint@>=2.0.0".
warning "eslint-plugin-shopify > [email protected]" has unmet peer dependency "[email protected] - 4.x".
warning "eslint-plugin-shopify > [email protected]" has unmet peer dependency "eslint@>=3.6".
warning "eslint-plugin-shopify > [email protected]" has unmet peer dependency "eslint@^3 || ^4".
warning "eslint-plugin-shopify > [email protected]" has unmet peer dependency "eslint@>=2.10.0".
warning "eslint-plugin-shopify > [email protected]" has unmet peer dependency "eslint@^2.0.0 || ^3.0.0 || ^4.0.0".
warning "eslint-plugin-shopify > [email protected]" has unmet peer dependency "eslint@>=3.1.0".
warning "eslint-plugin-shopify > [email protected]" has unmet peer dependency "eslint@^3.0.0 || ^4.0.0".
warning "eslint-plugin-shopify > [email protected]" has unmet peer dependency "eslint@>=0.8.0".
warning "eslint-plugin-shopify > [email protected]" has unmet peer dependency "typescript@*".
warning " > [email protected]" has unmet peer dependency "stylelint@>=9.0".
warning "stylelint-config-shopify > [email protected]" has unmet peer dependency "stylelint@^8.0.0 || ^9.0.0".
warning "stylelint-config-shopify > [email protected]" 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]

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]

Do you have any solution for this? Thanks

[lloydstubber]

@YogiZoli @zgjonbalaj -- I'm using an older version of Ubuntu but this is my work around: #570

[dustinboettcher]

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]

@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]

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]

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]

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]

@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]

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]

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]

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

[zgjonbalaj]

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.