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

This has worked for us. mui/material-ui#32727 (comment)

This worked for me as well.

Basically if you have issues with Popper.js

add to vite.config.js

optimizeDeps: {
  include: ['@mui/material/Tooltip'],
};

If it’s not Popper.js find the relevant component and include it as an optimized dep.

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 vite@4.2.0, 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

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.

This has worked for us. mui/material-ui#32727 (comment)

This worked for me as well.

Basically if you have issues with Popper.js

add to vite.config.js

optimizeDeps: {
  include: ['@mui/material/Tooltip'],
};

If it’s not Popper.js find the relevant component and include it as an optimized dep.

oh, this is saved my day!

@Tanimodori Thanks for the excellent investigation work.

I’ve narrowed down the issue a bit more and created an esbuild issue: https://github.com/evanw/esbuild/issues/3357.

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.

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”.

I’ve tried all of the recipes without any success. And I think I’ve found a stable workaround. Just add

import '@mui/material/styles/styled';

as a first statement in your index.tsx file (or other file). It should be the first import.

It propely initalizes styled function, so it can be used later.

Remove cache folder node_modules/.vite and restart your application.

If you have a complicated multi-module application and it’s unclear to wich module you should add this import, then you can try the following algorithm:

1. For instance you get error “Uncaught TypeError: styled_default is not a function at chunk-54HMABV7.js?v=1f2b2aed:99:18”
2. Open Network tab in Chrome DevTools and filter requests by chunk-54HMABV7.js
3. You will see a GET request of that file
4. In column Initiator you will see a script importing the file. Let it be @mui_material_Tooltip.js?v=9a4fee34
5. Filter network requests again by @mui_material_Tooltip.js
6. Look at Initiator column. Let it be web-application.es.js:50
7. If it’s a script from an extenral library (not your application) then repeat the above steps
8. If it’s your script then at the beginnig of the file add import '@mui/material/styles/styled';

Because the issue is with the cached dependencies built by esbuild, deleting node_modules/.vite instead of all of node_modules may also work, which would make it so that you don’t have to run npm install again.

Thanks. I followed the recommendation above of adding this to vite.config.js

optimizeDeps: { include: [‘@mui/material/Tooltip’], };

and it seems to have done the trick - not sure if this is permanently fixed or just by chance.

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

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.

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.

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(/*  */)

Almost a year and the issue is still there…Can’t work.

@mtgeddes

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

So my process was far from ideal but I just started at my root file and began rearranging imports … i.e. take whatever is a top and move down a level, save, see if anything changed. I knew this didn’t account for cached builds or any potential needs to reinstall node_modules but I just wanted to see if I could get any other errors that might help outline the problem.

I was lucky that it didn’t take long to solve my issue. I didn’t dig further but as mentioned what I noticed is that it seemed to like when I imported pure mui components before other custom built components that also used pure mui components.

Some of the other temporary solutions above also seem like good solutions to try.

I can reproduce the issue at 100%, in my case (in my project, not sure its the case for all i’m gonna try with a codepen)

import { alpha, createTheme, darken, ThemeProvider as MUIThemeProvider, useTheme as useMUITheme, } from "@mui/material/styles";

instead of

import { alpha, createTheme, darken, ThemeProvider as MUIThemeProvider, useTheme as useMUITheme, } from "@mui/material";

When bug occurs I’m fixing the import, removing node_modules folder and npm install again and then bug disapears.

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.

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

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>.

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