Cannot import CommonJS module

[martsyn]

Describe the bug

Here's the code that I'm trying to convert to SSG:

import { Loader } from "@googlemaps/js-api-loader";

When I'm importing from a CommonJS module, e.g. @googlemaps/js-api-loader I'm getting the following error:

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
file:///C:/Users/xxx/source/vue-ssg-test/.vite-ssg-temp/5fjfvv3vwz/main.mjs:5
import { Loader } from "@googlemaps/js-api-loader";
         ^^^^^^
SyntaxError: Named export 'Loader' not found. The requested module '@googlemaps/js-api-loader' 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 '@googlemaps/js-api-loader';
const { Loader } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async build (file:///C:/Users/xxx/source/vue-ssg-test/node_modules/vite-ssg/dist/node.mjs:1017:87)
    at async Object.handler (file:///C:/Users/xxx/source/vue-ssg-test/node_modules/vite-ssg/dist/node/cli.mjs:34:5)

Node.js v21.1.0

If I switch my code as the example in the error shows:

import pkg from '@googlemaps/js-api-loader';
const { Loader } = pkg;

...then I'm getting a different error:

"default" is not exported by "node_modules/@googlemaps/js-api-loader/dist/index.esm.js", imported by "src/views/HomeView.vue?vue&type=script&setup=true&lang.ts".
file: C:/Users/xxx/source/vue-ssg-test/src/views/HomeView.vue?vue&type=script&setup=true&lang.ts:6:7
4: import TheWelcome from '../components/TheWelcome.vue'
5:
6: import pkg from '@googlemaps/js-api-loader';
          ^
7: import { onMounted } from 'vue'

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
file:///C:/Users/xxx/source/vue-ssg-test/node_modules/rollup/dist/es/shared/node-entry.js:2287
        base = Object.assign(new Error(base.message), base);
                             ^

Error [RollupError]: "default" is not exported by "node_modules/@googlemaps/js-api-loader/dist/index.esm.js", imported by "src/views/HomeView.vue?vue&type=script&setup=true&lang.ts".
    at error (file:///C:/Users/xxx/source/vue-ssg-test/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
    at Module.error (file:///C:/Users/xxx/source/vue-ssg-test/node_modules/rollup/dist/es/shared/node-entry.js:13745:16)
    at Module.traceVariable (file:///C:/Users/xxx/source/vue-ssg-test/node_modules/rollup/dist/es/shared/node-entry.js:14175:29)
    at ModuleScope.findVariable (file:///C:/Users/xxx/source/vue-ssg-test/node_modules/rollup/dist/es/shared/node-entry.js:12615:39)
    at FunctionScope.findVariable (file:///C:/Users/xxx/source/vue-ssg-test/node_modules/rollup/dist/es/shared/node-entry.js:7124:38)
    at ChildScope.findVariable (file:///C:/Users/xxx/source/vue-ssg-test/node_modules/rollup/dist/es/shared/node-entry.js:7124:38)
    at Identifier.bind (file:///C:/Users/xxx/source/vue-ssg-test/node_modules/rollup/dist/es/shared/node-entry.js:8319:40)
    at VariableDeclarator.bind (file:///C:/Users/xxx/source/vue-ssg-test/node_modules/rollup/dist/es/shared/node-entry.js:5892:23)
    at VariableDeclaration.bind (file:///C:/Users/xxx/source/vue-ssg-test/node_modules/rollup/dist/es/shared/node-entry.js:5888:28)
    at BlockStatement.bind (file:///C:/Users/xxx/source/vue-ssg-test/node_modules/rollup/dist/es/shared/node-entry.js:5888:28) {
  binding: 'default',
  code: 'MISSING_EXPORT',
  exporter: 'C:/Users/xxx/source/vue-ssg-test/node_modules/@googlemaps/js-api-loader/dist/index.esm.js',
  id: 'C:/Users/xxx/source/vue-ssg-test/src/views/HomeView.vue?vue&type=script&setup=true&lang.ts',
  url: 'https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module',
  pos: 240,
  loc: {
    column: 7,
    file: 'C:/Users/xxx/source/vue-ssg-test/src/views/HomeView.vue?vue&type=script&setup=true&lang.ts',
    line: 6
  },

Reproduction

Create a new project following npm create vue@latest, convert it to vue-ssg following README, add the import example that I pasted in the beginning.

System Info

Binaries:
    Node: 21.1.0
    npm: 10.2.0

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[whoooami]

code

import Toast, { PluginOptions, useToast } from "vue-toastification";

error info:

import Toast, { useToast } from "vue-toastification";
                ^^^^^^^^
SyntaxError: Named export 'useToast' 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 { useToast } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async build (file://node_modules/.pnpm/[email protected][email protected][email protected]_@[email protected][email protected][email protected]__vu_ukvhezbgpsjhqwweuganzspw7y/node_modules/vite-ssg/dist/node.mjs:999:87)
    at async Object.handler (file://node_modules/.pnpm/[email protected][email protected][email protected]_@[email protected][email protected][email protected]__vu_ukvhezbgpsjhqwweuganzspw7y/node_modules/vite-ssg/dist/node/cli.mjs:34:5)

Node.js v21.1.0
pnpm 9.11.0

[whoooami]

code

import Toast, { PluginOptions, useToast } from "vue-toastification";

error info:

import Toast, { useToast } from "vue-toastification";
                ^^^^^^^^
SyntaxError: Named export 'useToast' 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 { useToast } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async build (file://node_modules/.pnpm/[email protected][email protected][email protected]_@[email protected][email protected][email protected]__vu_ukvhezbgpsjhqwweuganzspw7y/node_modules/vite-ssg/dist/node.mjs:999:87)
    at async Object.handler (file://node_modules/.pnpm/[email protected][email protected][email protected]_@[email protected][email protected][email protected]__vu_ukvhezbgpsjhqwweuganzspw7y/node_modules/vite-ssg/dist/node/cli.mjs:34:5)

Node.js v21.1.0
pnpm 9.11.0

temporiate fix it with add 'vue-toastification' to ssr.noExternal in vite.config.ts

ssr: {
    // TODO: workaround until they support native ESM
    noExternal: ['workbox-window', 'vue-toastification', /vue-i18n/],
  },