Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react-instantsearch-core introduces DOM types into react native Apps. #6365

Open
1 task done
giantslogik opened this issue Sep 17, 2024 · 1 comment
Open
1 task done
Labels
Library: React InstantSearch ≥ 7 Issues in any of the react-instantsearch@7 packages (formerly named react-instantsearch-hooks)

Comments

@giantslogik
Copy link

giantslogik commented Sep 17, 2024

🐛 Current behavior

"react-instantsearch-core": "^7.13.1" introduces DOM types into react native apps. We have experienced this issue with "react-instantsearch-hooks": "^6.33.0" as well.

This causes invalid code in react native to be accepted as valid by tsc causing crashes at run time in our Apps. (At run time typescript/javascript support is provided by hermes.)

All variables and functions valid in DOM environment (eg. close() , the window global , ScrollY, StyleSheet ) and thousands of other variables / functions are considered valid due to node_modules/typescript/lib/lib.dom.d.ts being included.

Via the tsconfig explainFiles flag i was able to determine the responsible node modules. https://www.typescriptlang.org/tsconfig/#explainFiles

node_modules/typescript/lib/lib.dom.d.ts
  Library referenced via 'dom' from file 'node_modules/preact/src/jsx.d.ts'
node_modules/preact/src/index.d.ts
  Imported via "preact" from file 'node_modules/instantsearch.js/..........' with packageId 'preact/src/[email protected]'
node_modules/instantsearch.js/es/index.d.ts
  Imported via 'instantsearch.js' from file 'node_modules/react-instantsearch-core/......' with packageId 'instantsearch.js/es/[email protected]'

🔍 Steps to reproduce

  1. Add "react-instantsearch-core": "^7.13.1" to a react native App
  2. In any source file import { InstantSearch } from 'react-instantsearch-core';
  3. Edit any App source file and call the close() method.
  4. run tsc (or within VSCode) . It fails to mark the close() call as an error as in a DOM environment close() calls the global window.close()

Live reproduction

https://itdoesntseemtobefeasibletoreproRN.com

💭 Expected behavior

tsc should flag close() as an undefined function when running under React Native.
Using instantsearch-core / instantsearch.js treats any code valid in a browser environment as valid, even when invalid for react-native.

Package version

"react-instantsearch-core": "^7.13.1"

Operating system

NA

Browser

NA

Code of Conduct

  • I agree to follow this project's Code of Conduct
@giantslogik giantslogik added the triage Issues to be categorized by the team label Sep 17, 2024
@Haroenv
Copy link
Contributor

Haroenv commented Sep 17, 2024

I wasn't aware of this issue, but we have a medium-term goal of splitting up InstantSearch.js into a core part that doesn't import preact and any browser code and one that does, which can then be used for React InstantSearch core too. Unfortunately for now I don't see a workaround without that amount of work

@dhayab dhayab added Library: React InstantSearch ≥ 7 Issues in any of the react-instantsearch@7 packages (formerly named react-instantsearch-hooks) and removed triage Issues to be categorized by the team labels Sep 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Library: React InstantSearch ≥ 7 Issues in any of the react-instantsearch@7 packages (formerly named react-instantsearch-hooks)
Projects
None yet
Development

No branches or pull requests

3 participants