Appears to be calling componentDidMount() during render

[preactjs]

Appears to be calling componentDidMount() during render

[developit]

Are you able to trace the calls? This repo is the entire source for the string renderer and doesn't contain the text componentDidMount - I can't imagine how it would be getting called. Perhaps you're seeing this issue? preactjs/preact#524

[lostpebble]

This is the trace I'm getting:

ReferenceError: window is not defined
at Modal.componentDidMount (D:/Dev/_Projects/Vibescout/vibescout-web-v3/src/client/react/uiComponents/modal/Modal.js:26:5)
at Modal.target.(anonymous function) (D:\\Dev\\_Projects\\Vibescout\\vibescout-web-v3\\node_modules\\mobx-react\\index.js:259:13)
at flushMounts (D:\\Dev\\_Projects\\Vibescout\\vibescout-web-v3\\node_modules\\preact\\src\\vdom\\diff.js:22:23)
at renderComponent (D:\\Dev\\_Projects\\Vibescout\\vibescout-web-v3\\node_modules\\preact\\src\\vdom\\component.js:186:4)
at Modal.forceUpdate (D:\\Dev\\_Projects\\Vibescout\\vibescout-web-v3\\node_modules\\preact\\src\\component.js:80:7)
Reaction.onInvalidate (D:\\Dev\\_Projects\\Vibescout\\vibescout-web-v3\\node_modules\\mobx-react\\index.js:352:81)
at Reaction.runReaction (D:\\Dev\\_Projects\\Vibescout\\vibescout-web-v3\\node_modules\\mobx\\lib\\mobx.js:1281:22)
at runReactionsHelper (D:\\Dev\\_Projects\\Vibescout\\vibescout-web-v3\\node_modules\\mobx\\lib\\mobx.js:1397:35)
at reactionScheduler (D:\\Dev\\_Projects\\Vibescout\\vibescout-web-v3\\node_modules\\mobx\\lib\\mobx.js:1379:47)
at runReactions (D:\\Dev\\_Projects\\Vibescout\\vibescout-web-v3\\node_modules\\mobx\\lib\\mobx.js:1383:5)
at endBatch (D:\\Dev\\_Projects\\Vibescout\\vibescout-web-v3\\node_modules\\mobx\\lib\\mobx.js:1174:9)
at endAction (D:\\Dev\\_Projects\\Vibescout\\vibescout-web-v3\\node_modules\\mobx\\lib\\mobx.js:689:5)
at executeAction (D:\\Dev\\_Projects\\Vibescout\\vibescout-web-v3\\node_modules\\mobx\\lib\\mobx.js:656:9)
at UIStore.res (D:\\Dev\\_Projects\\Vibescout\\vibescout-web-v3\\node_modules\\mobx\\lib\\mobx.js:644:16)
at pageErrorCatchRoute (D:/Dev/_Projects/Vibescout/vibescout-web-v3/src/server/router/pageRouter/routes/errorCatchRoute.js:41:32)"}

I'm using MobX for my state before rendering and injecting all my React components with that state using the @inject and @observer decorators. I also seem to be getting another really strange issue where Preact seems to be attaching a new node onto my state object that looks like this (from console.dir):

children:
   [ VNode {
       '0': [Circular],
       nodeName: [Object],
       attributes: [Object],
       children: [Object],
       key: undefined,
       preactCompatUpgraded: true,
       preactCompatNormalized: true,
       length: 1 } ] }

And this is causing a TypeError: Converting circular structure to JSON error when I'm trying to insert that state into my HTML with JSON.stringify.

All quite strange. This is what my React looks like to be rendered to string:

    <Provider {...stores}>
      <MuiThemeProvider muiTheme={muiTheme}>
        <RouterContext {...props} />
      </MuiThemeProvider>
    </Provider>

I'm using a Mobx Provider there, MuiThemeProvider from Material-UI and then the RouterContext from React-Router.

The stores passed into Provider seem to be getting mutated with that extra children node.

[developit]

Ah - it seems like you're using a modal dialog, which is invoking renderSubTreeIntoContainer, which does DOM rendering. That children node is odd, but it doesn't seem like it has anything to do with Preact - it's probably there in React too, but not a circular reference. Worth checking the stringified JSON.

Another thing that seems odd, maybe relates the two: perhaps the failure to serialize (due to the circular reference) is triggering error handling components you're not triggering in React? The stack starts at one (errorCatchRoute.js)

[lostpebble]

That pageErrorCatchRoute.js is just a catch all for errors when I'm rendering React pages from the server. It them mutates the UIStore to show a modal straight away on page load depending on the error. I think I need to create another error catch just for the actual renderToString function to get a better idea of what's going on.

I have a feeling this could be something to do with mobx-react and preact-compat, perhaps there is some incompatibility with the injecting of state into the components and such. Because it seems that this error originates from actions being called and reactions happening through that when I'm rendering the components (when they should only be rendering, not reacting at all).

[developit]

Yes - I think setState() is triggering a DOM render here, which is on Preact. Probably still want to skip the mobx error handling on the server though, at best it would result in a no-op.

[developit]

Closing since this should have been fixed ~2y ago in 0b853e9. Please re-open if its still an issue!