Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

minified react error #130 only at build time #94

Open
AidenFaulconer opened this issue Feb 22, 2022 · 0 comments
Open

minified react error #130 only at build time #94

AidenFaulconer opened this issue Feb 22, 2022 · 0 comments

Comments

@AidenFaulconer
Copy link

This error has been plauging me for days and I've hit the end of my wits on it

WebpackError: Minified React error
#130; visit https://reactjs.org/d
ocs/error-decoder.html?invariant=1
30&args[]=object&args[]= for the f
ull message or use the non-minifie
d dev environment for full errors
and additional helpful warnings. (
from plugin: gatsby-plugin-materia
l-ui)

somewhere during build time its giving an empty object instead of a component, I've narrowed down the issue to this file...

`import * as React from 'react';
import {
createMuiTheme, CssBaseline, StylesProvider, MuiThemeProvider,
} from '@material-ui/core';
import {
dt, lt, useStore, LIGHT_THEME, createTheme,
} from '../store/store';

// import { dt, lt, valtioState } from "../store/store-wrapper"
// import { ServerStyleSheets } from "@material-ui/core/styles"
// // ========================================================================== //
// // SSR compatibility
// // ========================================================================== //
// const getInitialProps = async () => {
// const [ssr, setSsr] = React.useState(typeof window == "undefined")
// const sheets = new ServerStyleSheets()
// const originalRenderPage = use.renderPage
// use.renderPage = () => {
// const sheet = sheets.collect(originalRenderPage())
// return sheet.getStyleElement()
// }
// if (ssr) return sheets.collect(children)
// const initialProps = await use.getInitialProps()

// //styles fragment is rendered after the app and page rendering finish
// return {
// ...initialProps,
// styles: [
// ...React.Children.toArray(initialProps.styles),
// sheets.getStyleElement(),
// ],
// }
// }
// //define it statically so it can be used in ssr
// useImperativeHandle(ref, () => ({
// getInitialProps,
// }))

const MaterialUI = ({ children }) => {
const type = useStore((state) => state.appContext.type);
return (
<>
<React.StrictMode>




    <MuiThemeProvider
    // needs to be cloned to work with material-ui
      theme={window === 'undefined' && (type === 'light' && lt || dt) || createMuiTheme()}
      key="ThemeProvider"
    >
      <StylesProvider injectFirst>
        <CssBaseline />
        {children}
      </StylesProvider>
    </MuiThemeProvider>
  </React.StrictMode>
</>

);
};
// }, (pre, post) => pre.type === post.type);

// export default ({ children }) => (
// <>
// {children}
// </>
// );

export default MaterialUI;
`

However what makes no sense, is when I tried to export the component with nothing in it, it still causes the 130 error, however when I comment out the component in the layout, it no longer throws the error, but of course moves to the issue of not accessing theme values. Then when I comment out any offending modules with theming, it compiles.

What the heck is going on here? How and where and why is this plugin returning an empty object???? and why only at build time?? is there a window variable referenced deep in the code??? Even a quick look at the internal working of this plugin doesn't answer this error

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant