Module not found: Can't resolve 'ably' after upgrading to 2.0.3

[Mosquid]

I upgraded from 1.2.49 to 2.0.3 and the next time I started my react project, It gave me this error:

Module not found: Can't resolve 'ably' in '...'

┆Issue is synchronized with this Jira Task by Unito

[lawrence-forooghian]

Hi @Mosquid, thanks for your report. It’s hard to know what’s causing this from the information that you’ve provided.

My first question is whether you followed the v2 migration guide? I ask because you mention that you upgraded from 1.2.49. The first step of the migration guide is to upgrade to 1.2.50 before performing the upgrade to v2.

[Mosquid]

Hey. Here are the reproduction steps:

• install ably@1.2.49
• run yarn upgrade ably@^ and select 1.2.50
• run yarn upgrade ably@^ and select 2.0.3
• The compiler succeeded but the useChannel hook started giving me an error about the missing client.
• I stopped, removed the node_modules and re-installed packages. After that the compiler won't start with Module not found: Can't resolve 'ably' in '...'

I'm using Node v18.16.0 and React 18.2.0

[VeskeR]

Hi @Mosquid !
Unfortunately, I couldn't reproduce the Module not found: Can't resolve 'ably' in '...' error following your steps with our ably-js nextjs example repo (specifically based on this commit as the latest commit in repo is already using ably-js v2).

After upgrading to ably-js v2 I only got expected errors, such as Package path ./promises is not exported from package and TypeError: ably__WEBPACK_IMPORTED_MODULE_1__.Realtime.Promise is not a constructor, due to changes to our exports configuration in ably-js v2. Required changes you need to do in the codebase when upgrading to ably-js v2 are covered in our v2 migration guide, and react-hooks v2 migration guide.

If you are still experiencing this problem, could you please share more information about your project setup that might affect dependency resolution (like your tsconfig.json) and code example of how are you trying to import and use Ably client and react hooks? Thank you!

[VeskeR]

Hello @Mosquid !

I hope you're doing well. Were you able to resolve your issue with installing ably using yarn?

[Mosquid]

Hi @VeskeR,
No, unfortunately not. Here is the code of my ably provider.

import { AblyProvider } from "ably/react";
import * as Ably from "ably";
import { FC } from "react";
import { observer } from "mobx-react";
import { ErrorInfo } from "ably";

const client = new Ably.Realtime({
  httpMaxRetryCount: 5,
  authCallback: async (_, callback) => {
    try {
      // custom auth
    } catch (error) {
      callback(error as ErrorInfo, null);
    }
  },
  authParams: {
    path: location.pathname,
  },
});

const AblyClientProvider: FC = ({ children }) => {
  return <AblyProvider client={client}>{children}</AblyProvider>;
};

export default observer(AblyClientProvider);

Error: Module not found: Can't resolve 'ably' in AblyClientProvider.tsx

[CurrrBell]

I have run into this as well, but only when running Jest tests. I've got v2.0.2 installed. Ably is new to my project, however, so I didn't do any migration from 1.x. I get the same error message that @Mosquid gets. Even if I try to mock it, Jest seems to have no idea what ably is.

This answer on Stack Overflow (although very old) mentions that the package the OP asked about had no main entry in its package.json. I found this to be the case for ably's package.json, whereas other packages in my dependencies do have a main. I'm very out of my depth here so forgive me if this is totally nonsensical, but this was the closest thing to a lead other than this GH issue that I could find for this.

[matthewcaminiti]

+1 Same issue here with 2.0.4, never migrated and am suffering with my build step due to lack of main entry

[VeskeR]

@CurrrBell What version of the Jest are you using? It seems that Jest <28 was not able to resolve dependencies from exports field in installed packages, but it should've been fixed in Jest >=28.

@matthewcaminiti What does your environment look like in which you are trying to use ably package (e.g. are you using nodejs/deno/bun (also which version), npm/yarn/pnpm) ?

[matthewcaminiti]

@CurrrBell What version of the Jest are you using? It seems that Jest <28 was not able to resolve dependencies from exports field in installed packages, but it should've been fixed in Jest >=28.

@matthewcaminiti What does your environment look like in which you are trying to use ably package (e.g. are you using nodejs/deno/bun (also which version), npm/yarn/pnpm) ?

Hey sorry forgot about this thread, got things resolved on my setup with the Webpack suggestion in the readme (using metro bundler in Expo React Native monorepo)!

For context if still desired:
Node 20.11.1, npm 10.2.4

[VeskeR]

Hi!
In 2.1.0 release of ably-js we have re-added the main and browser fields to the root level of package.json. This should fix the Can't resolve 'ably' error in environments/setups that can't correctly resolve the package based on the exports field from package.json. Please try that version out and let us know if you are experiencing any other issues.
Thank you for reporting this problem!