Skip to content

[Bug] Build failure when importing useInsertionEffect in React <18 despite fallback to useLayoutEffect #957

@devarshiqm

Description

@devarshiqm

Description

When attempting to use useInsertionEffect with a fallback to useLayoutEffect for backward compatibility with React 16/17, the application fails at build time in environments where useInsertionEffect is not exported (React <18).

Expected behavior:
The fallback (useInsertionEffect ?? useLayoutEffect) should allow the code to run safely across React versions.

Actual behavior:
The application fails during module resolution with an error similar to:

Attempted import error: 'useInsertionEffect' is not exported from 'react'

This happens even though a runtime fallback is provided.

Steps to Reproduce

Use a project configured with React 16 or React 17.
Add the following code:

import { useInsertionEffect, useLayoutEffect } from 'react';

const useBeforeEffect = useInsertionEffect ?? useLayoutEffect;

Build or start the application.
Observe that the build fails with a missing export error.

Environment

  • Library version: v1.8.1
  • Google maps version: v1.8.1
  • Browser and Version: (any, not relevant — failure occurs at build time)
  • OS: Mac OS

Logs

This issue arises due to static analysis of ES module imports, where named imports must exist at build time. A safer pattern that works across versions is:

import * as React from 'react';

const useBeforeEffect =
  React.useInsertionEffect ?? React.useLayoutEffect;

This avoids build-time failures by deferring resolution to runtime.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions