Cannot find module (fast-deep-equal)

[spenserschwartz]

I'm trying to just start the most basic of examples and I get the following error:

• Reproduce steps
  • Nextjs, pnpm, Mac
  • pnpm add @vis.gl/react-google-maps (also tried adding fast-deep-equal, removing module folders, reinstalling, etc)
  • Basic example of APIProvider wrapper

This textbox breaks for some reason every time I try to insert code. Here's a screenshot, but it is literally the example from 'Usage'.

[usefulthink]

yes, so fast-deep-equal is used internally in the map component. It's listed in the dependencies and in the package-lock.json.
So as far as I can tell it should get installed (and it gets installed when I run npm install @vis.gl/react-google-maps).

But I have no experience with pnpm, does it do anything special that could cause this?

[spenserschwartz]

No, it does not do anything special. It seems that if fast-deep-equal is already installed (used by tiptap text editor as a dependency) in your application, then @vis.gl/react-google-maps is having issues resolving it. In other words, I'd have to remove all other tools that use anything in the build to use it?

[usefulthink]

oooh, wait a second. Just noticed in the error-message, that it tries to load fast-deep-equal/react and suggests fast-deep-equal/react.js. So there might be a problem with how dependencies are resolved in our build?!

[spenserschwartz]

Yeah I think this is on the right path. When I try npm, I get

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "link:": link:3.1.3/node_modules/fast-deep-equal/react.js

npm ERR! A complete log of this run can be found in: /Users/spenserschwartz/.npm/_logs/2024-02-07T22_09_59_202Z-debug-0.log

i.e. No matter npm or pnpm, there seems to be dependency issues

[spenserschwartz]

@usefulthink it seems like this is a valid bug. Should I go ahead and make an issue for this?

[usefulthink]

This should be fixed with the 0.6.1 version (it's no longer using a deep import from fast-deep-equal).

[spenserschwartz]

This did it, thank you! (I'd be curious to know what exactly the issue is; kind of intriguing)

[usefulthink]

In the code there was import x from 'fast-deep-equal/react';.

This works fine with our typescript-configuration (no forced file extensions, and there is a file node_modules/fast-deep-equal/react.d.ts), but when building and using the bundled mjs file this is no longer valid (since fast-deep-equal doesn't declare subresource exports, it will only resolve actual js files), and it needs to be import x from 'fast-deep-equal/react.js'. But since we don't really need the react-specific extension of fast-deep-equal, I just replaced it with the plain package import.

[spenserschwartz]

Hmm, that is interesting. Thank you again for your expediency and help!