Popper.js:11 Uncaught TypeError: styled_default is not a function at Popper.js:11:20

[Nefcanto]

Describe the bug

I have updated some of my dependencies.

I expect to see the address of my code in the error call stack.

All I see is this:

Popper.js:11 Uncaught TypeError: styled_default is not a function
    at Popper.js:11:20
(anonymous) @ Popper.js:11

I have also reported it to the MUI Team

I have also seen that it's been asked here.

My problem is that the error does not give us more information. Is it a Vite bug? Is it a bug related to esbuild? Is it a bug of MUI? I literally do not know.

Reproduction

https://github.com/Nefcanto/MuiPopperBug

Steps to reproduce

1. git clone https://github.com/Nefcanto/MuiPopperBug
2. cd MuiPopperBug
3. npm install
4. npm run dev
5. Browse and see the error

System Info

System:
    OS: Linux 5.19 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
    Memory: 9.10 GB / 15.52 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 18.15.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.1 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-react: ^3.1.0 => 3.1.0 
    vite: ^4.1.4 => 4.1.4

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.

[Tanimodori]

A fresh clone of this reproduction do reproduce this error, but if I remove the node_modules sometimes the problem will be fixed.

I see that the cause of this issue and #8308 is missing module initialization.

I replace src/main.jsx with the following content

import { Popper } from "@mui/material";

console.log(Popper);

The Proper here is mui-material/src/Popper/Popper.tsx

// ...
import { styled, Theme, useThemeProps } from '../styles';
// ...
const PopperRoot = styled(PopperUnstyled, {
  name: 'MuiPopper',
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root,
})({});
// ...

Full transformed code by vite:

import {
  PopperUnstyled_default,
  init_PopperUnstyled
} from "/node_modules/.vite/deps/chunk-73GXGH6W.js?v=b24550c9";
import {
  styled_default,
  useThemeProps
} from "/node_modules/.vite/deps/chunk-QGFUN55Y.js?v=b24550c9";
import {
  init_esm as init_esm2,
  useThemeWithoutDefault_default
} from "/node_modules/.vite/deps/chunk-M6YZV643.js?v=b24550c9";
import {
  _objectWithoutPropertiesLoose,
  init_objectWithoutPropertiesLoose
} from "/node_modules/.vite/deps/chunk-KBFHYFJ6.js?v=b24550c9";
import {
  HTMLElementType,
  init_esm,
  refType_default
} from "/node_modules/.vite/deps/chunk-KQS6UZBQ.js?v=b24550c9";
import {
  require_prop_types
} from "/node_modules/.vite/deps/chunk-EOOR7TYC.js?v=b24550c9";
import {
  require_jsx_runtime
} from "/node_modules/.vite/deps/chunk-TNQUW4IY.js?v=b24550c9";
import {
  _extends,
  init_extends
} from "/node_modules/.vite/deps/chunk-6K2CSZVE.js?v=b24550c9";
import {
  require_react
} from "/node_modules/.vite/deps/chunk-JFTBQ7A7.js?v=b24550c9";
import {
  __toESM
} from "/node_modules/.vite/deps/chunk-AC2VUBZ6.js?v=b24550c9";

// node_modules/@mui/material/Popper/Popper.js
init_extends();
init_objectWithoutPropertiesLoose();
init_PopperUnstyled();
init_esm2();
init_esm();
var import_prop_types = __toESM(require_prop_types());
var React = __toESM(require_react());
var import_jsx_runtime = __toESM(require_jsx_runtime());
var _excluded = ["components", "componentsProps", "slots", "slotProps"];
var PopperRoot = styled_default(PopperUnstyled_default, {
  name: "MuiPopper",
  slot: "Root",
  overridesResolver: (props, styles) => styles.root
})({});
var Popper = React.forwardRef(function Popper2(inProps, ref) {
  var _slots$root;
  const theme = useThemeWithoutDefault_default();
  const props = useThemeProps({
    props: inProps,
    name: "MuiPopper"
  });
  const {
    components,
    componentsProps,
    slots,
    slotProps
  } = props, other = _objectWithoutPropertiesLoose(props, _excluded);
  const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
  return (0, import_jsx_runtime.jsx)(PopperRoot, _extends({
    direction: theme == null ? void 0 : theme.direction,
    slots: {
      root: RootComponent
    },
    slotProps: slotProps != null ? slotProps : componentsProps
  }, other, {
    ref
  }));
});
true ? Popper.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // |     To update them edit TypeScript types and run "yarn proptypes"  |
  // ----------------------------------------------------------------------
  /**
   * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
   * or a function that returns either.
   * It's used to set the position of the popper.
   * The return value will passed as the reference object of the Popper instance.
   */
  anchorEl: import_prop_types.default.oneOfType([HTMLElementType, import_prop_types.default.object, import_prop_types.default.func]),
  /**
   * Popper render function or node.
   */
  children: import_prop_types.default.oneOfType([import_prop_types.default.node, import_prop_types.default.func]),
  /**
   * @ignore
   */
  component: import_prop_types.default.elementType,
  /**
   * The components used for each slot inside the Popper.
   * Either a string to use a HTML element or a component.
   * @default {}
   */
  components: import_prop_types.default.shape({
    Root: import_prop_types.default.elementType
  }),
  /**
   * The props used for each slot inside the Popper.
   * @default {}
   */
  componentsProps: import_prop_types.default.shape({
    root: import_prop_types.default.oneOfType([import_prop_types.default.func, import_prop_types.default.object])
  }),
  /**
   * An HTML element or function that returns one.
   * The `container` will have the portal children appended to it.
   *
   * By default, it uses the body of the top-level document object,
   * so it's simply `document.body` most of the time.
   */
  container: import_prop_types.default.oneOfType([HTMLElementType, import_prop_types.default.func]),
  /**
   * The `children` will be under the DOM hierarchy of the parent component.
   * @default false
   */
  disablePortal: import_prop_types.default.bool,
  /**
   * Always keep the children in the DOM.
   * This prop can be useful in SEO situation or
   * when you want to maximize the responsiveness of the Popper.
   * @default false
   */
  keepMounted: import_prop_types.default.bool,
  /**
   * Popper.js is based on a "plugin-like" architecture,
   * most of its features are fully encapsulated "modifiers".
   *
   * A modifier is a function that is called each time Popper.js needs to
   * compute the position of the popper.
   * For this reason, modifiers should be very performant to avoid bottlenecks.
   * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
   */
  modifiers: import_prop_types.default.arrayOf(import_prop_types.default.shape({
    data: import_prop_types.default.object,
    effect: import_prop_types.default.func,
    enabled: import_prop_types.default.bool,
    fn: import_prop_types.default.func,
    name: import_prop_types.default.any,
    options: import_prop_types.default.object,
    phase: import_prop_types.default.oneOf(["afterMain", "afterRead", "afterWrite", "beforeMain", "beforeRead", "beforeWrite", "main", "read", "write"]),
    requires: import_prop_types.default.arrayOf(import_prop_types.default.string),
    requiresIfExists: import_prop_types.default.arrayOf(import_prop_types.default.string)
  })),
  /**
   * If `true`, the component is shown.
   */
  open: import_prop_types.default.bool.isRequired,
  /**
   * @ignore
   */
  ownerState: import_prop_types.default.any,
  /**
   * Popper placement.
   * @default 'bottom'
   */
  placement: import_prop_types.default.oneOf(["auto-end", "auto-start", "auto", "bottom-end", "bottom-start", "bottom", "left-end", "left-start", "left", "right-end", "right-start", "right", "top-end", "top-start", "top"]),
  /**
   * Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
   * @default {}
   */
  popperOptions: import_prop_types.default.shape({
    modifiers: import_prop_types.default.array,
    onFirstUpdate: import_prop_types.default.func,
    placement: import_prop_types.default.oneOf(["auto-end", "auto-start", "auto", "bottom-end", "bottom-start", "bottom", "left-end", "left-start", "left", "right-end", "right-start", "right", "top-end", "top-start", "top"]),
    strategy: import_prop_types.default.oneOf(["absolute", "fixed"])
  }),
  /**
   * A ref that points to the used popper instance.
   */
  popperRef: refType_default,
  /**
   * The props used for each slot inside the Popper.
   * @default {}
   */
  slotProps: import_prop_types.default.shape({
    root: import_prop_types.default.oneOfType([import_prop_types.default.func, import_prop_types.default.object])
  }),
  /**
   * The components used for each slot inside the Popper.
   * Either a string to use a HTML element or a component.
   * @default {}
   */
  slots: import_prop_types.default.shape({
    root: import_prop_types.default.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: import_prop_types.default.oneOfType([import_prop_types.default.arrayOf(import_prop_types.default.oneOfType([import_prop_types.default.func, import_prop_types.default.object, import_prop_types.default.bool])), import_prop_types.default.func, import_prop_types.default.object]),
  /**
   * Help supporting a react-transition-group/Transition component.
   * @default false
   */
  transition: import_prop_types.default.bool
} : void 0;
var Popper_default = Popper;

export {
  Popper_default
};
//# sourceMappingURL=chunk-A7HT3P54.js.map

The styled here is mui-material/src/styles/styled.js

import { createStyled, shouldForwardProp } from '@mui/system';
import defaultTheme from './defaultTheme';

export const rootShouldForwardProp = (prop) => shouldForwardProp(prop) && prop !== 'classes';

export const slotShouldForwardProp = shouldForwardProp;

const styled = createStyled({
  defaultTheme,
  rootShouldForwardProp,
});

export default styled;

Full transformed code by vite:

import {
  createStyled,
  defaultTheme_default,
  init_defaultTheme,
  init_esm,
  shouldForwardProp,
  useThemeProps
} from "/node_modules/.vite/deps/chunk-M6YZV643.js?v=b24550c9";
import {
  __esm
} from "/node_modules/.vite/deps/chunk-AC2VUBZ6.js?v=b24550c9";

// node_modules/@mui/material/styles/useThemeProps.js
function useThemeProps2({
  props,
  name
}) {
  return useThemeProps({
    props,
    name,
    defaultTheme: defaultTheme_default
  });
}
var init_useThemeProps = __esm({
  "node_modules/@mui/material/styles/useThemeProps.js"() {
    init_esm();
    init_defaultTheme();
  }
});

// node_modules/@mui/material/styles/styled.js
var rootShouldForwardProp, slotShouldForwardProp, styled, styled_default;
var init_styled = __esm({
  "node_modules/@mui/material/styles/styled.js"() {
    init_esm();
    init_defaultTheme();
    rootShouldForwardProp = (prop) => shouldForwardProp(prop) && prop !== "classes";
    slotShouldForwardProp = shouldForwardProp;
    styled = createStyled({
      defaultTheme: defaultTheme_default,
      rootShouldForwardProp
    });
    styled_default = styled;
  }
});

export {
  useThemeProps2 as useThemeProps,
  init_useThemeProps,
  rootShouldForwardProp,
  slotShouldForwardProp,
  styled_default,
  init_styled
};
//# sourceMappingURL=chunk-QGFUN55Y.js.map

Note that in the styled module, styled need to be initialized by createStyled:

// node_modules/@mui/material/styles/styled.js
var rootShouldForwardProp, slotShouldForwardProp, styled, styled_default;
var init_styled = __esm({
  "node_modules/@mui/material/styles/styled.js"() {
    init_esm();
    init_defaultTheme();
    rootShouldForwardProp = (prop) => shouldForwardProp(prop) && prop !== "classes";
    slotShouldForwardProp = shouldForwardProp;
    styled = createStyled({
      defaultTheme: defaultTheme_default,
      rootShouldForwardProp
    });
    styled_default = styled;
  }
});

export {
  useThemeProps2 as useThemeProps,
  init_useThemeProps,
  rootShouldForwardProp,
  slotShouldForwardProp,
  styled_default,
  init_styled
};

This suggest we should call init_styled prior to access styled_default. But such an assertion is failing in Popper:

import {
  PopperUnstyled_default,
  init_PopperUnstyled
} from "/node_modules/.vite/deps/chunk-73GXGH6W.js?v=b24550c9";
import {
  styled_default,
  useThemeProps
} from "/node_modules/.vite/deps/chunk-QGFUN55Y.js?v=b24550c9";
import {
  init_esm as init_esm2,
  useThemeWithoutDefault_default
} from "/node_modules/.vite/deps/chunk-M6YZV643.js?v=b24550c9";
import {
  _objectWithoutPropertiesLoose,
  init_objectWithoutPropertiesLoose
} from "/node_modules/.vite/deps/chunk-KBFHYFJ6.js?v=b24550c9";
import {
  HTMLElementType,
  init_esm,
  refType_default
} from "/node_modules/.vite/deps/chunk-KQS6UZBQ.js?v=b24550c9";
import {
  require_prop_types
} from "/node_modules/.vite/deps/chunk-EOOR7TYC.js?v=b24550c9";
import {
  require_jsx_runtime
} from "/node_modules/.vite/deps/chunk-TNQUW4IY.js?v=b24550c9";
import {
  _extends,
  init_extends
} from "/node_modules/.vite/deps/chunk-6K2CSZVE.js?v=b24550c9";
import {
  require_react
} from "/node_modules/.vite/deps/chunk-JFTBQ7A7.js?v=b24550c9";
import {
  __toESM
} from "/node_modules/.vite/deps/chunk-AC2VUBZ6.js?v=b24550c9";

// node_modules/@mui/material/Popper/Popper.js
init_extends();
init_objectWithoutPropertiesLoose();
init_PopperUnstyled();
init_esm2();
init_esm();
var import_prop_types = __toESM(require_prop_types());
var React = __toESM(require_react());
var import_jsx_runtime = __toESM(require_jsx_runtime());
var _excluded = ["components", "componentsProps", "slots", "slotProps"];
var PopperRoot = styled_default(PopperUnstyled_default, {
  name: "MuiPopper",
  slot: "Root",
  overridesResolver: (props, styles) => styles.root
})({});

Missing calling of init_styled from chunk-QGFUN55Y.js (the chunk of styled)

import {
  styled_default,
  useThemeProps
  // init_styled missing
} from "/node_modules/.vite/deps/chunk-QGFUN55Y.js?v=b24550c9";

// missing calling of init_styled();

// styled_default is undefined.
var PopperRoot = styled_default(/*  */)

[Tanimodori]

This can be verified using

import("http://localhost:5173/node_modules/.vite/deps/chunk-QGFUN55Y.js?v=b24550c9").then(module =>{
  console.log(module.styled_default)
  module.init_styled();
  console.log(module.styled_default)
})

[Tanimodori]

I think this bug may related to chunk seperation. When such a small chunk of styled is generated, this bug will occur. When a big chunk like the whole @mui/material, the initialization will be correct because they have been merged:

node_modules/.vite/deps/@mui_material.js (Whole big dep chunk of @mui/material)

// at line number 33000-ish

// node_modules/@mui/material/styles/styled.js
var rootShouldForwardProp = (prop) => shouldForwardProp(prop) && prop !== "classes";
var slotShouldForwardProp = shouldForwardProp;
var styled3 = createStyled3({
  defaultTheme: defaultTheme_default,
  rootShouldForwardProp
});
var styled_default2 = styled3;

[Tanimodori]

So this comment is true on the aspects of this issue

It seems to be:

1. Related to using Vite.
2. Intermittent, the problem comes and goes.
3. Resolved (sometimes) by pnpm prune or removing node_modules folders

1. It is related to vite dep pre-bundle. It is a vite-only bug.
2. It is related how vite generate deps, big dep chunks are fine but small ones are problematic. Fresh cloned repo seems to be efficient trigger vite small deps generation.
3. It touches node_modules and triggers vite to re-generate deps. Vite seems to be more likely to generate big dep chunks after the first generation. So when people installing/uninstalling deps, this issue tends to be "fixed".

[bnabet]

Hello, for information, I am facing the same problem when using the Card component.

[Nefcanto]

@Tanimodori thank you for spending time on this. So it's a Vite bug. I'm glad that you could find the bug. It was such a complicated situation.

[Tanimodori]

Maybe related: #5142

[ashutosh887]

I would like to work on this @Tanimodori @Nefcanto

[patak-dev]

@ashutosh887 please stop sending these messages to each issue or we will need to ban you from the org

[ashutosh887]

I'm sorry @patak-dev Won't repeat it I'm just willing to contribute

[patak-dev]

That's great! You are welcome to help. But please avoid generating notifications to all the folks involved in the issues and maintainers. You can read our Contributing guide and pick any open issue. Thanks!

[jbsouvestre]

Hey all, I've been trying to fix what I believe is a very similar issue, except for me it affects the @mui/x-date-pickers.

I'm having the error Uncaught TypeError: useEnhancedEffect_default is not a function only when building the app What leads me to believe the issue is related is because of this issue in the mui repo: https://github.com/mui/material-ui/issues/31835 which seems similar to what is described here

While working on a minimal reproduction, it seems like the bug exists in version 4.0.0 of vite, but is resolved in 4.2.0

Please find an attached repository example: https://github.com/jbsouvestre/vite-esbuild-bug-repro There's 2 branches, master is on [email protected], the production build doesn't have the error

The vite-4.0.0 branch has the bug

If the issue is not related, please disregard this comment

[Tanimodori]

@jbsouvestre The vite version I used for my analysis is 4.2.0 fyi.

[stephdotnet]

I'm also having this issue (on Box.js with the following error : Uncaught TypeError: createTheme_default is not a function) I suspect an issue with small chunks since no problem with building the app, and what solved it for me was to change the import of my MUi components as indicated in the comment https://github.com/mui/material-ui/issues/31835#issuecomment-1496428363

[mtgeddes]

I'm having the same issue but with Grid2

Uncaught TypeError: styled_default is not a function
    at Grid2.js:5:26
(anonymous) @ Grid2.js:5

Update: I managed to have the error moved onto Box.js as mentioned in the comment above when I rearranged import order.

I was finally successful in removing the error altogether after further import order rearrangements. I essentially started at my top-level app file and moved a few (not all) material component imports to the top. It seemed to like it when custom components that also use MUI components were imported after MUI components used in the immediate file.

Luckily, I didn't have to continue that process into other files as my fix was in a top level file.

[joaovieirabr]

Same Issue with Grid2

But caused by upgrading "@mui/x-data-grid" to 6.1.0. The bug doesn't happen on 5.x versions; id2.js:5 Uncaught TypeError: styled_default is not a function at Grid2.js:5:26 (

Update: I removed @mui/x-data-grid, and the app run; When I put it back, without any reference - only in package.json/yarn.lock, the bug came back. So, isn't seems to be the order of imports.

[crummy]

I had the popper.js error but it has disappeared after upgrading Vite from 4.1.1 to 4.3.1.

edit: it's back. This issue is popping up daily for at least someone on my team.

edit again: I got rid of <Popper> in our codebase and replaced it with <Modal>.

[joespeargresham]

We're also experiencing this issue. Upgrading Vite hasn't worked. It mostly seems to effect us when using icons from the @mui/icons-material package, but haven't figured out a pattern yet as we use icons all over the place and some seem to work and some don't.

[Takouaghouaiel]

hello i have the same problem here : I even didnt' use popper ! please any help ?

[igomonteiro]

Same problem here, I cant use popper, getting the error:

caught TypeError: styled_default is not a function
   at Popper.js:11:20

I'm using vite, npm and styled-components.

[jmelendez-cbs]

Has anyone had any success with a temporary work around? Im using NX and [email protected] and this has been a blocker for the past 4 days.

[tjosgood]

Using Vite v4.3.3 MUI v5.12 @mui/x-data-grid-pro v6

Also having same issue in Grid2.js

Uncaught TypeError: styled_default is not a function
    at Grid2.js:5:26
(anonymous) @ Grid2.js:5

Seems to happen after a few restart cycles, usually clearing node_modules and npm install makes it go away for a while but not a great solution.

Was there some logic to the re-ordering of imports that seems to work? Moving Mui imports higher doesnt seem to have any effect for me

[paulczy]

I upgraded to notistack v3.x I started to get the same error:

Uncaught TypeError: styled_default is not a function
    at Grid2.js:5:26

When fall back to notistack 2.0.8 it goes away.

vite 4.3.3 vitejs/plugin-react-swc 3.3.0 mui 5.12.1 mui/x-data-grid-premium 6.2.1

[w-ap-admin]

We encounter the same problem on our project. And we are not able to reproduce systematically the error. We already try to upgrade or downgrade MUI, we check every import. Everything seems right, but sometimes, the appears, sometimes it works perfectly.

[rene-stesl]

I have the same Issue after updating only vite-plugin-checker from 0.5.6 to 0.6.0 Same happens if I only update @vitejs/plugin-react from 3.1.0 to 4.0.0

Uncaught TypeError: styled_default is not a function
    at Popper.js:11:20

[nzhiti]

It doesn't seem related to vitejs version since we have same issue with vite 3.1.0 However, I've the feeling that I might bundling two versions of emotion/styled since @mui has a peer depency on emotion/styled 11.3.0 and x-date-pickers has a peer dependency on emotion/styled 11.8.1

Could it be the issue ?

[rene-stesl]

@nzhiti we don't use x-date-pickers. But I guess every MUI component has a peer dependency to "@emotion/styled": ^11.3.0. We fixed the Version of @emotion/styled to 11.10.6 and still have this issue.

When this error happens, I can observe in the dev tools that many ts(x) files are fetched at once, quite a bunch more than normal.

[igomonteiro]

Same problem here, I cant use popper, getting the error:

caught TypeError: styled_default is not a function

   at Popper.js:11:20

I'm using vite, npm and styled-components.

Note: I got this error when I tried to use the Popper component from mui that uses Popper js, I didnt had problems when using another components from MUI.

[kk3june]

@mtgeddes

how did you rearrangement the import order? I also same issue with Grid2 but I cannot find the correct import order.

[maradude]

how did you rearrangement the import order? I also same issue with Grid2 but I cannot find the correct import order.

Not @mtgeddes but my 2 cents

I tried a lot of things such as updating most of my dependencies, changing all MUI imports to be from only @mui/material e.g. changing imports from @mui/system, and adding a alias resolution from @material-ui/icons to @material-ui/icons/esm.

At the end I added an eslint plugin to sort my imports based on it's own logic and this fixed my issues. I never investigated why, but maybe it had to do with local project modules being imported before MUI in some key files.