algolia / instantsearch

โšก๏ธ Libraries for building performant and instant search experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.

Home Page:https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ssr error when no root indexName is given

jason-rb2 opened this issue ยท comments

๐Ÿ› Current behavior

I am handling the search function on multiple indexes, the queries need to be memories on url of browser.

If i import from es path: import history from "instantsearch.js/es/lib/routers/history";
there will be an error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/jason/Documents/xx/frontend/node_modules/.pnpm/instantsearch.js@4.56.9_algoliasearch@4.19.1/node_modules/instantsearch.js/es/lib/routers/history.js from /Users/jason/Documents/xx/frontend/packages/storefront/build/index.js not supported. Instead change the require of history.js in /Users/jason/Documents/xx/frontend/packages/storefront/build/index.js to a dynamic import() which is available in all CommonJS modules

if i import from cjs path: import { history } from 'instantsearch.js/cjs/lib/routers/index.js';
there will be an another error:
image

Also, if the inner component use useRouteLoaderData, it will throw an error: xxx need under a Route.

๐Ÿ” Steps to reproduce

It can be reproduced by just going to the sandbox link: https://codesandbox.io/p/sandbox/peaceful-leaf-stq2tt?file=/app/routes/index.tsx:60,6-60,30

Live reproduction

https://codesandbox.io/p/sandbox/peaceful-leaf-stq2tt?file=/app/routes/index.tsx:60,6-60,30

๐Ÿ’ญ Expected behavior

Allow me to use ssr on multiple index

Package version

react-instantsearch 7.0.1
remix 1.19.3

Operating system

macOs

Browser

chrome

Code of Conduct

  • I agree to follow this project's Code of Conduct

I believe this is related to Remix' bundling setup, if you change the import to /cjs/ it might work

I believe this is related to Remix' bundling setup, if you change the import to /cjs/ it might work

if i imported from /cjs path like:

import { history } from 'instantsearch.js/cjs/lib/routers/index.js';

it will throw an another error๐Ÿ˜ข

image

Maybe it's due to the Index component, if you set the router on InstantSearch, and wrap one Index, like the code sandbox: https://codesandbox.io/p/sandbox/peaceful-leaf-stq2tt?file=/app/routes/index.tsx:78,1

you can easy to reproduce the error

Ah, this seems to happen when indexName on the root is not set. Which is linked to #5590, although I'm not yet sure what's the cause here. For the time being you can solve the issue by passing the indexName to root as well

Thanks for reporting, I've created a solution for your problem in this PR: #5832 feel free to try it out when the codesandbox links get posted in that PR

Hi @Haroenv, thanks for your quick response, we solved the error follow your reply!

Now we have another issue, when we change the refinements, the url changed, but the loader of remix not reload

It makes me upset because we need to do some data transformation work on the loader according to the url.

You can visit this sandbox: https://codesandbox.io/p/sandbox/wizardly-monad-g3s9ny?file=/app/components/Search.tsx:1,1

When you select one refinement, the url on the address bar changed, but not trigger the reload of remix loader

image

I've extracted your question in #5834, feel free to follow up there @jason-rb2