Error plugin[name] is not a function encountered when building with Vite/Vue3/Pug3

[Tempystral]

Hi, I'm having trouble getting this plugin to work. I'm packaging my app with Vite and followed the instructions on how to add the plugin. Whenever I try to run the dev server or build, I get the error that "plugin[name]" is not a function, and I confess I'm too inexperienced with the platform to say exactly why.

My Vite config is very simple, not too different from the example except that I'm using Typescript and ES Modules, neither of which seem like they should interfere with this.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import * as vuePugPlugin from "vue-pug-plugin";

export default defineConfig({
  root: "./src",
  build: {
    outDir: "../dist",
    emptyOutDir: true
  },
  plugins: [
    vue({
      template: {
        preprocessOptions: {
          plugins: [{
              preCodeGen: vuePugPlugin
            }]
        }
      }
    })
  ]
});

The error I get is the following:

[plugin:vite:vue] plugin[name] is not a function

/src/components/Expansion.vue
    at /node_modules/pug/lib/index.js:45:39
    at Array.reduce (<anonymous>)
    at applyPlugins (/node_modules/pug/lib/index.js:44:18)
    at compileBody (/node_modules/pug/lib/index.js:198:9)
    at Object.exports.compile (/node_modules/pug/lib/index.js:269:16)
    at /node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:2317:58
    at /node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1439:5
    at new Promise (<anonymous>)
    at promisify (/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1432:10)
    at Function.exports.pug.render (/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:2302:10

Sorry, I know this is an old project and I understand if it's not being supported, but I would appreciate any insight on this issue.

[matthewjumpsoffbuildings]

The project is being supported, I still use it actively. This is likely due to the fact the package doesnt export an ES module, only CommonJS. I will investigate

[matthewjumpsoffbuildings]

@Tempystral Okay it turns out you are just using the import statement incorrectly. The following should do the trick:

import vuePugPlugin from 'vue-pug-plugin'

[Tempystral]

Interesting, I had tried that as well and it didn't seem to be working, but I will investigate further on my end. I'll update later if I have more information -- thanks!

[matthewjumpsoffbuildings]

Im using it with that syntax in a vite/vue3 project successfully. ES6/TS projects should be able to import CommonJS modules default exports like that with no issues

[matthewjumpsoffbuildings]

I have updated my test project and am now seeing the same issue. Perhaps something has changed in vite or pug packages since last time I tested it.

[matthewjumpsoffbuildings]

Actually nevermind @Tempystral - it was due to me updating to version 2.0.0 of this plugin, in which I changed the syntax.

I would recommend you doing the same, updating to version 2.0.0 changing your code to the following

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vuePugPlugin from "vue-pug-plugin";

export default defineConfig({
  root: "./src",
  build: {
    outDir: "../dist",
    emptyOutDir: true
  },
  plugins: [
    vue({
      template: {
        preprocessOptions: {
          plugins: [
            vuePugPlugin,
          ]
        }
      }
    })
  ]
});

[Tempystral]

I'll give that a try, thanks. I'll let you know the result when I have a moment to sit down and test.

[Tempystral]

I can confirm it works, just had to make sure I was installing the new version. Thanks a million.

[matthewjumpsoffbuildings]

@Tempystral you're welcome