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

🐛 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'
Screenshot 2023-10-17 at 14 14 17

This also failed in the terminal

Screenshot 2023-10-17 at 14 18 29

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 …

Screenshot 2023-10-17 at 14 14 42

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

About this issue

  • Original URL
  • State: closed
  • Created 8 months ago
  • Reactions: 1
  • Comments: 19 (10 by maintainers)

Most upvoted comments

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.

Screenshot 2023-10-18 at 12 44 26

the below is a lot of connect functions considering they don’t “exist” for v7 these functions are also usable but fail type checking. Screenshot 2023-10-18 at 12 45 15

the below is your react-instantsearch-core types which indeed export connect* function type declarations Screenshot 2023-10-18 at 12 47 15

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 😅

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 😅

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 :

image

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 !

You replace connectMenu with useMenu 😃 @jdnichollsc