[Bug] - Issue with your exported types when upgrading to V7

Question

[Bug] - Issue with your exported types when upgrading to V7

joelpierre opened this issue 7 months ago · comments

🐛 Current behavior

I used the codemod and also attempted to manually solve the issue however my editor and TS itself is very confused with your types:

import {
  type InstantSearchProps,
  useHits,
  type UseHitsProps,
  usePagination,
  type UsePaginationProps,
  connectMenu, <-- This doesn't exist apparently
  connectSearchBox, <--- This doesn't exist either
} from 'react-instantsearch'

This also failed in the terminal

I can ts-ignore this and it all works fine so you do "actually export it" but your types are not playing ball at all...

I then installed your core package and it also doesn't export those two functions 🤔 ... so I tried accessing the index file directly from the core package ...

And all good... so there is something up with how you export the types.

🔍 Steps to reproduce

Setup a new TS project
Install new V7 react-instantsearch pkg and try to use connectMenu or connectSearchBox <- These are the only two I needed, there may be more.

Live reproduction

https://codesandbox.io/s/cool-fast-lfppn7?file=/src/App.tsx

💭 Expected behavior

I expect the types to be exported from the right place, and I don't expect to have to install the core library separately as your docs state that they are re-exported from the react-instantsearch pkg

Package version

7.2.0

Operating system

No response

Browser

No response

Code of Conduct

I agree to follow this project's Code of Conduct

Haroen Viaene · Answer 1 · Wed Oct 18 2023 17:34:57 GMT+0800 (China Standard Time)

While the connectors aren't totally the same, you should import them from instantsearch.js/es/connectors instead of from react-instantsearch. In most cases you should be able to use useMenu, useSearchBox instead of the connectors directly. What are you using them for exactly?

Could you maybe share the code before transformation/codemod so we can see if it can be automatically changed?

Joel Pierre · Answer 2 · Wed Oct 18 2023 17:54:42 GMT+0800 (China Standard Time)

Hi I was just following your docs in which it states that all imports from the specific packages "-dom, -web, -server", can be moved to just react-instantsearch, which isn't the case, so at the least the docs should be updated to specify that it isn't the case. Also instantsearch.js is a separate package so I wouldn't assume to take it from there instead given the docs explanation.

Happy to move to useMenu and useSearchBox for our use case for sure (and I have done so) but the issue still stands with regards to the types. The sandbox output was very similar to how we were using it (not sure why tbh).

The codemod only changed the import for this particular thing so nothing really to share.

Haroen Viaene · Answer 3 · Wed Oct 18 2023 17:58:14 GMT+0800 (China Standard Time)

So the code you used to have before the codemod was:

import {
  connectMenu,
  connectSearchBox,
} from 'react-instantsearch-core';

export const ExampleConnectMenu = () => {
  connectMenu(() => null);
  return null;
};

export const ExampleConnectSearchBox = () => {
  connectSearchBox(() => null);
  return null;
};

Because I don't think this (is meant to) work. With use however that code makes sense

The type issue exists as React InstantSearch doesn't have connectMenu or connectSearchBox, so it can't export those types of couse

Joel Pierre · Answer 4 · Wed Oct 18 2023 18:12:04 GMT+0800 (China Standard Time)

We didn't have core before it was v6 react-instantsearch-dom as below:

import { connectMenu, connectSearchBox } from 'react-instantsearch-dom'

and it changed it to

import { connectMenu, connectSearchBox } from 'react-instantsearch'

which is what my IDE auto completes to as well... and if I ts-ignore it all works fine and if I log out the function it exists but the types don't allow for it (which may be what you want even though it is technically exported) if I used vanilla JS it would work fine.

There may be an issue in react-instantsearch however in which you re-export everything/or some funcs from react-instantsearch-core. Or module naming clashes etc 🤷🏽 I dunno but importing like the below doesn't work either

import {
  connectMenu,
  connectSearchBox,
} from 'react-instantsearch-core';

Haroen Viaene · Answer 5 · Wed Oct 18 2023 19:38:06 GMT+0800 (China Standard Time)

Again, connect* doesn't exist in v7, that's what could be made more clear in the migration script though. Thanks for your feedback!

Joel Pierre · Answer 6 · Wed Oct 18 2023 19:50:23 GMT+0800 (China Standard Time)

Again, connect* doesn't exist in v7, that's what could be made more clear in the migration script though. Thanks for your feedback!

Sorry you may say this but it is there. So I would check the code and make sure... on checking react-instantsearch v7.2.0 you in-fact export everything from core, so one would expect not to have to install core at all and use react-instantsearch only.

the below is a lot of connect functions considering they don't "exist" for v7 these functions are also usable but fail type checking.

the below is your react-instantsearch-core types which indeed export connect* function type declarations

So I appreciate your intention is that they don't exist... but they very much do and make your docs a TON more confusing... at the least this is a bug and not expected behaviour on either my part as the consumer reading your docs and your part as you say they shouldn't exist at all in v7 😅

Haroen Viaene · Answer 7 · Wed Oct 18 2023 20:52:44 GMT+0800 (China Standard Time)

Do you still have a React InstantSearch Core v6 installed? I can't reproduce this in the sandbox 🤔

Joel Pierre · Answer 8 · Wed Oct 18 2023 21:12:33 GMT+0800 (China Standard Time)

Do you still have a React InstantSearch Core v6 installed? I can't reproduce this in the sandbox 🤔

Its in the sandbox on this issue https://codesandbox.io/s/cool-fast-lfppn7?file=/src/App.tsx if you remove the connect* imports and do the usual cmd + spacebar then you will see it has connect in the exports of react-instantsearch and so on.

No v6 installed at all, 7.2.0 is the version listed everywhere in my lock file and package.json

Haroen Viaene · Answer 9 · Wed Oct 18 2023 21:19:52 GMT+0800 (China Standard Time)

oddly I'm not seeing that. Maybe you're having that locally because you used to have React InstantSearch v6 installed and typescript still somehow has that indexed.

React InstantSearch Core also only has the correct imports:

Both of those screenshots were from a clean download of the sandbox you linked 🤔

Joel Pierre · Answer 10 · Wed Oct 18 2023 21:36:28 GMT+0800 (China Standard Time)

Really weird because that sandbox links shows me this

I only used v7.2 in the deps in this sandbox too. 😅

Haroen Viaene · Answer 11 · Wed Oct 18 2023 22:26:14 GMT+0800 (China Standard Time)

The top two suggestions aren't from TypeScript, but from "other words also in the file". If you removed instead of copied those suggestions won't show up :)

J.D Nicholls · Answer 12 · Fri Oct 27 2023 10:57:14 GMT+0800 (China Standard Time)

Hey folks, hope you're doing well

Any example to replace the connectMenu utility?
Thanks for your support! <3

J.D Nicholls · Answer 13 · Fri Oct 27 2023 10:58:06 GMT+0800 (China Standard Time)

@joelpierre are you using that from a new React Native project? 🤔

Haroen Viaene · Answer 14 · Fri Oct 27 2023 16:15:27 GMT+0800 (China Standard Time)

You replace connectMenu with useMenu :-) @jdnichollsc

J.D Nicholls · Answer 15 · Fri Oct 27 2023 22:15:36 GMT+0800 (China Standard Time)

@Haroenv oh Is there any example? I don't see anything here: https://www.algolia.com/doc/guides/building-search-ui/going-further/native/react/

Haroen Viaene · Answer 16 · Fri Oct 27 2023 23:10:38 GMT+0800 (China Standard Time)

useMenu is pretty much the same as useRefinementList, so this example: https://www.algolia.com/doc/guides/building-search-ui/going-further/native/react/#filter-with-a-refinement-list-in-a-modal @jdnichollsc, also a DOM example here you can translate to react native: https://www.algolia.com/doc/api-reference/widgets/menu/react/#hook-example

Aymeric Giraudet · Answer 17 · Fri Nov 03 2023 21:57:18 GMT+0800 (China Standard Time)

Hi @joelpierre,

First, did you run the codemod against your .tsx files ? By default it seems like it doesn't pick up .ts files, so you should use it like so :

npx @codeshift/cli --packages 'instantsearch-codemods#ris-v6-to-v7' src/**/*.tsx

When I do this on a file importing connectMenu from react-instantsearch-dom, it does get replaced to useMenu from react-instantsearch, and it even outputs a HoC called connectMenu along with a TODO message :

Regarding your type errors, can you show the contents of package.json in react-instantsearch-core ?
You can also run this command in the terminal : head node_modules/react-instantsearch-core/package.json

You could also link a package-lock.json, yarn.lock or pnpm lock file if you're using it.

Thank you !

Joel Pierre · Answer 18 · Mon Nov 13 2023 23:36:06 GMT+0800 (China Standard Time)

Hey @aymeric-giraudet thanks for getting back to me and for the suggestion. I ending up refactoring a ton of the code a couple weeks back so this issue isn't as pressing. Looking in my pnpm-lock file there were no other react-instantsearch pkg versions so not sure why it said they were there. I even screenshotted the type defs from the pkg inside 7.2.0 so not sure why there are so many differing results (maybe you are on 7.2.X and not 0).

To help you guys debug here is our lock file (had to upload as a zip)
pnpm-lock.yaml.zip

The reason I don't just think it's my IDE or something weird is because I nuked my node_mods and the cache a lot before re-installing and I still came up with the above screenshots 🤷🏽‍♂️ but yeah I dunno anymore 😅

Haroen Viaene · Answer 19 · Wed Nov 15 2023 18:00:07 GMT+0800 (China Standard Time)

we've updated the documentation now to ensure tsx extension is processed, it should all work as expected. Thanks for your feedback