Laravel-mix: Compiler error since v4 - Vue SFC using pug lang for template

[vpratfr]

I followed the upgrade documentation to move to v4. It used to work nicely with v2.

Here is the error I get:

Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
    at loadTemplateCompiler (\node_modules\vue-loader\lib\index.js:21:11)
    at Object.module.exports (\node_modules\vue-loader\lib\index.js:65:35)

Using Yarn 1.12

Here are our dependencies.

  "devDependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.8",
    "@fortawesome/free-solid-svg-icons": "^5.5.0",
    "@fortawesome/vue-fontawesome": "^0.1.2",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "bootstrap-vue": "^2.0.0-rc.11",
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.0",
    "cross-env": "^5.2.0",
    "eslint": "^4.19.1",
    "flatpickr": "^4.5.2",
    "form-backend-validation": "^2.3.3",
    "fs-extra": "^5.0.0",
    "html5shiv": "^3.7.3",
    "jquery": "^3.2",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.11",
    "media-match": "^2.0.3",
    "moment": "^2.22.2",
    "path": "^0.12.7",
    "popper.js": "^1.14.4",
    "pug": "^2.0.3",
    "pug-loader": "^2.4.0",
    "resolve-url-loader": "^2.3.1",
    "respond": "^0.9.0",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "shipit-cli": "^4.1.2",
    "shipit-composer": "^0.0.5",
    "shipit-deploy": "^4.1.3",
    "shipit-shared": "^4.4.2",
    "shipit-yarn": "^0.2.0",
    "string-mask": "^0.3.0",
    "sweetalert": "^2.1.0",
    "v-mask": "^1.3.3",
    "vue": "^2.5.17",
    "vue-bootstrap-datetimepicker": "^5.0.1",
    "vue-js-modal": "^1.3.26",
    "vue-multiselect": "^2.1.3",
    "vue-promise-btn": "^1.1.0",
    "vue-template-compiler": "^2.5.21",
    "vue-toasted": "^1.1.26",
    "vue2-collapse": "^1.0.15",
    "vue2-storage": "^3.4.0",
    "vuejs-datepicker": "^1.5.3",
    "waypoints": "^4.0.1",
    "webpack-synchronizable-shell-plugin": "^0.0.7"
  },

I also tried to create a new laravel/laravel project and update the ExampleComponent to use pug. No success either.

Got a warning at install (after adding pug and pug-loader deps)

warning " > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".

And errors at compile

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 
  Error compiling template:

  div
        div.row 


  - Component template requires a root element, rather than just text.

Here is modified package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "pug": "^2.0.3",
        "pug-loader": "^2.4.0",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.5.21"
    }
}

[OrkhanAlikhanov]

"vue": "^2.5.17",
"vue-template-compiler": "^2.5.21"

There is version mismatch, that's why it complains:

Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

[OrkhanAlikhanov]

For your second problem (Component template requires a root element, rather than just text.), which I ran into as well, add pug-plain-loader to your dependencies:

npm install pug pug-plain-loader --save-dev

then update webpack.mix.js to add:

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.pug$/,
        oneOf: [
          {
            resourceQuery: /^\?vue/,
            use: ['pug-plain-loader']
          },
          {
            use: ['raw-loader', 'pug-plain-loader']
          }
        ]
      }
    ]
  }
});

---

@JeffreyWay What do you think about supporting <template lang="pug"> for vue-loader?
https://github.com/vuejs/vue-loader/blob/4e907844de8223f55fff7cd4d3fa77b565b179a3/example/webpack.config.js#L29-L43

[vpratfr]

Will try. Thanks a lot.

Used to work without any additional configuration with previous Mix setup. Will add those lines. If not directly supported out of the box, I think it would be nice to at least mention that breaking change in the upgrade docs.

Thanks.

[nmsmith22389]

I also had this working fine (no modifications) before the update. Configuring Webpack like @JeffreyWay said fixes the issue but I'd still prefer it the old way where it would parse pug templates in .vue files without any config.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.