Fixing React Issues In PartyKit And Partysocket With Pnpm

Hey everyone! 👋 If you're using PartyKit and Partysocket in your projects, especially within a monorepo setup, you might have bumped into a tricky issue related to React dependencies. I recently wrestled with this myself, and I'm here to share what I learned and how to fix it, especially if you're using pnpm as your package manager. Let's dive in and get those React hooks working smoothly!

The Problem: React Missing in Partysocket

So, here's the deal. Partysocket (which is a key part of PartyKit) uses React hooks. These hooks import from react (check out the source code here). But, and this is the kicker, Partysocket doesn't declare React as one of its dependencies. This can cause some real headaches, especially when building your project with tools like pnpm.

Why is this a problem?

Because pnpm is super strict about its dependencies. It only exposes packages that are explicitly declared as dependencies within a package's node_modules. Without React declared as a dependency, pnpm might not make React available correctly, leading to unexpected behavior and errors. When React isn't correctly provided, things break. When building for production with Next.js and webpack, you can run into a situation where Partysocket gets a stub of React set to null. This causes the following error: TypeError: Cannot read properties of null (reading 'useMemo'). This error points directly at the useStableSocket hook, which relies on the missing useMemo from React. It's like trying to build a house without the right materials; the whole thing falls apart!

Diving into the error

Here's what a typical error stack might look like:

hook.js:608 TypeError: Cannot read properties of null (reading 'useMemo')
    at t.useMemo (_app-33f08802bf0385f7.js:5525:15566)
    at i.options.host (_app-33f08802bf0385f7.js:4388:3425)
    at d.party (_app-33f08802bf0385f7.js:4388:3714)
    at o.agent (_app-33f08802bf0385f7.js:4388:4818)

This stack trace is a condensed view of where the error occurs within your application. The useMemo call, essential for React's functionality, is failing because it's trying to access a property of null. This null value is where React should be. The reason behind this is that Partysocket isn't properly declaring React as a dependency, leading pnpm to fail to recognize it properly during the build process.

The Fix: Manually Declaring React in pnpm-lock.yaml

So, how do we solve this? The easiest way is to modify your pnpm-lock.yaml file to force pnpm to recognize React as a dependency for Partysocket. Here's how you can do it:

First, locate the entry for partysocket in your pnpm-lock.yaml file. It should look something like this:

/partysocket@1.1.6:
    resolution: {integrity: sha512-LkEk8N9hMDDsDT0iDK0zuwUDFVrVMUXFXCeN3850Ng8wtjPqPBeJlwdeY6ROlJSEh3tPoTTasXoSBYH76y118w==}
    dependencies:
      event-target-polyfill: 0.0.4

Now, add a dependencies and a peerDependencies entry to declare React:

/partysocket@1.1.6:
    resolution: {integrity: sha512-LkEk8N9hMDDsDT0iDK0zuwUDFVrVMUXFXCeN3850Ng8wtjPqPBeJlwdeY6ROlJSEh3tPoTTasXoSBYH76y118w==}
    dependencies:
      event-target-polyfill: 0.0.4
      react: '19.2.0'  # Specify your React version
    peerDependencies:
      react: '*' # Or specify your React version, like '18.2.0'

This tells pnpm that Partysocket requires React. Specifically, the dependencies section lists a specific React version, while peerDependencies specifies that it can use any React version. After making this change, make sure to run pnpm install again to update your project's dependencies. This forces pnpm to recognize and include React when building your app, and voila, your errors should vanish!

Why this works

By adding React as a dependency, you're explicitly telling pnpm that Partysocket relies on React. This ensures that React is available within Partysocket's node_modules during the build process. When the build runs, the React hooks can correctly import and utilize React's features. This simple modification resolves the TypeError and allows your application to function correctly.

Alternative Solutions

While manually editing your pnpm-lock.yaml file works, it's not the only way to tackle this problem. Here are a couple of alternative approaches:

Turbopack's (Un)surprising Behavior

Interestingly, tools like Turbopack seem to handle this situation without issue. If you're using Turbopack, you might not encounter this problem at all. However, if, like me, you can't use Turbopack for production builds (due to other constraints), this isn't a viable long-term solution.

Next.js Configuration Hack

Another approach involves using next.config.js to force all React imports to resolve to the same path. This can bypass pnpm's strictness and ensure that React is available. However, this method is more of a workaround and not a true fix for the underlying dependency issue.

// next.config.js
module.exports = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      react: require.resolve('react'),
    };
    return config;
  },
};

This configuration ensures that all React imports point to the same React instance. This is useful when different parts of your application might be using different React versions or when there are problems with how React is resolved by the build tool.

The Ideal Solution: Declaring Dependencies Properly

Ultimately, the best and most robust solution is for the partysocket package (and any other similar packages) to declare all of its dependencies. This is a best practice in the world of package management. If Partysocket were to declare React as a peer dependency, this whole problem would disappear! It would ensure that React is correctly resolved and available without any manual intervention required on your end.

Conclusion: Keeping Your React Projects Running Smoothly

So, there you have it! The problem, the fix, and some alternative solutions. The core issue is that Partysocket doesn't declare React as a peer dependency, which causes problems with strict package managers like pnpm. By manually modifying your pnpm-lock.yaml file, you can ensure that React is available and your application functions as expected. Remember, always keep your dependencies in check to avoid such problems. Let's hope that the maintainers of PartyKit consider declaring React as a peer dependency in the future! If you have encountered this problem or found another solution, please share it with the community. Happy coding!