Build errors with alias 'vue': 'vue/dist/vue.esm-bundler.js'

[vadikom]

Description

Hi guys,

I have a vue component that requires runtime compilation support in Vue and as suggested by the following warning in the browser console in dev mode:

+onRenderClient.js:10 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".

first I added the following alias in vite.config.js:

{
  find: 'vue',
  replacement: 'vue/dist/vue.esm-bundler.js'
}

but I got the following error during build:

[vite:load-fallback] Could not load vue/dist/vue.esm-bundler.js/server-renderer (imported by pages/_error/+Page.vue): ENOENT: no such file or directory, open 'vue/dist/vue.esm-bundler.js/server-renderer'
[Error: Could not load vue/dist/vue.esm-bundler.js/server-renderer (imported by pages/_error/+Page.vue): ENOENT: no such file or directory, open 'vue/dist/vue.esm-bundler.js/server-renderer'] {
  errno: -2,
  code: 'PLUGIN_ERROR',
  syscall: 'open',
  path: 'vue/dist/vue.esm-bundler.js/server-renderer',
  pluginCode: 'ENOENT',
  plugin: 'vite:load-fallback',
  hook: 'load',
  watchFiles: [
  ...

So I changed the alias to use a regex like this:

{
  find: /^vue$/,
  replacement: 'vue/dist/vue.esm-bundler.js'
}

so that it doesn't affect the @vue/server-renderer import which helped me get pass the above error, however, I now get the following error during build:

...
vike v0.4.180 pre-rendering HTML...
file:///home/vasko/test/dist/server/chunks/chunk-2fbb272b.js:7
import { useSSRContext, mergeProps, computed, ref, onMounted, onBeforeUnmount, unref, inject, withCtx, createVNode, renderSlot, openBlock, createBlock, createCommentVNode, createTextVNode, h, getCurrentInstance, defineComponent, markRaw, createSSRApp, reactive } from "vue/dist/vue.esm-bundler.js";
                                    ^^^^^^^^
SyntaxError: Named export 'computed' not found. The requested module 'vue/dist/vue.esm-bundler.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'vue/dist/vue.esm-bundler.js';
const { useSSRContext, mergeProps, computed, ref, onMounted, onBeforeUnmount, unref, inject, withCtx, createVNode, renderSlot, openBlock, createBlock, createCommentVNode, createTextVNode, h, getCurrentInstance, defineComponent, markRaw, createSSRApp, reactive } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at loadConfigValues (file:///home/vasko/test/node_modules/vike/dist/esm/shared/page-configs/loadConfigValues.js:10:32)
    at file:///home/vasko/test/node_modules/vike/dist/esm/node/prerender/runPrerender.js:179:34
┌───────────────────────────────────────────────────────────────────────────────────┐
│ To fix this error, see https://vike.dev/broken-npm-package#named-export-not-found │
└───────────────────────────────────────────────────────────────────────────────────┘

Everything works fine in dev mode.

Any suggestions how to solve this?

Thanks!

[brillout]

Moving to discussion, as it isn't a Vike bug.

[vadikom]

Sorry for the confusion (marking this as Vike bug)!

Anyway, the info on the following page helped me solve the second issue:

https://vike.dev/broken-npm-package

Namely adding the following to vite.config.js:

ssr: {
  noExternal: ['vue']
},

I tried the other suggested solution vite-plugin-cjs-interop too but it didn't workout.

So to sum it up the following in vite.config.js seems to solve all build issues for me:

ssr: {
  noExternal: ['vue']
},
resolve: {
  alias: [
    {
      find: /^vue$/,
      replacement: 'vue/dist/vue.esm-bundler.js'
    }
  ]
}

[brillout]

👍 Thanks for circling back on this.