Creating existing project on a new computer - issues with yarn and other dependencies

sage
,
1

Hello.

I’m setting up existing projects on a new Macbook. Thought it’s gonna be way simpler but am still fiddling with errors etc.

So: found https://roots.io/sage/docs/existing-sage-projects/ and should be simple, right?
I’m pulling the existing WP repo (using only Sage, no Bedrock, so just wp-content folder in GIT) then using wp-cli to pull in latest WP, then create config file via wp config create and then I import DB from production and search-replace it and that’s that. Then I run valet link to access the local dev url.

To get the theme up and running of course I follow the steps on Sage but when I get to yarn command, I get the error

node_modules/node-sass: Command failed. Exit code: 1
Command: node scripts/build.js

Other stuff i noticed in there:

File “/Users/me/Documents/Dev/project-example/wp-content/themes/my-theme/node_modules/node-gyp/gyp/pylib/gyp/xcode_emulation.py”, line 1265, in XcodeVersion

gyp ERR! node -v v10.15.3

To explain further, I’m using wp valet cli to start new projects (in combination with other commands in a script and that usually worked flawlessly).
But now on a clean new macbook and when installing stuff anew (mostly using brew!) things are a mess and I hoped they won’t be. But there’s always an error when you least expect it and even when following some newby step-by-step it doesn’t do exactly what is says it should.

So what is the problem? Node / yarn / npm / php version combinations?

The error when I fixed the first one was then after yarn start :

(node:29057) [ESLINT_LEGACY_OBJECT_REST_SPREAD] DeprecationWarning: The 'parserOptions.ecmaFeatures.experimentalObjectRestSpread' option is deprecated. Use 'parserOptions.ecmaVersion' instead. (found in ".eslintrc.js")

And I copied the .eslintrc.js from the Roots github repo (before that the error was that the file does not exist: Module build failed: Error: No ESLint configuration found.).

When I open the dev url, I see https://code.jquery.com/jquery-1.12.4-wp.min.js net::ERR_ABORTED 404 (Not Found) and everything messed up because of it. I’m at a loss why everything is so messed up at this point.

On my old Mac everything works, but as far as I remember I had to play with all the versions/dependencies there as well. Why is this never simple? I can’t remember ever not having problems with npm/yarn/node etc :grimacing:

My info:

➜ ~ node -v
v10.15.3
➜ ~ yarn -v
1.16.0
➜ ~ npm -v
6.4.1
➜ ~ composer --version
Composer version 1.8.5 2019-04-09 17:46:47
➜ ~ php -v
PHP 7.3.5 (cli) (built: May 2 2019 12:40:36) ( NTS )

Any help or making this procedure easier appreciated, I’m kind of losing my mind with WP dev right now :persevere:. I seem like I’m following solutions online and fixing stuff and then something else breaks …

EDIT / solution

The main issue was as expected Node version. v10 didn’t play well so I used v8 (latest v8). Also I needed to copy .eslintrc.js file from github and then add some custom settings in it since it was not in our git repo.

2

Hi @trainoasis,

Going off of gyp ERR! node -v v10.15.3 I would assume your project requires a different version of node listed in package.json than the one that you have installed.

3

Use a node version manager like nvm (also works on WSL (Bash on Windows))!


Add a .nvmrc to your project to force a specific node version which you know it works with.

Here the build-before ansible task for trellis deploy that locks in
a specific node version using the .nvmrc of theme:

# build + transfer theme assets
---
- name: Use specific node version
  shell: . $NVM_DIR/nvm.sh install lts/* && nvm unalias default && . $NVM_DIR/nvm.sh && nvm install && nvm use
  connection: local
  args:
    chdir: "{{ project.local_path }}/web/app/themes/theme-name"


# Paths
- shell: . $NVM_DIR/nvm.sh && dirname $(nvm which | tail -1)
  connection: local
  args:
    chdir: "{{ project.local_path }}/web/app/themes/theme-name"
  register: nvm_which

- shell: yarn global bin
  connection: local
  environment:
    PATH: "{{nvm_which.stdout}}:{{ ansible_env.PATH }}"
  register: yarn_global_bin


# Build
- name: Run yarn install
  command: yarn install
  connection: local
  args:
    chdir: "{{ project_local_path }}/web/app/themes/theme-name"

- name: Install Composer dependencies (of theme)
  command: composer install --no-ansi --no-dev --no-interaction --no-progress --optimize-autoloader --no-scripts
  args:
    chdir: "{{ deploy_helper.new_release_path }}/web/app/themes/theme-name"

- name: Compile assets for production
  command: yarn run build:production
  connection: local
  args:
    chdir: "{{ project_local_path }}/web/app/themes/theme-name"


# Transfer
- name: Copy project local files
  synchronize:
    src: "{{ project_local_path }}/web/app/themes/theme-name/dist"
    dest: "{{ deploy_helper.new_release_path }}/web/app/themes/theme-name"
    group: no
    owner: no
    rsync_opts: --chmod=Du=rwx,--chmod=Dg=rx,--chmod=Do=rx,--chmod=Fu=rw,--chmod=Fg=r,--chmod=Fo=r
1 Like
4

Hi, I thought as much yeah, package.json only mentions

“engines”: {
“node”: “>= 6.9.4”
},

, which doesn’t look like why v10 should be an issue. Changed to latest v8 via nvm and yarn executed without issues. Now got an error when running “yarn start”:

Module build failed: Error: No ESLint configuration found.

Which official configuration should you use? Since I tried one from github repo and it didn’t work as my previous one it seems - threw many errors. I don’t think I had to pull this config separately when I initialised the project the first time.

Should I commit eslintrc into my version control for this not to happen again?

5

Thanks @strarsis, indeed when I change to node v8 for example, it does work, cheers. I still run into
Module build failed: Error: No ESLint configuration found. when running yarn start though, and if copying eslint config from github repo it seems it’s not the same one as it was when I started the project the first time. I’m pretty sure I did not manually put the config there or touch it at any time before now, so what’s happening here?

(node:51698) [ESLINT_LEGACY_OBJECT_REST_SPREAD] DeprecationWarning: The 'parserOptions.ecmaFeatures.experimentalObjectRestSpread' option is deprecated. Use 'parserOptions.ecmaVersion' instead. (found in ".eslintrc.js")

Not a huge issue I think. Should be good to go now

6

if jQuery is not working go to app/setup.php and disable this line. seems relevant to add now - you won’t get the benefit of the CDN but it should work normally.

add_theme_support('soil-jquery-cdn');

i also had error "https://code.jquery.com/jquery-1.12.4-wp.min.js net::ERR_ABORTED 404 (Not Found) " on a new project.

7

Improved and shorter method for using a specific node version when building the theme when deploying with Trellis:

1 Like