Yarn start error with webpack

sage
1

I get the following error when I run the command yarn start:
image

Previously, I had to install webpack-cli, but the error persisted.

2

What is your environment? Mac? Windows? Did you install the local project dependencies with yarn before running yarn start?

3

I am running on Windows. I believe I have installed local project dependencies because everything was fine before. Would that possibly be a reason for the error?

4

“Before” what? What have you tried?

5

Before I installed webpack-cli and when I just setup the environment for roots.io.

6

Sage isn’t using Webpack 4 so you don’t need webpack-cli. Make sure you are running Node < 10 too. Use nvm if you need multiple Node versions installed.

7

I am currently using npm 5.6.0. How do I uninstall webpack-cli and reinstall?

8

npm uninstall -D webpack-cli should do the trick, unless you’ve installed it globally, then use npm uninstall -g webpack-cli.

9

I did the command, but the error is still there when I run yarn start. Also, I now get error Module failed (from ../node_modules/cache-loader/dist/cjs.js when I run run build.

10

Can you post your package.json file?

11 
{
  "name": "sage",
  "version": "9.0.1",
  "author": "Roots <team@roots.io>",
  "homepage": "https://roots.io/sage/",
  "private": true,
  "repository": {
    "type": "git",
    "url": "git://github.com/roots/sage.git"
  },
  "bugs": {
    "url": "https://github.com/roots/sage/issues"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "http://opensource.org/licenses/MIT"
    }
  ],
  "browserslist": [
    "last 2 versions",
    "android 4",
    "opera 12"
  ],
  "stylelint": {
    "extends": "stylelint-config-standard",
    "rules": {
      "no-empty-source": null,
      "at-rule-no-unknown": [
        true,
        {
          "ignoreAtRules": [
            "extend",
            "at-root",
            "debug",
            "warn",
            "error",
            "if",
            "else",
            "for",
            "each",
            "while",
            "mixin",
            "include",
            "content",
            "return",
            "function"
          ]
        }
      ]
    }
  },
  "scripts": {
    "build": "webpack --progress --config resources/assets/build/webpack.config.js",
    "build:production": "webpack --progress -p --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"
  },
  "engines": {
    "node": ">= 6.9.4"
  },
  "devDependencies": {
    "autoprefixer": "~8.2.0",
    "browser-sync": "~2.23.6",
    "browsersync-webpack-plugin": "^0.6.0",
    "bs-html-injector": "~3.0",
    "buble-loader": "^0.4.1",
    "cache-loader": "~1.2.0",
    "clean-webpack-plugin": "^0.1.18",
    "copy-globs-webpack-plugin": "^0.2.0",
    "css-loader": "^0.28.9",
    "cssnano": "~v4.0.0-rc.2",
    "eslint": "~4.19.1",
    "eslint-loader": "~1.9",
    "eslint-plugin-import": "~2.11.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.6",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "imagemin-mozjpeg": "~7.0.0",
    "imagemin-webpack-plugin": "~2.1.1",
    "import-glob": "~1.5",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "~4.8.3",
    "postcss-loader": "~2.1.0",
    "postcss-safe-parser": "~3.0",
    "resolve-url-loader": "~2.3.0",
    "rimraf": "~2.6",
    "sass-loader": "~6.0",
    "style-loader": "^0.20.1",
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "~18.2.0",
    "stylelint-webpack-plugin": "^0.10.1",
    "url-loader": "^0.6.2",
    "webpack": "^4.16.5",
    "webpack-assets-manifest": "^1.0.0",
    "webpack-command": "^0.4.1",
    "webpack-dev-middleware": "~2.0.4",
    "webpack-hot-middleware": "~2.22.0",
    "webpack-merge": "~4.1.1",
    "yargs": "~11.0.0"
  },
  "dependencies": {
    "bootstrap": "v4.1.0",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.3"
  }
}
12

Were you trying to include support for webpack 4? A lot the changes seem to reflect that.

Downgrade the following:

  • webpack to 3.x.x
  • extract-text-webpack-plugin to 3.x.x

Remove webpack-command.

Use this package.json for reference for those specific versions.

webpack 4 support is coming to Sage soon. In the meantime, you can attempt to support it yourself, but we will not be able to provide support for you to do so here on the forum.