2

I'm trying to use https://github.com/adarshpastakia/ant-extensions/tree/master/modules/searchbar

I've added the code on the tutorial but get an error, is the library broken? Works on their storyboard

<SearchBar collapsed={false} filters={[]} fields={[]} emptyField={"Message when fields list is empty"} />

Error: A React component suspended while rendering, but no fallback UI was specified.

Add a component higher in the tree to provide a loading indicator or placeholder to display. in Unknown in div in Unknown (created by SearchBar) in div (created by SearchBar) in I18nextProvider (created by ContextProvider) in ContextProvider (created by SearchBar)

I've tried

 <Suspense fallback={<div>Loading... </div>}>
  
    <SearchBar collapsed={false} filters={[]} fields={[]} emptyField={"Message when fields list is empty"} />
</Suspense>

But it remains stuck on Loading... and doesnt render the component

I need something like the example on their storybook: https://ant-extensions.herokuapp.com/?path=/docs/search-bar-example--example

UPDATE: condesandbox here: https://codesandbox.io/s/magical-voice-h5gbk?file=/src/App.js

I get this error now: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.

martin clayton
  • 76,436
  • 32
  • 213
  • 198
r342346
  • 119
  • 1
  • 15

2 Answers2

2

Custom component

import { SearchBar } from "@ant-extensions/searchbar";

const CustomComponent = () => <SearchBar {...props}/>

export default CustomComponent;

Now lazy loading

import { lazy , Suspense } from "react";

const SearchBar = lazy(() => import("path_to_/CustomComponent"))

....

return <Suspense fallback={<div>Loading... </div>}>
      <SearchBar {...props}/>
</Suspense>
Arnaud
  • 103
  • 7
  • I tried but I get this error "lazy element type must resolve to a class or function." see codesandbox: https://codesandbox.io/s/magical-voice-h5gbk?file=/src/App.js – r342346 Feb 23 '21 at 12:29
  • 1
    This is because the SearchBar component is not exported by default. So you need to create a CustomComponent and import the { SearchBar } inside, then export default CustomComponent which will be lazily imported instead of directly lazily import SearchBar – Arnaud Feb 23 '21 at 18:17
  • 2
    I edited the answer for you. Please note this: I personally test it. And it is a problem with the SearchBar itself. The link below provide two examples. https://github.com/adarshpastakia/ant-extensions/tree/master/modules/searchbar The first for SearchBar, not working even if we downgrade the version. The second for FieldSelect work perfectly. – Arnaud Feb 23 '21 at 18:27
  • Ah ok, thank you! So its a problem of the library, and I can't do nothing about it? – r342346 Feb 24 '21 at 09:12
  • 1
    If you've already opened an issue just wait :-). Otherwise, there is nothing to do. Maybe you can fork, try to debug and make a pull request :-). Have a nice day – Arnaud Feb 24 '21 at 11:56
1

Is SearchBar lazyLoaded ?

const SearchBar = lazy(()=> import("mypath"))

DoneDeal0
  • 5,273
  • 13
  • 55
  • 114
  • I tried but I get this error "lazy element type must resolve to a class or function." see codesandbox: https://codesandbox.io/s/magical-voice-h5gbk?file=/src/App.js – r342346 Feb 23 '21 at 12:29