Error while running getDataFromTree ReferenceError: document is not defined

[ianberdin]

Error while running `getDataFromTree` ReferenceError: document is not defined
    at /frontend/client/node_modules/tss-react/next.js:108:45
    at /frontend/client/node_modules/tss-react/next.js:111:23
    at AppWithEmotionCache (/frontend/client/node_modules/tss-react/next.js:116:110)
    at processChild (/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToStaticMarkup (/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:4314:27)
    at /frontend/client/node_modules/@apollo/client/react/ssr/ssr.cjs.js:105:21
    at new Promise (<anonymous>)

Versions

{
    "tss-react": "^4.3.4",
    "next": "12.3.1",
    "@emotion/cache": "^11.10.3",
    "@emotion/react": "^11.10.4",
    "@emotion/server": "^11.10.0",
    "@emotion/styled": "^11.10.4",
    "@mui/icons-material": "^5.10.9",
    "@mui/lab": "^5.0.0-alpha.103",
    "@mui/material": "^5.10.9",
    "@mui/styles": "^5.10.9",
    "@mui/system": "^5.10.9",
}

[garronej]

Hi @ianberdin,

tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "src",
        "target": "es5",
        "lib": [
+           "dom", 
           "esnext"
      ],
    }
}

[ianberdin]

Thanks for the quick response.
Unfortunately it does not work, still.

{
  "compilerOptions": {
    "baseUrl": "./",
    "allowSyntheticDefaultImports": true,
    "module": "esnext",
    "target": "es5",
    "lib": [
     "dom",
      "dom.iterable",
      "esnext",
    ],
    "downlevelIteration": true,
    "sourceMap": false,
    "allowJs": false,
    "esModuleInterop": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "noImplicitReturns": false,
    "noImplicitThis": false,
    "noImplicitAny": false,
    "strictNullChecks": false,
    "declaration": true,
    "skipLibCheck": true,
    "typeRoots": [
      "./node_modules/@types",
      "../frontend/node_modules/@types"
    ],
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
}

/* eslint-disable no-param-reassign */
const withBundleAnalyzer = require('@next/bundle-analyzer');
const withPlugins = require('next-compose-plugins');
const path = require('path');

const isDev = process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'testing';

const packageJson = require('../../version.json');

const nextConfig = {
  swcMinify: process.env.ENV === 'production',
 
  webpack(webpackConfig, options) {
    Object.assign(webpackConfig.resolve.alias, aliases);
    
    webpackConfig.cache = {
      type: 'filesystem',
      compression: false,
    }
    webpackConfig.module.rules.push({
      test: /\.(ts|tsx)$/,
      include: Object.values(aliases),
      use: {loader: 'swc-loader'},
      exclude: /node_modules/,
    });
  
    return webpackConfig;
  },
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  },
};

module.exports = async (phase) => withPlugins([
    [withBundleAnalyzer({enabled: false})],
  ],
  nextConfig
)(phase, { undefined });

[ianberdin]

It looks like Apollo SSR runs your code in the server.
Here is the problem line:
https://github.com/garronej/tss-react/blob/main/src/next.tsx#L109

I think we need to use check if it is server.
Originally mui used it: https://github.com/mui/material-ui/blob/master/examples/nextjs/src/createEmotionCache.js#L11

        if (ssr && AppTree) {
          try {
            const { getDataFromTree } = await import('@apollo/client/react/ssr');

            let props;
            if (inAppContext) {
              props = { ...pageProps, apolloClient };
            } else {
              props = { pageProps: { ...pageProps, apolloClient } };
            }
         
            await getDataFromTree(<AppTree {...props} />);
          } catch (error) {
            console.error('Error while running `getDataFromTree`', error);
          }
        }

[ianberdin]

@garronej what do you think?

[garronej]

Sorry, it's a runtime error, my bad.
I'll fix this tonight, I'll let you know when it's done.

[garronej]

Hey @ianberdin,

Thanks for reporting,
I've published a release candidate (4.3.5-rc.0) where I test if we are actually on the browser, if we're not I provide no insertioinPoint.

I'm not fully sure it's okay to do that, though.
From the snippet of code you shared, I assume Appolo is extracting some data from the rendered HTML.
If it's only that and there is another proper render that is done on the back end where the caches are actually passed to the <App /> then it's fine.
But if the Apollo render is the only render no styles will be inserted in the header.

What are you thought?

Can you try the release candidate, make sure everything works as you expect?
In particular, please try disabling JavaScript and refreshing the page, see if you have all the emotion styles or not.

If you tell me everything is OK, I'll release for everyone.

PS: You are using two caches, it means that you ran into issues using only one. Would you tell me with what MUI component in particular?
There is a known problem with the component resolved by a pending PR. Is it that or something else? Best regards,

[ianberdin]

Hi @garronej.
Thank you for the quick fix!
It perfectly work.

Also we had to downgrade from react 18 to 17. Because Apollo SSR doesn't ready yet.

Would you tell me with what MUI component in particular? - there is no a specific component. There are a lot broken things.

Thanks again.