Yarn build:production fails

sage
,
1

So I recently took over a WP website, that’s made with Sage, Laravel. I am still learning the Sage stuff, but need to make some scss changes for primary colors. After making these changes they wont reflect on the front-end because as I understand the code needs compiling.
So far, when I ssh to the server and go to the theme directory to run yarn build:production, for the code compiling I get following error.

yarn run v1.22.19
$ webpack --env.production --progress --config resources/assets/build/webpack.config.js
/bin/sh: line 1: webpack: command not found
error Command failed with exit code 127.
info Visit yarn run | Yarn for documentation about this command.

I do have the following dependencies:

"scripts": {
    "build": "webpack --progress --config resources/assets/build/webpack.config.js",
    "build:production": "webpack --env.production --progress --config resources/assets/build/webpack.config.js",
    "build:profile": "webpack --progress --profile --json --config resources/assets/build/webpack.config.js",
    "start": "webpack --hide-modules --watch --config resources/assets/build/webpack.config.js",
    "rmdist": "rimraf dist",
    "lint": "npm run -s lint:scripts && npm run -s lint:styles",
    "lint:scripts": "eslint resources/assets/scripts resources/assets/build",
    "lint:styles": "stylelint \"resources/assets/styles/**/*.{css,sass,scss,sss,less}\"",
    "test": "npm run -s lint",
    "pot": "wp l10n generate --extract-from='./' --domain='placentactiv' --extract-to='resources'"
  },
  "engines": {
    "node": ">= 8.0.0"
  },
  "volta": {
    "node": "10.23.3",
    "yarn": "1.22.10"
  },
  "devDependencies": {
    "autoprefixer": "~8.2.0",
    "browser-sync": "~2.24.7",
    "browsersync-webpack-plugin": "^0.6.0",
    "bs-html-injector": "~3.0",
    "buble-loader": "^0.4.1",
    "cache-loader": "~1.2.5",
    "clean-webpack-plugin": "^0.1.18",
    "copy-globs-webpack-plugin": "^0.2.0",
    "css-loader": "^0.28.9",
    "cssnano": "~4.0.5",
    "eslint": "~4.19.1",
    "eslint-loader": "~1.9",
    "eslint-plugin-import": "~2.14.0",
    "extract-text-webpack-plugin": "~3.0.2",
    "file-loader": "^1.1.6",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "imagemin-mozjpeg": "~7.0.0",
    "imagemin-webpack-plugin": "~2.2.0",
    "import-glob": "~1.5",
    "node-sass": "^4.13.1",
    "postcss-loader": "~2.1.0",
    "postcss-safe-parser": "~3.0",
    "resolve-url-loader": "~2.3.1",
    "rimraf": "~2.6",
    "sass-loader": "~6.0",
    "style-loader": "^0.22.1",
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "~18.2.0",
    "stylelint-webpack-plugin": "^0.10.5",
    "svg-sprite-loader": "^4.1.3",
    "svgo": "^1.2.0",
    "svgo-loader": "^2.2.0",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "url-loader": "^0.6.2",
    "webpack": "~3.10.0",
    "webpack-assets-manifest": "^1.0.0",
    "webpack-dev-middleware": "~2.0.4",
    "webpack-hot-middleware": "~2.22.3",
    "webpack-merge": "~4.1.4",
    "yargs": "~11.0.0"
  },
  "dependencies": {
    "@vimeo/player": "^2.10.0",
    "bootstrap": "v4.3.1",
    "custom-event-polyfill": "^1.0.6",
    "intl-tel-input": "^16.0.4",
    "jquery": "^3.3.1",
    "jquery-match-height": "^0.7.2",
    "jquery-nice-select": "^1.1.0",
    "js-cookie": "^2.2.1",
    "lodash.debounce": "^4.0.8",
    "lodash.defaultsdeep": "^4.6.0",
    "nodelist-foreach-polyfill": "^1.2.0",
    "popper.js": "^1.14.7",
    "slick-carousel": "^v1.8.1",
    "swiper": "^6.3.3",
    "youtube-player": "^5.5.2"
  }
}

Any ideas on how to re-compile the code and have the simple changes made?

2

The theme should not be built on the production system (the web server), but rather on a build server/CI pipeline/workstation and the build artifacts transferred to production during deployment.

Because the npm packages for building the theme are not installed on the server, the error /bin/sh: line 1: webpack: command not found occurs. While it may be possible to build on the server, it is not advisable. Also changes should not be made directly on the production system.

Use the original source repository of the project and clone it onto a workstation. There, you can perform changes to the theme. You can also test everything first. The whole production site will not break if something goes wrong or immediate steps are required.

Is the theme in a roots.io Bedrock WordPress site? Is the WordPress site running on a Trellis server?

2 Likes
3

Yeah, I understand that the theme should not be built on a production server. I usually don’t do that either. But got the fix either way, because it was just a simple change of a scss file primary color, that meant I just had to build the assets folder again.
First I had to just run yarn and after I could yarn build:production.
Thanks.