I am not currently using any MUI/Joy component that utilizes @popperjs, which is the error producing package. However, Nextjs continues evoking build errors stating that the Mui Joy Autocomplete component is causing errors because its constituting module (popperjs) does not have certain files instantiated.

The error it constantly brings up is:

Module not found: Can't resolve './dom-utils/getCompositeRect.js'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@popperjs/core/lib/index.js
./node_modules/@mui/joy/node_modules/@mui/base/Popper/Popper.js
./node_modules/@mui/joy/node_modules/@mui/base/Popper/index.js
./node_modules/@mui/joy/Autocomplete/Autocomplete.js
./node_modules/@mui/joy/Autocomplete/index.js
./node_modules/@mui/joy/index.js
./components/Navbar.tsx
./components/index.ts
./app/page.tsx

Nextjs build error on ./dom-utils/getCompositeRect.js

The main error message is coming from node_modules/@popperjs/core/lib/createPopper.js

File location of error

There is also no ./modifiers directory like node_modules/@popperjs/core/lib/index.d.ts declares.

export * from "./types";
export * from "./enums";
export * from "./modifiers";
export { popperGenerator, detectOverflow, createPopper as createPopperBase } from "./createPopper";
export { createPopper } from "./popper";
export { createPopper as createPopperLite } from "./popper-lite";

There is also no ./utils directory like node_modules/@popperjs/core/lib/createPopper.d.ts declares.

import type { OptionsGeneric, Modifier, Instance, VirtualElement } from "./types";
import detectOverflow from "./utils/detectOverflow";
declare type PopperGeneratorArgs = {
    defaultModifiers?: Array<Modifier<any, any>>;
    defaultOptions?: Partial<OptionsGeneric<any>>;
};
export declare function popperGenerator(generatorOptions?: PopperGeneratorArgs): <TModifier extends Partial<Modifier<any, any>>>(reference: Element | VirtualElement, popper: HTMLElement, options?: Partial<OptionsGeneric<TModifier>>) => Instance;
export declare const createPopper: <TModifier extends Partial<Modifier<any, any>>>(reference: Element | VirtualElement, popper: HTMLElement, options?: Partial<OptionsGeneric<TModifier>>) => Instance;
export { detectOverflow };

There was no error previously, and this bug has only been spotlighted in the past week. So far, Nextjs has seemed to ignore this issue. I used the Autocomplete component in only one page (“/users/all”). Recently, I replaced this component with another component from another library, making Mui Joy’s Autocomplete component obsolete.

GitHub repo: https://github.com/jesuschrist-immanuel/stack-overflow-clone