docsearch icon indicating copy to clipboard operation
docsearch copied to clipboard

[next] Refine typescript support

Open meteorlxy opened this issue 5 years ago • 4 comments

  • [ ] 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.

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:

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~

meteorlxy avatar Nov 25 '20 12:11 meteorlxy

@francoischalifour @shortcuts

Sorry for bothering you guys. Do you have any plans on this?

meteorlxy avatar Mar 13 '21 04:03 meteorlxy

Hi @meteorlxy,

Thanks for opening this issue.

  1. DocSearch is based on other Algolia librairies, such as Autocomplete, which also requires the allowSyntheticDefaultImports option. To keep our librairies aligned, we should not remove it for now.
  2. There's also downsides to move it to the dependencies, such as different React versions in the node_modules if the version range doesn't match. One solution could be to define it as optional with the peerDependenciesMeta tag but I think it wouldn't warn when @types/react isn't installed. As it's very inconsistent, leaving it as-is might be the best option. (wdyt @Haroenv ?)
  3. Could you please send us a reproduction of this use case?

shortcuts avatar Mar 17 '21 10:03 shortcuts

  1. A reproduction is ok, but I think you could figure out the reason once you check the dist type file of @docsearch/js 😅

https://github.com/algolia/docsearch/blob/2c0962ebb399885bafbcf7fd20f13b71675494e7/packages/docsearch-js/package.json#L17

image

Nothing exported, and only declaring two non-existed module.

meteorlxy avatar Mar 17 '21 14:03 meteorlxy

@shortcuts I had problem number 3 as well, here's a reproduction: https://stackblitz.com/edit/typescript-decjve?file=index.ts

image

I've been fiddling around with a solution, and will submit a PR shortly.

IanVS avatar May 26 '22 15:05 IanVS