Trying to figure out ESM

[vonkoff]

I've found the file path to a type I need for a type called InstantSearchServerState is "node_modules/react-instantsearch-hooks/dist/es/components/InstantSearchSSRProvider.d.ts"

import type { InitialResults, UiState } from 'instantsearch.js';
import type { ReactNode } from 'react';
export type InstantSearchServerState = {
    initialResults: InitialResults;
};
export type InstantSearchSSRProviderProps = Partial<InstantSearchServerState> & {
    children?: ReactNode;
};
/**
 * Provider to pass the server state retrieved from `getServerState()` to
 * <InstantSearch>.
 */
export declare function InstantSearchSSRProvider<TUiState extends UiState, TRouteState = TUiState>({ children, ...props }: InstantSearchSSRProviderProps): JSX.Element;

Write this in a route:
import type { InstantSearchServerState } from 'react-instantsearch-hooks'
Gets an error hovering over InstantSearchServerState that says Module '"react-instantsearch-hooks"' has no exported member 'InstantSearchServerState'.ts(2305)

The things exported are when going to node_modules/react-instantsearch-hooks/dist/es/index.d.ts are:

export { default as version } from './version';
export * from './components/Configure';
export * from './components/DynamicWidgets';
export * from './components/Index';
export * from './components/InstantSearch';
export * from './components/InstantSearchServerContext';
export * from './components/InstantSearchSSRProvider';
export * from './connectors/useBreadcrumb';
export * from './connectors/useClearRefinements';
export * from './connectors/useConfigure';
export * from './connectors/useCurrentRefinements';
export * from './connectors/useDynamicWidgets';
export * from './connectors/useHierarchicalMenu';
export * from './connectors/useHits';
export * from './connectors/useHitsPerPage';
export * from './connectors/useInfiniteHits';
export * from './connectors/useMenu';
export * from './connectors/useNumericMenu';
export * from './connectors/usePagination';
export * from './connectors/usePoweredBy';
export * from './connectors/useQueryRules';
export * from './connectors/useRange';
export * from './connectors/useRefinementList';
export * from './connectors/useSearchBox';
export * from './connectors/useSortBy';
export * from './connectors/useStats';
export * from './connectors/useToggleRefinement';
export * from './hooks/useConnector';
export * from './hooks/useInstantSearch';

I'm just not sure what I have to do to make this work with the least amount of effort...for now this works

import type { InstantSearchServerState } from '../../../node_modules/react-instantsearch-hooks/dist/es/components/InstantSearchSSRProvider.js'

But, I would want to avoid that. Plus, I have to use the components below:

import {
	Configure,
	Hits,
	InstantSearch,
	InstantSearchSSRProvider,
	Pagination,
	SearchBox,
} from 'react-instantsearch-hooks-web'

And none of them are in the index.d.ts that react-instantsearch-hooks-web defaults to exporting.

[vonkoff]

To continue...I'm pretty sure I have to do some lifting of declaring my own index.d.ts files that pull from the node_modules because I can't mess the node module folders. If anyone has suggestions on the best method towards doing this, like where I should create a folder holding the .d.ts for a specific package, it would be greatly appreciated!

[kentcdodds]

Here's where you stick dependency definitions you can't install: https://github.com/epicweb-dev/epic-stack/blob/main/types/deps.d.ts

[vonkoff]

Thanks @kentcdodds

To expand on this I am using types/dep.d.ts as you said

declare module 'react-instantsearch-hooks-typed' {
	export { Configure } from '/#react-instantsearch-hooks/dist/es/index.js'
	export { Hits } from '/#react-instantsearch-hooks-web/dist/es/index.js'
	export { InstantSearch } from '/#react-instantsearch-hooks/dist/es/index.js'
	export { InstantSearchSSRProvider } from '/#react-instantsearch-hooks/dist/es/index.js'
	export { Pagination } from '/#react-instantsearch-hooks/dist/es/index.js'
	export { SearchBox } from '/#react-instantsearch-hooks/dist/es/index.js'
}

So, with this I'm able to export components from a module that I need.
The path alias helps to shorten exporting from node_modules

    "paths": {
      "~/*": ["./app/*"],
      "tests/*": ["./tests/*"],
      "#*": ["./node_modules/*"]
    },

Hopefully this helps someone who is confused with using ESM for Algolia React Hooks

[kentcdodds]

Thanks!