remix: [Bug]: TypeError: Cannot read properties of undefined (reading 'root')

Which Remix packages are impacted?

remix (Remix core)

What version of Remix are you using?

"remix": "^1.1.3",

What version of Node are you using? Minimum supported version is 14.

v16.4.2

Steps to Reproduce

I was just trying to follow the first tutorial, and right after the part when you create the posts .md files everything was working ok. But after you add the code mentioned in the tutorial:

import path from 'path';
import fs from 'fs/promises';
import parseFrontMatter from 'front-matter';
import invariant from 'tiny-invariant';

export type Post = {
  slug: string;
  title: string;
};

export type PostMarkdownAttributes = {
  title: string;
};

const postsPath = path.join(__dirname, '..', 'posts');

function isValidPostAttributes(attributes: any): attributes is PostMarkdownAttributes {
  return attributes?.title;
}

export async function getPosts() {
  const dir = await fs.readdir(postsPath);
  return Promise.all(
    dir.map(async (filename) => {
      const file = await fs.readFile(path.join(postsPath, filename));
      const { attributes } = parseFrontMatter(file.toString());
      invariant(isValidPostAttributes(attributes), `${filename} has bad meta data!`);
      return {
        slug: filename.replace(/\.md$/, ''),
        title: attributes.title,
      };
    })
  );
}

Then the application breaks and starts showing this error on localhost/posts

TypeError: Cannot read properties of undefined (reading 'root')
    at RemixRoute (http://10.0.0.229:3000/build/_shared/chunk-EW2HPZY2.js:3039:19)
    at renderWithHooks (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:11070:26)
    at mountIndeterminateComponent (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:13190:21)
    at beginWork (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:13977:22)
    at HTMLUnknownElement.callCallback2 (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:3680:22)
    at Object.invokeGuardedCallbackDev (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:3705:24)
    at invokeGuardedCallback (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:3739:39)
    at beginWork$1 (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:17086:15)
    at performUnitOfWork (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:16314:20)
    at workLoopSync (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:16268:13)

The error is not helpful at all so I spend some time debugging it and I find out that it was because the <Scripts /> component in the root.tsx file

import { Link, Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from 'remix';
import type { MetaFunction } from 'remix';

export const meta: MetaFunction = () => {
    return { title: 'New Remix App' };
};

export default function App() {
    return (
        <html lang="en">
            <head>
                <meta charSet="utf-8" />
                <meta name="viewport" content="width=device-width,initial-scale=1" />
                <Meta />
                <Links />
            </head>
            <body>
                <Link to="/posts">Posts</Link>
                <Outlet />
                <ScrollRestoration />
                {/* <Scripts /> */}
                {process.env.NODE_ENV === 'development' && <LiveReload />}
            </body>
        </html>
    );
}

If you comment out the <Scripts /> tag the app starts working again but still don’t know exactly why

Expected Behavior

The app should not break or it should show a helpful error that helps identify the bug

Actual Behavior

The app breaks showing this error:

TypeError: Cannot read properties of undefined (reading 'root')
    at RemixRoute (http://10.0.0.229:3000/build/_shared/chunk-EW2HPZY2.js:3039:19)
    at renderWithHooks (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:11070:26)
    at mountIndeterminateComponent (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:13190:21)
    at beginWork (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:13977:22)
    at HTMLUnknownElement.callCallback2 (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:3680:22)
    at Object.invokeGuardedCallbackDev (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:3705:24)
    at invokeGuardedCallback (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:3739:39)
    at beginWork$1 (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:17086:15)
    at performUnitOfWork (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:16314:20)
    at workLoopSync (http://10.0.0.229:3000/build/entry.client-X6Z7634E.js:16268:13)

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 17
Comments: 34 (3 by maintainers)

Commits related to this issue

fix: cannot read properties of undefined (reading: 'root') see https://github.com/remix-run/remix/issues/1618#issuecomment-1021509296 — committed to mint-vernetzt/community-platform by phollome 2 years ago
feat: settings related events (#335) * implement set or unset parent event * fix: cannot read properties of undefined (reading: 'root') see https://github.com/remix-run/remix/issues/1618#issuecomme... — committed to mint-vernetzt/community-platform by phollome 2 years ago

Most upvoted comments

This error typically occurs when you have server side dependencies that got bundled in your client scripts. The file with the getPosts() function, what is it named? Does it use the .server suffix, like posts.server.ts? This tells the Remix compiler all this code is only used on the server.

https://remix.run/docs/en/v1/guides/constraints

+20

kiliman on Jan 25, 2022

I did some more testing and found that turning off the Cloudflare ‘Rocket Loader’ under speed optimizations fixed the problem in Firefox. I’m guessing in my case this is a Cloudflare bug.

jbasdf on Apr 30, 2022

I’m getting the same error when trying to introduce components that use react-three-fiber. Assuming they are packaged with node-only APIs or something along those lines?

matt-koevort on Feb 2, 2022

Update: I was also importing path and fs in my loader, and so those were getting bundled in as well.

After setting up a .server.ts file where I can import all of my server code, and then import from THERE, everything works.

nheingit on Jan 30, 2022

@dillionmegida From my understanding, this issue can also come up if any JS is breaking in this particular component. Check the developer console to see if there are any JS errors proceeding this error. If yes, fixing those might resolve the issue.

Also, you can move your code into client-only module to make it exclusively run in the browser. Check this –

https://devtools.tech/blog/how-to-fix-errors-like-referenceerror-window-is-not-defined-in-remix-powered-web-app-or-javascript-frameworks—rid—G0OTehUXo6QQCrfykSF3

yomeshgupta on Feb 15, 2022

The original issue reported is now covered in the gotcha section

machour on Mar 18, 2022

I also have this error, but on my side, I’ve just added a resource route. It’s only when I add a default function to the resource route file that my app works again.

na2axl on Feb 22, 2022

I had the same issue, but the @kiliman solution worked for me. I renamed the file from index.ts to index.server.ts.

giotramu on Jan 26, 2022

@kiliman, that was my case, as I’ve added some prisma code to my app and haven’t noticed that it broke it. Thank you for your advice 😅

Andreychik32 on Jan 25, 2022

I am having the same error. Strangely mine happens after making a call to firebase firestore (using firebase-admin). Error goes away when I comment out the <Scripts /> tag as well.

spicelander on Jan 23, 2022