HTMLDivElement is not defined

[FrancisBaah]

import { APILoader } from '@googlemaps/extended-component-library/react';

The code works fine on localhost, but give "HTMLDivElement is not defined" error on deploy.

[wangela]

If you would like to upvote the priority of this issue, please comment below or react on the original post above with 👍 so we can see what is popular when we triage.

@FrancisBaah Thank you for opening this issue. 🙏
Please check out these other resources that might help you get to a resolution in the meantime:

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[leafsy]

@FrancisBaah Could you provide more info/steps on how you are deploying the app, e.g. are you using one of the approaches described here? This will help us reproduce the issue. Thanks!

[codeclown]

Error occurs in Next.js (Pages router) during server-side rendering:

 ⨯ ReferenceError: HTMLDivElement is not defined
    at file:///.../node_modules/@googlemaps/extended-component-library/lib/overlay_layout/overlay_layout.js:182:31
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:336:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:429:15) {
  page: '/'
}

When importing any React-component, e.g.:

import { PlacePicker } from "@googlemaps/extended-component-library/react";

Originates from overlay_layout.js:182:

180: __decorate([
181:     query('.main-container'),
182:     __metadata("design:type", HTMLDivElement)
183: ], OverlayLayout.prototype, "mainContainer", void 0);

Other similar lib/<component>/<component>.js files are probably susceptible to this too.

[ImperadorSid]

I'm having the same problem using Next.js

[leafsy]

Hi @codeclown @ImperadorSid, unfortunately Web Components in general don't work well with server-side rendering, though there're workarounds in the case of Next.js. Could you check if the dynamic loading technique used in this sample project helps? See docs for more info. Another option you may explore is @lit-labs/nextjs, but note that Lit SSR is under active development and has some limitations.

[jt6677]

You need to do this

const DynamicCollegeFinderPage = dynamic( () => import('@/components/custom/map/CollegeFinderPage ').then((mod) => mod.CollegeFinderPage), { ssr: false, loading: () => <p>Loading...</p>, } )

[morgler]

Dynamic loading doesn't seem to fully resolve the issue, because the error mentions overlay_layout.js, which isn't (or can't?) directly imported.

[HMubaireek]

Dynamic loading solves the issue for me in NextJs. A snippet:

'use client';
import React from 'react';
import dynamic from 'next/dynamic';
///.......
export const BaseMap = ({
  defaultValues,
  actions,
  mapOrigin,
  permits,
  children,
}: React.PropsWithChildren<Props>) => {
  const PlacePicker = dynamic(
    () =>
      import('@googlemaps/extended-component-library/react').then(
        (mod) => mod.PlacePicker,
      ),
    { ssr: false },
  );
  
///.......
};