ViteJS configuration in VuePress with Quasar leading to "Component is missing template or render function."

[chintan-mishra]

I receive following error while using ViteJS with VuePress v2 and Quasar Framework v2.

[Vue warn]: Component is missing template or render function. 
  at <MyLayout> 
  at <AsyncComponentWrapper> 
  at <Vuepress onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
> > 
  at <RouterView> 
  at <VuepressApp>

ViteJS config is defined in the bundlerConfig section in the config.js file for VuePress.

bundlerConfig: {
  viteOptions: {
    plugins: [
      vue({
        template: { transformAssetUrls }
      }),
      quasar({
        sassVariables: path.resolve(__dirname, './theme/css/quasar-variable.sass')
      })
    ],
  },
  vuePluginOptions: {}
}

Commenting out the ViteJS configuration fixes the issue. But I cannot use the sassVariables. How to fix the ViteJS configuration for Quasar in VuePress?

[chintan-mishra]

I have also tried following configurations

Replaced vue in plugins section with vuePluginOptions in-built feature. But the dev build shows the following error In your Vite config file, please add the Quasar plugin after the Vue one.

  bundlerConfig: {
    vuePluginOptions: {
      template: { transformAssetUrls }
    },

    viteOptions: {
      plugins: [
        quasar({
          sassVariables: path.resolve(__dirname, './theme/css/quasar-variables.scss')
        })
      ],
    }
  }

In order to resolve the above issue, ViteJS plugins were ordered. The dev build is successful but the original error [Vue warn]: Component is missing template or render function. comes up again.

  bundlerConfig: {
    viteOptions: {
      plugins: [
        {
          ...vue({
            template: { transformAssetUrls }
          }),
          enforce: 'pre'
        },

        {
          ...quasar({
            sassVariables: path.resolve(__dirname, './theme/css/quasar-variables.scss')
          }),
          enforce: 'post'
        }
      ],
    }
  }

[chintan-mishra]

quasarframework/quasar#11497
vitejs/vite#5830

[meteorlxy]

Using vuePluginOptions should work 🤔 . If it did not work, there might be something related to how vite resolves nested plugins.

Could you help to test if this can work properly:

Move createVuePlugin() from createPlugin to createDev, and put it before createPlugin():

export const createPlugin = ({
  app,
  options,
  isServer,
  isBuild,
}: {
  app: App
  options: ViteBundlerOptions
  isServer: boolean
  isBuild: boolean
}): Plugin[] => [
-  // official vue plugin
-  createVuePlugin(options.vuePluginOptions),

  // vuepress custom plugin
  createConstantsReplacementPlugin(app),
  createMainPlugin({
    app,
    options,
    isServer,
    isBuild,
  }),
  createWorkaroundPlugin(),
]

export const createDev = (
  options: ViteBundlerOptions
): Bundler['dev'] => async (app: App) => {
  const viteConfig = mergeConfig(
    {
      configFile: false,
      plugins: [
+       // official vue plugin
+       createVuePlugin(options.vuePluginOptions),
        createPlugin({
          app,
          options,
          isServer: false,
          isBuild: false,
        }),
      ],
      // `clearScreen` won't take effect in `config` hook of plugin API
      clearScreen: false,
    },
    options.viteOptions ?? {}
  )

[meteorlxy]

Or simply use the result of createPlugin directly as the plugins:

export const createDev = (
  options: ViteBundlerOptions
): Bundler['dev'] => async (app: App) => {
  const viteConfig = mergeConfig(
    {
      configFile: false,
+     plugins: createPlugin({
+        app,
+        options,
+        isServer: false,
+        isBuild: false,
+      }),
      // `clearScreen` won't take effect in `config` hook of plugin API
      clearScreen: false,
    },
    options.viteOptions ?? {}
  )

[chintan-mishra]

So, I made the changes in the code sections you mentioned, and it worked.

The issue was resolved in a few steps.

• Clone the repository.
• Edit the code blocks below using the information above.
• Rebuild.
• Move the bundler-vite folder to ./node_modules/@vuepress/bundler-vite.

https://github.com/vuepress/vuepress-next/blob/a5574b80e114c1f8426b9a7e3cf6de30c0c4e407/packages/%40vuepress/bundler-vite/src/plugin/createPlugin.ts#L21

https://github.com/vuepress/vuepress-next/blob/a754f000f32440788737c56cb82bd3243cd51409/packages/%40vuepress/cli/src/commands/dev/createDev.ts#L18

Where can we discuss alternatives for this approach?

[meteorlxy]

Happy to hear that it worked. I'll fix it soon