Vite ssg build failed

[Klein Petr]

Versions

• 2.0.0-rc.5

Describe the bug

When I try build with vite-ssg I've got these error, but locally works well

import Toast, { POSITION, TYPE, useToast } from "vue-toastification";
                ^^^^^^^^
SyntaxError: Named export 'POSITION' not found. The requested module 'vue-toastification' 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-toastification';
const { POSITION, TYPE, useToast } = pkg;

Steps to reproduce

1. install vue-toastification@next
2. prepare user module to install
3. try to build via vite-ssg build

Your Environment

• Device: ThinkPad T470
• OS: PopOS 21.04

Additional context

App is based on Vitesse template where are UserModules which I am using to register toastification, here is my example

import type { PluginOptions } from 'vue-toastification'
import Toast, { POSITION, TYPE } from 'vue-toastification'
import type { UserModule } from '~/types'
import 'vue-toastification/dist/index.css'

const options: PluginOptions = {
  position: POSITION.BOTTOM_RIGHT,
  toastDefaults: {
    [TYPE.ERROR]: {
      timeout: 10000,
    },
    [TYPE.WARNING]: {
      timeout: false,
    },
  },

}

export const install: UserModule = ({ app, router, isClient }) => {
  if (isClient) {
    options.onMounted = (_, toastApp) => {
      // Register the router. See here https://github.com/Maronato/vue-toastification/issues/162#issuecomment-945208145
      toastApp.use(router)
    }

    app.use(Toast, options)
  }
}

[nandi95]

The suggestion from the console does work

import pkg from 'vue-toastification';
const { POSITION, TYPE, useToast } = pkg;

This I believe happens when the esm files get transpiled and the transpilation would be
const pkg = require("vue-toastification"); not const POSITION = require("vue-toastification").POSITION for every different exported member

[barszczuPro]

The suggested notation doesn't work for me. I had a similar problem and solved it this way:

import * as pkg from "vue-toastification"
const { useToast } = pkg

We need to import all the exported contents of the javascript file.

[Kushma Thapa]

@barszczuPro answer worked for me instead of the suggested notation.

[Usman Ejaz]

I am using Laravel and Inertia-ssr with Vue. I am facing this issue Named export 'useToast' not found.. I've tried all above solutions but it didn't work.
Any other update on this issue?

[Igor Luiz Halfeld]

@barszczuPro solution didn't work for me

but I solved with this:

import * as Toast from "vue-toastification/dist/index.mjs"
import SimpleToast from '@/components/SimpleToast/SimpleToast.vue'

const { useToast } = Toast

export function useNotification() {
  const toast = useToast()

  const success = (message: string) => {
    toast({ component: SimpleToast, props: { type: 'Success', message } })
  }

  const error = (message: string) => {
    toast({ component: SimpleToast, props: { type: 'Error', message } })
  }

  return { success, error }
}

now vite found esm

[ctmithilesh]

The suggested notation doesn't work for me. I had a similar problem and solved it this way:

import * as pkg from "vue-toastification"
const { useToast } = pkg

We need to import all the exported contents of the javascript file.

this is working