Vite: Default import yields more than default export

[tobiasdiez]

Environment

• Operating System: Linux
• Node Version: v14.18.1
• Nuxt Version: 2.16.0-27285136.ab1c6cb4
• Package Manager: [email protected]
• Bundler: Webpack
• User Config: plugins, bridge, target, ssr, buildModules
• Runtime Modules: -
• Build Modules: @nuxt/[email protected]

Reproduction

https://codesandbox.io/s/strange-tree-9fdkz

Describe the bug

VueTailwind defines

    exports.BaseComponent = Component;
    exports.default = plugin;

With bridge.vite = true the import import VueTailwind from "vue-tailwind" (in a plugin) yields the object

{
   BaseCompont: ....
   default: { install: ... }
}

instead of the default plugin { install: ... }. With disabled vite everything works as expected.

As with webpack everything is fine, I suspect there is a problem with bridge instead of with the library VueTailwind.

Additional context

No response

Logs

No response

[ayalon]

The issue is, that nuxt vite automatically adds some default exports but does not consider named default exports. I described the issue here:
nuxt/vite#203

[pi0]

[email protected] is only exporting a cjs file in umd format. You need to report it to upstream for native esm support.

Here is a proper workaround usage for Vue2/Bridge:

import VueTailwind from "vue-tailwind";
import Vue from "vue";
import { TInput } from "vue-tailwind/dist/components";

const VueTailwindPlugin =
  // @ts-ignore
  VueTailwind.default?.default || VueTailwind.default || VueTailwind;

Vue.use(VueTailwindPlugin, {
  "t-input": {
    component: TInput,
    props: {
      classes: "border-2 block w-full rounded text-gray-800"
      // ...More settings
    }
  }
});

export default {};

Note that nuxtApp.vueApp.use is not right to install Vue2 plugins. It adds overhead to each request.

BTW it seems the upcoming version is being rebranded to variantjs (alfonsobries/vue-tailwind#214)

[tobiasdiez]

Thanks a lot, this worked nicely. Maybe its worthwhile to add this strategy/workaround to the documentation, as I guess there are quite a few libraries that are not yet supporting esm.

By the way, I took the nuxtApp.vueApp.use from https://v3.nuxtjs.org/docs/directory-structure/plugins#vue-plugins. I guess that's the right way with nuxt3 but not with bridge then?

[pi0]

Good idea for adding de-default workarounds to esm troubleshoot👍

By the way, I took the nuxtApp.vueApp.use from https://v3.nuxtjs.org/docs/directory-structure/plugins#vue-plugins. I guess that's the right way with nuxt3 but not with bridge then?

Indeed. Docs are following vue3/nuxt3 best practices. We probably need to add some notes to the bridge section about installing vue2 plugins or make vue2App compat better to avoid calling plugin install each time.

[tobiasdiez]

Okay, follow up at nuxt/nuxt#12825 and nuxt/framework#2036.