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

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>

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 2
Comments: 24 (4 by maintainers)

Most upvoted comments

@Codermar try this:

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

const { Loader } = Gmaps

+12

userquin on Jul 11, 2022

This solve my problem with prop-types using SSR

dezkareid on Feb 21, 2023

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",
    ],
}),

jpgnz on Jun 24, 2023

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 …?

alexpopovme on Jul 25, 2022

This solve my problem with prop-types using SSR

@eugensunic

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

KirillSolovyev on Mar 6, 2024

@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 vite@3.x which does not support it yet. 🙃

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

winexy on Jun 29, 2023

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.

Albert-Valdes on Aug 19, 2022

@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)

Codermar on Jul 11, 2022

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

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

userquin on Jul 11, 2022