Roots Discourse

Sage 9 - During yarn build it seems to be looking for webpack.js in the wrong directory

sage9

#1

Hey everyone. I’ve been using the older version of sage now for a while but I decided it’s time to update so I can learn some new tricks as well. I even bought the book and tried to follow it step-by-step, here is what I did:

-Set up a simple wordpress installation
-Copied sage 9 into my theme folder; I did it this way because composer create-project roots/sage your-theme-name according to the book, downloaded one of the older versions for some reason.
-ran composer install
-installed yarn globally
-ran yarn

Up until this point it seemed fine, however when I ran yarn build I got the following error:

$ yarn build
yarn run v1.6.0
$ webpack --progress --config resources/assets/build/webpack.config.js
module.js:549
    throw err;
    ^

Error: Cannot find module 'C:\webworks\starter\wp-content\themes\webpack\bin\webpack.js'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:188:16)
    at bootstrap_node.js:609:3
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

It seems to me it looks for webpack in a wrong folder, basically leaves out the theme-name\node_modules part or wherever it should be. Does anybody know what did I miss here? Where can I change this?

Thank you in advance. Here is the full output, also I use win10 and node 8.11.1

Rawhloe@DESKTOP-HPETH74 MINGW64 /c/webworks/starter/wp-content/themes/startertheme
$ composer install
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Package operations: 27 installs, 0 updates, 0 removals
  - Installing composer/installers (v1.5.0): Loading from cache
  - Installing symfony/polyfill-mbstring (v1.7.0): Loading from cache
  - Installing symfony/translation (v4.0.8): Loading from cache
  - Installing nesbot/carbon (1.27.0): Loading from cache
  - Installing psr/simple-cache (1.0.1): Loading from cache
  - Installing psr/container (1.0.0): Loading from cache
  - Installing illuminate/contracts (v5.6.17): Loading from cache
  - Installing doctrine/inflector (v1.3.0): Loading from cache
  - Installing illuminate/support (v5.6.17): Loading from cache
  - Installing illuminate/container (v5.6.17): Loading from cache
  - Installing illuminate/events (v5.6.17): Loading from cache
  - Installing psr/log (1.0.2): Loading from cache
  - Installing symfony/debug (v4.0.8): Loading from cache
  - Installing symfony/finder (v4.0.8): Loading from cache
  - Installing illuminate/filesystem (v5.6.17): Loading from cache
  - Installing illuminate/view (v5.6.17): Loading from cache
  - Installing illuminate/config (v5.6.17): Loading from cache
  - Installing roots/sage-lib (9.0.1): Loading from cache
  - Installing symfony/yaml (v3.4.8): Loading from cache
  - Installing hassankhan/config (0.10.0): Loading from cache
  - Installing brain/hierarchy (2.3.1): Loading from cache
  - Installing soberwp/controller (9.0.0-beta.4): Loading from cache
  - Installing symfony/process (v3.4.8): Loading from cache
  - Installing symfony/console (v4.0.8): Loading from cache
  - Installing illuminate/console (v5.6.17): Loading from cache
  - Installing roots/sage-installer (1.3.6): Loading from cache
  - Installing squizlabs/php_codesniffer (2.9.1): Loading from cache
symfony/translation suggests installing symfony/config ()
illuminate/support suggests installing symfony/var-dumper (Required to use the dd function (~4.0).)
illuminate/filesystem suggests installing league/flysystem (Required to use the Flysystem local and FTP drivers (~1.0).)
illuminate/filesystem suggests installing league/flysystem-aws-s3-v3 (Required to use the Flysystem S3 driver (~1.0).)
illuminate/filesystem suggests installing league/flysystem-cached-adapter (Required to use the Flysystem cache (~1.0).)
illuminate/filesystem suggests installing league/flysystem-rackspace (Required to use the Flysystem Rackspace driver (~1.0).)
illuminate/filesystem suggests installing league/flysystem-sftp (Required to use the Flysystem SFTP driver (~1.0).)
symfony/console suggests installing symfony/event-dispatcher ()
symfony/console suggests installing symfony/lock ()
illuminate/console suggests installing dragonmantank/cron-expression (Required to use scheduling component (~2.0).)
illuminate/console suggests installing guzzlehttp/guzzle (Required to use the ping methods on schedules (~6.0).)
Generating autoload files

Rawhloe@DESKTOP-HPETH74 MINGW64 /c/webworks/starter/wp-content/themes/startertheme
$ npm install -g yarn
C:\Program Files\nodejs\yarnpkg -> C:\Program Files\nodejs\node_modules\yarn\bin\yarn.js
C:\Program Files\nodejs\yarn -> C:\Program Files\nodejs\node_modules\yarn\bin\yarn.js
+ yarn@1.6.0
updated 1 package in 1.299s

Rawhloe@DESKTOP-HPETH74 MINGW64 /c/webworks/starter/wp-content/themes/startertheme
$ yarn
yarn install v1.6.0
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info fsevents@1.2.3: The platform "win32" is incompatible with this module.
info "fsevents@1.2.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
warning " > stylelint-webpack-plugin@0.10.4" has incorrect peer dependency "webpack@^1.13.2 || ^2.7.0 || ^3.11.0 || ^4.4.0".
[5/5] Building fresh packages...
success Saved lockfile.
Done in 50.06s.

Rawhloe@DESKTOP-HPETH74 MINGW64 /c/webworks/starter/wp-content/themes/startertheme
$ yarn build
yarn run v1.6.0
$ webpack --progress --config resources/assets/build/webpack.config.js
module.js:549
    throw err;
    ^

Error: Cannot find module 'C:\webworks\starter\wp-content\themes\webpack\bin\webpack.js'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:188:16)
    at bootstrap_node.js:609:3
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

edit: oh yeah one more thing, I tried to weed out bootstrap beforehand in package.json, not sure if it’s important.


Track and update both package-lock.json and yarn.lock
#2

After fooling around for about 12 hours I managed to set up the linux subsystem and started from scratch upon bedrock, now the folders seem fine and everything is in place, but I still get this error after yarn build

yarn run v1.6.0
$ webpack --progress --config resources/assets/build/webpack.config.js
/mnt/c/webworks/starter/bedrock/web/app/themes/startertheme/node_modules/.bin/webpack: line 12: node: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

That mentioned file has this at line 12:

node "$basedir/../webpack/bin/webpack.js" "$@"

Any ideas? Thank you in advance, greatly appreciated.


#3

Welp still couldn’t figure it out after plenty if reinstalling but it seems npm run-script build puts together stuff. Will I be able to work with this? I’d like to have everything neat and ordered but I don’t have much time left to waste on setup.

I guess when I use it this way yarn wouldn’t be even needed?

$ npm run-script build

> sage@9.0.1 build C:\webworks\starter\bedrock\web\app\themes\startertheme
> webpack --progress --config resources/assets/build/webpack.config.js

 95% emitting DONE  Compiled successfully in 1495ms01:29:12                                                                                                            Asset     Size  Chunks             Chunk Names
          scripts/main.js   216 kB       0  [emitted]  main
    scripts/customizer.js  3.24 kB       1  [emitted]  customizer
          styles/main.css   238 kB       0  [emitted]  main
      scripts/main.js.map   345 kB       0  [emitted]  main
      styles/main.css.map  1.21 MB       0  [emitted]  main
scripts/customizer.js.map  3.07 kB       1  [emitted]  customizer

#4

Correct. In fact you can shorten it to npm run build (does the same thing, less typing).


#5

All right, thanks. I think I’ll stick with this for now and investigate further in my free time.

If anyone else runs into something similar I ended up using npm instead of yarn(npm install and npm run build) and weeded out style lint because it didn’t let me through and I make nice looking css anyway.


#6

Has there been any real answer to this. I did a default installation using the Sage9 documentation, and also trieds installing webpack indepently and globally, as well as moving the package.json file (default from github) between both the theme and main direction and still get this error when running either yarn or npm:
That it couldn’t find a package.json file, but it is in both (or either ) the theme or the docroot at any one time.
I’m on mojave, but had the same problems on high sierra trying to use yarn in a project (can’t remember if it was sage, but I think it was).


#7

You do not need to move package.json from Sage (i.e. /wp-content/themes/{sage} or /app/themes/{sage}), in fact doing so will break any builds.

Using npm was the solution for the OP, however, you mentioned that both Yarn and npm do not work for you — so your issue would appear to be different. From what I gather, Yarn hasn’t worked at all for you, which is similar to the OP’s issue. I wondering if this is because Yarn was installed via npm, which is bound to create issues. If you are using Yarn, make sure to install it properly — we have a guide for doing this (link is below). I recommend you follow the guide, then follow the default installation steps for Sage again, and finally report back your results. This will help us nail down any issues if they persist.

https://roots.io/getting-started/docs/macos-development-environment-sage/


#8

Thanks knowler!
I copied a Sage 8 site I’d already built to get started on the project, but once done, I will try what you have said and see if I can get it working. I thought maybe it had something to do with a global installation I’d done previously of npm, but am new to Yarn & Webpack, so I will see how it goes.
Thanks for your input. I will update this thread if I get it working. I had actually done it through the link you provided, but may have skipped a step because (I don’t remember which) but already had installed npm globally and thought that would just work.
I did notice that it wanted npm <= 10.0 whereas mine is 10.11 or something like that.
Brendon