Vite + React : Issues integrating PagefindUI with Vite.js and React

[br0wsa]

Title: Issues integrating PagefindUI with Vite.js and React

Description:

Hello,

I'm currently facing issues integrating PagefindUI into my project using Vite.js and React. I have two main problems:

1. Using useNavigate: I want to replace <a href> links with useNavigate from react-router-dom. However, this doesn't seem to work correctly with PagefindUI. Even when using useNavigate, the links still seem to use href and reload the page instead of navigating dynamically.

2. Results with specific tags: Search results contain specific tags such as ___END_PAGEFIND_WEIGHT___ and ___PAGEFIND_AUTO_WEIGHT___5. I don't want these tags to display in the results. Although I've tried to remove them with JavaScript, they persist in the search results.

To reproduce the issues:

1. Integrate PagefindUI into a Vite.js project with React.
2. Perform a search containing <a href> links in the results.
3. Notice that the links don't behave as expected with useNavigate.
4. Also notice the presence of specific tags in the search results.

Thank you for your assistance in resolving these issues.

It would be nice to have methods instead of a UI, to enable access to a search bar and another one for display in a UI container. The UI is very personal, and a config object would be more appreciated and more open to different frameworks.

[bglw]

Hey @br0wsa 👋

Search results contain specific tags This looks like a bug I fixed in #430 that was released in v1.0.3. Can you confirm what version of Pagefind you're using? Those tags are internal and should never be seen.

It would be nice to have methods instead of a UI This does exist, as the JavaScript Search API. This requires you to implement your own UI, but provides all of the data you would need 🙂 Pagefind's Default UI is in Svelte, so it's a while away from being React-friendly out of the box. But hopefully someone can build and publish a nice React component using the search API directly one day.

The search API is completely framework agnostic, and has config, so hopefully that works for you 🙂

I'll leave this open while waiting for an answer re: Pagefind version.

[br0wsa]

Hello and thank you immensely for your prompt response.

After running npx pagefind --version, I'm using Pagefind 1.0.4.

I'm using "vite": "^4.4.5" with React.

On that note, I'd like to suggest adding a fantastic plugin to your documentation, vite-plugin-pagefind. It recursively copies into the public directory, enabling seamless integration with Pagefind UI or API, which is highly appreciated.

[bglw]

Hmm, do you a project you're able to share? Or just the source HTML of that page in your screenshot? I'll see if I can reproduce those weights leaking out.

[br0wsa]

I would like to add that I was unable to disable the subresult.

SO... the API is PERFECT ! i prefer ... I'm using Vite.js with React and the Vite plugin, and it works wonderfully!

[br0wsa]

In fact it's very simple I haven't done it because I've tested so much uninstalling reinstalling using different package services my question is very simple.

is paigefind made for vite JS are there any plugins are there any developers here who have successfully installed on VITEJS pagefind ?

because mine sometimes references a few pages sometimes everything sometimes nothing most of the time it bugs on deployment totally because the index is empty