Tanimodori
commented
1 year ago 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:
```js
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:
```js
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(/* */)
bnabet
Nefcanto
ashutosh887
patak-dev
jbsouvestre
stephdotnet
mtgeddes
joaovieirabr
crummy
joespeargresham
Takouaghouaiel
I even didnt' use popper ! please any help ?
igomonteiro
jmelendez-cbs
tjosgood
paulczy
w-ap-admin
rene-stesl
nzhiti
kk3june
maradude
salvini29
mbiggs-gresham
Tim-W-James
constantin-melniciuc
moribvndvs
hasan-mehboob
Janpot
ahoopes16
Methuselah96
ShahmirzeMIT
Madebyspeedster
Ronnin1994
javaspeak
nafissalabdi
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:
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
git clone https://github.com/Nefcanto/MuiPopperBugcd MuiPopperBugnpm installnpm run devSystem Info
Used Package Manager
npm
Logs
No response
Validations