The requested module '/node_modules/.vite/deps/vue.js?v=79c678c7' does not provide an export named 'createElementBlock'

[JinZhang-96]

The requested module '/node_modules/.vite/deps/vue.js?v=79c678c7' does not provide an export named 'createElementBlock'

[jpkleemans]

Hi, could you please reproduce the problem, for example in a Code Sandbox?

[dephiros]

Run in this error as well. Let me try to recreate a code sandbox @jpkleemans , seems like a Vue 2.7 problem? https://codesandbox.io/s/adoring-goldwasser-02gbry?file=/vite.config.js

[kingyue737]

It seems to be the version of @vue/compiler-sfc. To support vue 2.7, may need to move @vue/compiler-sfc from dependencies to peer dependencies.

// package.json
{
  "peerDependencies": {
    "@vue/compiler-sfc": "^2.7.0 || ^3.0.0",
    "vite": "^2.0.0 || ^3.0.0-0 || ^4.0.0"
  },
  "peerDependenciesMeta": {
    "@vue/compiler-sfc": {
      "optional": true
    }
  },
}

I've made a fork for Vue 2 for temporary workaround: https://github.com/kingyue737/vite-plugin-vue2-svg

[romansp]

Another band-aid solution is to force version of @vue/compiler-sfc via package.json resolutions if you're using Yarn.

// package.json
"dependencies": {
  "vue": "^2.7.14"
},
"resolutions": {
  "@vue/compiler-sfc": "^2.7.14"
}

And for typescript to make Volar and vue-tsc happy need to also adjust some types. That's because vue@2 doesn't export separate FunctionalComponent type.

declare module "*.svg?component" {
  import { Component } from "vue";

  const src: Component;
  export default src;
}

declare module "*.svg?url" {
  const src: string;
  export default src;
}

declare module "*.svg?raw" {
  const src: string;
  export default src;
}

declare module "*.svg?skipsvgo" {
  import { Component } from "vue";

  const src: Component;
  export default src;
}

[gkatsanos]

Not sure if this is something we can fix...