hupe1980 / gatsby-plugin-material-ui

Gatsby plugin for Material-UI with built-in server-side rendering support
MIT License
136 stars 25 forks source link

minified react error #130 only at build time #94

Open AidenFaulconer opened 2 years ago

AidenFaulconer commented 2 years ago

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

{children} ); }; // }, (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