Error in build: Named export. The requested module is a CommonJS module

[Codermar]

trafficstars

Build fails when using @googlemaps/js-api-loader. Code works in development mode.

[vite-ssg] An internal error occurred. [vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues file:///usr/local/playground/@codermar/monorepo/marynela.com/.vite-ssg-temp/main.mjs:30 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

Repro: I am using a standard vitesse template, I added the @googlemaps/js-api-loader package

run this code in a page:

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Loader } from '@googlemaps/js-api-loader'

const GOOGLE_MAPS_API_KEY = 'AIzaSyAzKV6QD_LcXY1IRk6pZF2_DH8bQCJXm1g'

const loader = new Loader({ apiKey: GOOGLE_MAPS_API_KEY })
const mapDiv = ref()

onMounted(async () => {
  await loader.load()
  new google.maps.Map(mapDiv.value, {
    center: { lat: 48.858991265576336, lng: 2.2945885883556913 },
    zoom: 15,
  })
})
</script>

<template>
  <div container bdr p-8 mx-auto>
    <div ref="mapDiv" style="width: 500px; height: 300px" />
  </div>
</template>

[userquin]

@Codermar try this:

import GMaps from '@googlemaps/js-api-loader'

const { Loader } = Gmaps

[Codermar]

@Codermar try this:

import GMaps from '@googlemaps/js-api-loader'

const { Loader } = GMaps

Nope... sorry, no cigar...

vue-router.mjs:3420 SyntaxError: The requested module '/node_modules/.vite/deps/@googlemaps_js-api-loader.js?v=a9d309d9' does not provide an export named 'default' (at GoogleDemo.vue:6:1)

[userquin]

@Codermar try this one and check the entry to locate the Loader:

import * as GMaps from '@googlemaps/js-api-loader'

[Codermar]

@Codermar try this one and check the entry to locate the Loader:

import * as GMaps from '@googlemaps/js-api-loader'

Either of the imports below will work in dev mode but not when I build the the app

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

import * as GMaps from '@googlemaps/js-api-loader'
const { Loader } = GMaps

    at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
    at async build (file:///usr/local/playground/@codermar/monorepo/marynela.com/node_modules/.pnpm/[email protected]_f2vbnymipnpnj4wabiuutc33iy/node_modules/vite-ssg/dist/chunks/build.mjs:171:87)
    at async Object.handler (file:///usr/local/playground/@codermar/monorepo/marynela.com/node_modules/.pnpm/[email protected]_f2vbnymipnpnj4wabiuutc33iy/node_modules/vite-ssg/dist/node/cli.mjs:20:3)```

[Codermar]

This seems to be a similar issue. https://github.com/antfu/vite-ssg/issues/166 Is there something missing in the https://github.com/antfu/vite-ssg/issues/166 package itself?

[userquin]

@Codermar can you log to console the GMaps using last approach or just put the full log here?

[Codermar]

Interesting... I inadvertently had the vue3-google-maps still in my package.json (which has the same '@googlemaps/js-api-loader' dependancy. I removed it and now the build completes (and preview works) although there's a different error:

Using:

import * as GMaps from '@googlemaps/js-api-loader'
const { Loader } = GMaps

PWA v0.12.3
mode      generateSW
precache  16 entries (242.37 KiB)
files generated
  dist/sw.js
  dist/workbox-f51ab5e4.js

[vite-ssg] Build for server...
vite v2.9.14 building SSR bundle for production...
✓ 55 modules transformed.
.vite-ssg-temp/manifest.webmanifest        0.38 KiB
.vite-ssg-temp/main.mjs                    74.87 KiB
.vite-ssg-temp/assets/style.ccd18fee.css   13.70 KiB

[vite-ssg] Rendering Pages... (6)
[vite-ssg] Critical CSS generation enabled via `critters`
TypeError: Loader is not a constructor
    at setup (file:///usr/local/playground/@codermar/monorepo/marynela.com/.vite-ssg-temp/main.mjs:1446:20)
    at _sfc_main$4.setup (file:///usr/local/playground/@codermar/monorepo/marynela.com/.vite-ssg-temp/main.mjs:1469:25)
    at callWithErrorHandling (/usr/local/playground/@codermar/monorepo/marynela.com/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:119:22)
    at setupStatefulComponent (/usr/local/playground/@codermar/monorepo/marynela.com/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5789:29)
    at setupComponent (/usr/local/playground/@codermar/monorepo/marynela.com/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5770:11)
    at renderComponentVNode (/usr/local/playground/@codermar/monorepo/marynela.com/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:169:17)
    at renderVNode (/usr/local/playground/@codermar/monorepo/marynela.com/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:292:22)
    at renderComponentSubTree (/usr/local/playground/@codermar/monorepo/marynela.com/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:256:13)
    at renderComponentVNode (/usr/local/playground/@codermar/monorepo/marynela.com/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:185:16)
    at ssrRenderComponent (/usr/local/playground/@codermar/monorepo/marynela.com/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:605:12)
[Vue warn]: Component <Anonymous> is missing template or render function.
dist/index-vitesse.html  14.31 KiB
dist/index.html       43.86 KiB
dist/about.html       21.85 KiB
dist/chitchat.html    11.30 KiB
dist/readme.html      23.68 KiB
dist/googledemo.html  19.32 KiB

[vite-ssg] Regenerate PWA...

PWA v0.12.3
mode      generateSW
precache  21 entries (375.70 KiB)
files generated
  dist/sw.js
  dist/workbox-f51ab5e4.js

[vite-ssg] Build finished.

As far as I can tell the page renders correctly in preview

[userquin]

Try the first approach: import GMaps from... and log the Loader if still failing

[PRHyzzza]

Using the async-validator4.2.5 package, this problem also occurs

[tim-kilian]

I've go the same problem.

import * as GMaps from '@googlemaps/js-api-loader'
const { Loader } = GMaps

This chunk do works, but the treeshaking do not, so that the resulting files are very big.

[alexpopovme]

I have the same problem on build with the error Named export ... not found. The requested module ... is a CommonJS ... The error can appear on some package dependency so it'd be crazy to modify all that imports to something like import * as .. The dev work OK. The module has correct named exports. Are there any ideas how to resolve imports on the vite-ssg build process ...?

[armenr]

Seeing the same issue with vite-SSG + NauiveUI

[Albert-Valdes]

Seeing the same issue with vite-SSG + Vue3-google-map

import { GoogleMap, Marker } from 'vue3-google-map';

SyntaxError: Named export 'GoogleMap' not found. The requested module 'vue3-google-map' is a CommonJS module, which may not support all module.exports as named exports.

[codenfree]

Seeing the same issue with vite-SSG + NauiveUI

same here...wondering if any update on this issue

[IsraelOrtuno]

I also use NaiveUI but have disabled it entirely and doesn't seem to be related to its SSR configuration.

This worked for me ➡️ https://github.com/antfu/vite-ssg/issues/266#issuecomment-1180873768

[censujiang]

Seeing the same issue with vite-SSG + NauiveUI

I have same question

[dezkareid]

This solve my problem with prop-types using SSR

[ademtonay]

Hello,

I've the same issue. I tried all the solutions above but it didn't work for me. I'm getting the same error while using 'vue3-google-map' package.

Here is my source code:

<script setup lang='ts'>
import { GoogleMap } from 'vue3-google-map'
import type { ICoordinate } from '../types'

defineProps<{
  center: ICoordinate
  zoom: number
}>()

const apiKey = import.meta.env.VITE_GOOGLE_API_KEY
</script>

<template>
  <GoogleMap :api-key="apiKey" class="googleMap" :center="center" :zoom="zoom" />
</template>

Error output:

[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/ademt/.projects/Estate/front-end/web/.vite-ssg-temp/44795jgiyh/main.mjs:16
import { GoogleMap } from "vue3-google-map";
         ^^^^^^^^^
SyntaxError: Named export 'GoogleMap' not found. The requested module 'vue3-google-map' 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 'vue3-google-map';
const { GoogleMap } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

Node.js v18.15.0
 ELIFECYCLE  Command failed with exit code 1.

[IqbalLx]

any update on this? I use sveltekit, same behaviour, dev works ok but failed when building. In my case the failing lib is node-postgres with error

import { Pool } from "pg";
         ^^^^
SyntaxError: Named export 'Pool' not found. The requested module 'pg' 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 'pg';
const { Pool } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:300:10)
    at [kOnMessage] (node:internal/worker:311:37)
    at MessagePort.<anonymous> (node:internal/worker:212:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:737:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28)

Node.js v18.16.0

[jpgnz]

Following the latest information in @dezkareid's comment above worked for me (new url is here though).

The fix that worked for me is here: https://github.com/cyco130/vite-plugin-cjs-interop#usage

cjsInterop({
    dependencies: [
        "@googlemaps/js-api-loader",
    ],
}),

[IlyaSemenov]

Has anyone found a way to discover failing packages (those that will need unwrapping) beforehand? This hits us from time to time: everything works in dev mode, then fails to run in a production build due to CJS interop issue.

Is there perhaps some setting that would disable automatic CJS interop in dev mode?

[winexy]

@IlyaSemenov

Has anyone found a way to discover failing packages (those that will need unwrapping) beforehand? This hits us from time to time: everything works in dev mode, then fails to run in a production build due to CJS interop issue.

Is there perhaps some setting that would disable automatic CJS interop in dev mode?

You could try to use optimizeDeps.disabled looks like it can help with disabling CJS interop in dev mode.

I couldn't check it cause i use [email protected] which does not support it yet. 🙃

There is even exist ssr.optimizeDeps. I guess you could configure ssr specific behavior.

[eugensunic]

This solve my problem with prop-types using SSR

File not found

[KirillSolovyev]

This solve my problem with prop-types using SSR

@eugensunic

New link - https://vike.dev/broken-npm-package#workaround