Uncaught (in promise) SyntaxError: import not found: default

[chaule97]

Hi, I had read your note.

I have a problem when I used both @googlemaps/markerclusterer and nuxt 3, and I don't know where the error comes from.

When I write import { MarkerClusterer } from "@googlemaps/markerclusterer"; then browser show error:

Uncaught (in promise) SyntaxError: import not found: default [index.esm.js:2:7]

the bug in the line of code: import equal from '/_nuxt/node_modules/fast-deep-equal/index.js?v=fafab82c';

Thanks for reading.

[adrienlefebvre92]

I have the same issue.

[RonHolt]

Same issue here as well. Also with Nuxt 3.

Full error here:
Uncaught SyntaxError: The requested module '/_nuxt/node_modules/fast-deep-equal/index.js?v=86369042' does not provide an export named 'default' (at index.esm.js?v=86369042:1:8)

[websitevirtuoso]

any changes? who can fix it? I have this issue in vue 3
error

Uncaught SyntaxError: The requested module '/node_modules/fast-deep-equal/index.js?v=6ee95043' does not provide an export named 'default' (at index.esm.js?v=6ee95043:1:8)

[websitevirtuoso]

Any updates?

[websitevirtuoso]

How can i help to somebody fix this?

[mohdashraf010897]

@websitevirtuoso @chaule97 Here's a fix for you guys

In your nuxt.config.ts file

export default defineNuxtConfig({
	// ...other config keys
	vite: {
		optimizeDeps: {
			include: [				
				'fast-deep-equal',
			],
		},
	}
});

The issue is because the dependency fast-deep-equal is not supporting esm build and is currently exporting a cjs version. Check here - epoberezkin/fast-deep-equal#105.

Vite being an esm only tool requires extra config to process cjs packages.

[websitevirtuoso]

We know how to fix it. but them problem that this is patch. It should be applied in the lib. We just need to wait while fast-dee-equal lib will have ESM version

[smohadjer]

This problem also happens if one is importing MarkerClusterer in vanilla js and without using Nuxt. For example I'm trying to import it in my script using a relative path to my node_modules folder like this:

import { MarkerClusterer } from "../node_modules/@googlemaps/markerclusterer/dist/index.esm.js";

And I get this error in browser console:

Uncaught TypeError: Failed to resolve module specifier "fast-deep-equal". Relative references must start with either "/", "./", or "../".

It's annoying and wasted couple of hours of my time!