algolia / algolia/docsearch

[next] Refine typescript support

Open
#985 4 comments 3 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.4k
Forks
439
Avg merge
14h 32m
Merged PRs (30d)
19

Description

- [ ] 1. Please disable `allowSyntheticDefaultImports`

https://github.com/algolia/docsearch/blob/f30ca386cd52327b4b8bb374e796b293b7cd0133/tsconfig.json#L3

This options is poisonous. When users install `@docsearch/react` in their own project, they have to enbale `allowSyntheticDefaultImports` or enable `skipLib` to make things work. Thus, for library project, it's better not to enbale this kind of compilerOptions.

```sh
node_modules/@docsearch/react/dist/esm/useDocSearchKeyboardEvents.d.ts:1:8 - error TS1259: Module '"node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

1 import React from 'react';
~~~~~

node_modules/@types/react/index.d.ts:65:1
65 export = React;
~~~~~~~~~~~~~~~
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
```

- [ ] 2. Put `@types/react` in dependencies of `@docsearch/react`.

As the error shows, when using `@docsearch/react` with typescript, the types definition of react is also required.

The generated `@docsearch/react/dist/esm/DocSearch.d.ts` (and many other files) has `import React from 'react';` in it.

- [x] 3. `node_modules/@docsearch/js/dist/esm/index.d.ts` is not a module

> Already fixed by #1396 in version 3.1.1. Thanks @IanVS

When trying to import `@docsearch/js` in ts:

```sh
File 'node_modules/@docsearch/js/dist/esm/index.d.ts' is not a module.

17 const docsearch = await import('@docsearch/js')
```

---

Hope we can optimize typescript support~

Contributor guide

Open the contributing guide

Research direction

Start with tsconfig.json at the linked configuration entry and inspect the @docsearch/react package dependencies and generated declaration files such as dist/esm/DocSearch.d.ts. Reproduce the TypeScript consumer error without the suggested compiler flags, then verify that the package types compile and resolve their React type dependency correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
developer-experience
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.