vite
vite copied to clipboard
vitejs
Vite errors on import of @googlemaps/js-api-loader
Describe the bug
I'm trying to use the Google Maps api-loader library to inject the Google Maps api script into my sveltekit webapp. The library was installed in my project with "npm i @googlemaps/js-api-loader" and is invoked in my webapp code with "import { Loader } from '@googlemaps/js-api-loader';".
When I run "npm run dev", the procedure fails with the following error :
22:04:04 [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "@googlemaps/js-api-loader" |- SyntaxError: [vite] 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.
The message goes on to explain how I might try using a default export :
_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;_
But when I try this, the webapp itself fails telling me that the api-loader package doesn't provide a default export:
app.js:16 SyntaxError: The requested module '/node_modules/.vite/deps/@googlemaps_js-api-loader.js?v=5fcf71f8' does not provide an export named 'default'
Others have reported similar issues with 'npm run build' but as far as I can see I'm the only one with an 'npm run dev' problem
Reproduction
https://github.com/apparchsysad/test
Steps to reproduce
The test repository at https://github.com/apparchsysad/test was created as a skeleton webapp with the following npm commands:
npm create svelte@latest . npm install npm i @googlemaps/js-api-loader
The skeleton +page.svelte file was then modified to import the loader and display a Google map
System Info
System is a terminal session in VSCode on a Windows 11 PC
Used Package Manager
npm
Logs
No response
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- [X] The provided reproduction is a minimal reproducible example of the bug.
The error happens with named imports because in SSR, the package is externalized and Node uses the main field that is a UMD file. Only default import can be used for UMD files.
The error happens with default imports because in non-SSR, the package is not externalized and module field is used and that is a ESM file. Default import doesn't exist in that ESM file.
There's three ways I can think of to use this dependency:
- Set
ssr.noExternal: ['@googlemaps/js-api-loader']invite.config.ts - Write a separate file for server and client
- Patch
@googlemaps/js-api-loader
vite-plugin-cjs-interop might work as well.
I am facing similar issue.
Setting ssr.noExternal then produces error:
error:
name: ReferenceError
message: module is not defined
stack:
"""
ReferenceError: module is not defined
at eval (/Users/gajus/Developer/contra/gaia/node_modules/.pnpm/[email protected]/node_modules/relay-runtime/index.js:12:1)
at instantiateModule (file:///Users/gajus/Developer/contra/gaia/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BzxBS-ea.js:54170:15)
"""
ok so
Set ssr.noExternal: ['@googlemaps/js-api-loader'] in vite.config.ts
worked for me after I remembered to revert my import back to import { Loader } from '@googlemaps/js-api-loader';
I'm disappointed that Vite has never assigned anybody to this, but it was never a big issue for me as I was just noodling around with Svete at the time.
For what they're worth, here are the notes I made about the issue.
"Inserting a Google map was tricky. Repo at https://github.com/t108368527/Svelte_Map showed how a script in app.html could inject the Google map api into the browser so that Svelte code can access it. But this exposes the key. Google at https://developers.google.com/maps/documentation/javascript/load-maps-js-api recommend their api loader, but Vite seems to have problems importing this. See https://stackoverflow.com/questions/77704910/load-basic-google-map-with-array-of-coordinates-in-sveltekit for an implementation. In the end used a "shared api" technique at https://gist.github.com/wlkns/64d8ab123d9f2c3d4d8c6df61cb5ea9b to inject the api and its key from a function - seems OK"
I'll mail you my code if you want to follow this up.
Best wishes, MJ
On Sat, 23 Mar 2024 at 00:06, bshesh7 @.***> wrote:
were you able to come up with the solution?
— Reply to this email directly, view it on GitHub https://github.com/vitejs/vite/issues/15620#issuecomment-2016199248, or unsubscribe https://github.com/notifications/unsubscribe-auth/BCA4WYQO6BHWUSBTA37SOWLYZTBPXAVCNFSM6AAAAABB4TMQTSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMJWGE4TSMRUHA . You are receiving this because you authored the thread.Message ID: @.***>
owed how a script in app.html could inject the Google map api into the browser so that Svelte code can
Can you please mail me @ [email protected] please
No prob - attached source for three files from my svelte project. Follow the trail for AppArchMap that starts in the +page.svelte section. I''ve had to combine them into a single text file - Gmail wasn't happy about my attaching .js executables!
Hope they help.
Regards, MJ
On Sat, 23 Mar 2024 at 14:52, bshesh7 @.***> wrote:
owed how a script in app.html could inject the Google map api into the browser so that Svelte code can
Can you please mail me @ @.*** please
— Reply to this email directly, view it on GitHub https://github.com/vitejs/vite/issues/15620#issuecomment-2016515639, or unsubscribe https://github.com/notifications/unsubscribe-auth/BCA4WYTX3AYDAHKVH5GS333YZWJJRAVCNFSM6AAAAABB4TMQTSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMJWGUYTKNRTHE . You are receiving this because you authored the thread.Message ID: @.***>
The fix that worked for me was quite simple. Applies to SvelteKit specifically, but may also apply to Vite users in general:
import * as gmapsLoader from '@googlemaps/js-api-loader';
const { Loader } = gmapsLoader;
This worked for me for both dev and build, SSR, prerendered, whatever.
Interesting side note: for js-api-loader 1.16.6, at least, doing the above results in a slightly different (and by the looks of it, more up-to-date) type for Loader:
import { Loader as OldLoader } from '@googlemaps/js-api-loader';
import * as gmapsLoader from '@googlemaps/js-api-loader';
const { Loader } = gmapsLoader;
(new OldLoader(someParams)).loadCallback(callback); // fine
(new Loader(someParams)).loadCallback(callback); // deprecation warning
The fix that worked for me was quite simple. Applies to SvelteKit specifically, but may also apply to Vite users in general:
import * as gmapsLoader from '@googlemaps/js-api-loader'; const { Loader } = gmapsLoader;This worked for me for both dev and build, SSR, prerendered, whatever.
Are you saying that worked for you without adding ssr.noExternal: ['@googlemaps/js-api-loader']? Personally I get a TypeError: Loader is not a constructor message when using your example (also using SvelteKit). Adding the noExternal to vite.config.ts does the trick, but at that point the import * as gmapsLoader workaround is no longer needed.
If u are using Nuxt or vue3 u can use this
https://stackoverflow.com/questions/72592413/cant-generate-nuxt-website-with-googlemaps-js-api-loader
