Module build failed: Error: the "basedir" option is required to use includes and extends with "absolute" paths

[jantajov]

I am trying to use pug as template lang but getting an error when including the mixins.

Error says: Module build failed: Error: the "basedir" option is required to use includes and extends with "absolute" paths

Where am I supposed to configure the basedir option?

I have installed the pug using npm install pug --save-dev

My Login.vue looks like this now:

<template lang="pug">
  include /pug/PrependInput.pug
  div.app.flex-row.align-items-center
    div.container
      b-row.justify-content-center
        b-col(md="5")
          b-card.p-4(no-body)
            b-card-body
              h1 Login
</template>

Works fine, when I don't use include.

[woothu]

You can read about pathing in Vue here: https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules

[jantajov]

You can read about pathing in Vue here: https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules

@woothu How can link above answer my original question:

Where am I supposed to configure the basedir option?

---

According to docs:

If the URL starts with ., it's interpreted as a relative module request and resolved based on the folder structure on your file system.

Great, I can include my pug mixin using relative path: include ../../../pug/SearchInput.pug. This is a workaround at best not a solution.

If the URL is an absolute path (e.g. /images/foo.png), it will be preserved as-is.

Okay, this looks good. But you are supposed to configure base dir as the error message suggests in order to include pug file with absolute path.

Would it help if I created a minimal project to reproduce the error?

[woothu]

I am sorry, I didn't understand your issue correctly. In your case, I think that you have to set the config of pug in vue loader (docs: https://vue-loader.vuejs.org/guide/pre-processors.html#pug).

Vue CLI 3 options config have changed, now you have to put config in vue.config.js file. (docs: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders)

I hope that helps :)

P.S. I think this might be helpful for you to read: https://github.com/vuejs/vue-loader/issues/472

[Mk-Etlinger]

Hey there, I'm having the same issue with Vue v3.3.

What's the solve here exactly?

I know I need to add the basediroption for pug to resolve the include statement, but I don't see how to do that with vue.config.js, only webpack configs.

Module build failed (from ./node_modules/pug-plain-loader/index.js):
Error: the "basedir" option is required to use includes and extends with "absolute" paths

Here's what I have so far in vue.config.js:

const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/sass/_variables.sass";
          @import "@/sass/_globals.scss";
        `
      }
    }
  },
  chainWebpack: config => {
    config.resolve.alias
      // attempt to set an alias to resolve the path doesn't work
      .set("@pug", path.resolve(__dirname, "./src/pug"));
      // something like this?
      config.rules.pug.options.basedir = path.resolve(__dirname, "./src/pug");

  },
  pluginOptions: {
    // this doesn't seem to work either
    pug: {
      basedir: path.join(__dirname, 'src/pug')
    }
  }

}

@woothu any ideas? I appreciate your help on this =)

[woothu]

Did you try vue-cli-plugin-pug? It is possible that it will set config automatically.

https://www.npmjs.com/package/vue-cli-plugin-pug

[initplatform]

I seem to be missing something but can't quite figure out what..

my vue.config.js

const path = require('path');

const srcPath = path.resolve(path.dirname(__filename), 'src');

module.exports = {
    chainWebpack(config) {
        config.resolve.alias.delete('@');
        config.resolve
            .plugin('tsconfig-paths')
            .use(require('tsconfig-paths-webpack-plugin'));
        // Pug Loader
        config.module
            .rule('pug')
            .test(/\.pug$/)
            .use('pug-plain-loader')
            .loader('pug-plain-loader')
            .options({basedir: srcPath})
            .end();

    },
};

vue inspect shows:

      /* config.module.rule('pug') */
      {
        test: /\.pug$/,
        oneOf: [
          /* config.module.rule('pug').oneOf('pug-vue') */
          {
            resourceQuery: /vue/,
            use: [
              /* config.module.rule('pug').oneOf('pug-vue').use('pug-plain-loader') */
              {
                loader: '/Users/sam/Projects/vue-test/node_modules/pug-plain-loader/index.js'
              }
            ]
          },
          /* config.module.rule('pug').oneOf('pug-template') */
          {
            use: [
              /* config.module.rule('pug').oneOf('pug-template').use('raw') */
              {
                loader: 'raw-loader'
              },
              /* config.module.rule('pug').oneOf('pug-template').use('pug-plain-loader') */
              {
                loader: '/Users/sam/Projects/vue-test/node_modules/pug-plain-loader/index.js'
              }
            ]
          }
        ],
        use: [
          /* config.module.rule('pug').use('pug-plain-loader') */
          {
            loader: 'pug-plain-loader',
            options: {
              basedir: '/Users/sam/Projects/vue-test/src'
            }
          }
        ]
      },

but still getting error:

Module build failed (from ./node_modules/pug-plain-loader/index.js):
Error: the "basedir" option is required to use includes and extends with "absolute" paths

Looks like I need to also get the options in the oneOf[0].resourceQuery: /vue/, ...but not idea how to do that with the vue.config.js ...

[initplatform]

Figured it out, for anyone hitting the same issue.

added ->

        config.module
            .rule('pug')
            .test(/\.pug$/)
            .oneOf('pug-vue')
            .use('pug-plain-loader')
            .loader('pug-plain-loader')
            .options({basedir: srcPath})
            .end();

        config.module
            .rule('pug')
            .test(/\.pug$/)
            .oneOf('pug-template')
            .use('pug-plain-loader')
            .loader('pug-plain-loader')
            .options({basedir: srcPath})
            .end();

to vue.config.js