Named Export from CommonJS module fails

See original GitHub issue

When using https://github.com/Maronato/vue-toastification#using-a-custom-component

like (in modules):

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

export const install: UserModule = ({ app, isClient }) => {
  if (!isClient) return
  const options: PluginOptions = {
    position: POSITION.BOTTOM_RIGHT,
    timeout: false,
  }
  app.use(Toast, options)
}

And build, I get:

[vite-ssg] Build for server...
vite v2.7.12 building SSR bundle for production...
✓ 76 modules transformed.
.vite-ssg-temp/manifest.webmanifest        0.38 KiB
.vite-ssg-temp/assets/style.23fdc254.css   49.34 KiB
.vite-ssg-temp/main.mjs                    593.87 KiB

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
file:///Users/valentin/Development/art/seven-dots-monorepo/vitesse/.vite-ssg-temp/main.mjs:24
import Toast, { POSITION, useToast, TYPE } 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, useToast, TYPE } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async build (/Users/valentin/Development/art/seven-dots-monorepo/vitesse/node_modules/vite-ssg/dist/node/cli.cjs:180:44)
    at async Object.handler (/Users/valentin/Development/art/seven-dots-monorepo/vitesse/node_modules/vite-ssg/dist/node/cli.cjs:294:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

any idea?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7

github_iconTop GitHub Comments

1reaction
userquincommented, Feb 4, 2022

@Valentin-Seehausen @ArgekarStudios try switching to cjs using format: 'cjs' on ssgOptions

0reactions
ArgekarStudioscommented, Feb 4, 2022

@Valentin-Seehausen that worked perfectly thanks a lot…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Named exports missing from CommonJS module compiled ...
Named exports are missing when importing a CommonJS module compiled with Typescript 4.4 when importHelpers is true . Setting importHelpers to ...
Read more >
Import CommonJS default exports as named exports / Cannot ...
exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'discord.
Read more >
How to write CommonJS exports that can be name-imported ...
This blog post explores how to write CommonJS modules so that their exports can be name-imported from ESM modules on Node.js.
Read more >
export - JavaScript - MDN Web Docs
This re-exports all named exports from mod as the named exports of the current module, but the default export of mod is not...
Read more >
Default Exports in JavaScript Modules Are Terrible
Consider an example module containing both a named export and a default export: ... of Node's failed attempt at a module format -...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found