warn "export 'ElasticPressProvider' was not found in '@10up/elasticpress-react'

[sharmeela]

I have installed the elasticpress-react with following npm command - (https://github.com/10up/elasticpress-react)
npm install @10up/elasticpress-react --save

After installation, I am including code in my search page as - >
import {
AutosuggestField,
RelatedContent,
SearchField,
Posts,
ElasticPressProvider,
findResultsState,
} from '@10up/elasticpress-react'

<ElasticPressProvider
node="http://elasticpress.test/__elasticsearch"
indexName="elasticpresstest-post-1"
loadInitialData={false}

 <AutosuggestField />

The error I found after compilation is as below -
warn "export 'ElasticPressProvider' was not found in '@10up/elasticpress-react'.

The file [ElasticPressProvider.js] is not in the above npm command build and I am not able to proceed since I need that wrapper.
The file is in elasticpress-react-develop\src\components\Provider\ElasticPressProvider.js location which is not bundled by "npm install @10up/elasticpress-react --save"

I have attached the screenshot of the content bundled by npm comment, Kindly let me know, how can I use this React+gastby code to work.

Regards,
Sharmeela

[nicholasio]

@sharmeela What version of the package are you using?

Can you try with 10up/elasticpress-react@next ?

npm install --save 10up/elasticpress-react@next

I'll get the next version released as stable but in the meantime you can still from that next tag.

[nicholasio]

Also if you're building a headless WordPress theme you might want to take a look at frontity and this other package: https://github.com/10up/frontity-packages/tree/develop/packages/elasticpress

[sharmeela]

@sharmeela What version of the package are you using?

Can you try with 10up/elasticpress-react@next ?

npm install --save 10up/elasticpress-react@next

I'll get the next version released as stable but in the meantime you can still from that next tag.

Hi Nicholasio,

The npm command gives below error -
npm install --save 10up/elasticpress-react@next
npm ERR! code ENOLOCAL
npm ERR! Could not install from "10up\elasticpress-react@next" as it does not contain a package.json file.

Also I have taken branch with tag "https://github.com/10up/elasticpress-react/tags -> (tag 1.2.0)" which gives below error after i command "npm run start" and does not move ahead.

@10up/elasticpress-react@1.2.0 start E:\projects\assets\elasticpress-react-1.2.0
microbundle-crl watch --no-compress --format modern,cjs

Watching source, compiling to dist:
Wrote 13.1 kB: index.modern.js.gz
11.4 kB: index.modern.js.br
Wrote 13.5 kB: index.js.gz
11.8 kB: index.js.br

How do I start this on local to check the code?

Regards,
Sharmeela

[nicholasio]

Sorry , wrong package name try this npm install --save @10up/elasticpress-react@next

[vishalkhialani]

Hi @nicholasio ,
The above command also did not work. Do you have some kind of write up which we can follow.

Thank you,
Vishal

[nicholasio]

@vishalkhialani it didn't work as in it didn't solve your problem or did it not install the package at all?

If you're saying the command did not work and thus didn't install the package, can you try manually setting the package version in package.json?

"@10up/elasticpress-react": "^2.0.0",

There's also an example app in the examples directory https://github.com/10up/elasticpress-react/blob/develop/example/pages/index.js you can reference.

Have you tried running the example app yourself and point to your own ep.io instance?

Let me know if that helps!

[sharmeela]

hi @nicholasio,

Thanks for above fix. Finally it has started to run in my project. However Search is still not giving me any output. I have attached the screenshot for your reference of console for data.

Also for record, We use Gatsby.js with React.

To check the code, I have created repo and given public access, so you can check, This is the exact package.json we use for our product and you can have a look into it.

https://github.com/sharmeela/testEllasticPress

and below is the DEMO video - >

ellasticpress_react_demo.mp4

Following is my code for integration which runs successful api call but output provided as in screenshot with not as expected search result.

const EllasticPressSearchLayer = ({ searchState, resultsState }) => {
	return (
		<div>
			
			<main>
				<ElasticPressProvider
					node="https://sharmeelajaimalani-60b5f64d4879b.clients.hosted-elasticpress.io"
					indexName="sharmeelajaimalani-60b5f64d4879b--stellalunabackdebugmein-post-1"
					loadInitialData={false}
				>
					<AutosuggestField />

				</ElasticPressProvider>
			</main>
      
		</div>
	);
};

Kindly let me know, how to fetch search records on AutoSuggest or SearchField.

[nicholasio]

Hey @sharmeela, can you confirm that your index has data? Have you indexed ElasticPress on your WordPress instance?

I was looking at your source code and notice that you also don't need findResultsState and getServerSideProps. getServerSideProps is a next.js thing.

For Gatsby I assume you only need client-side search so you can just use the components directly without using fetching the results server side.

[nicholasio]

If you set loadInitialData to true does it load any data at all? https://github.com/sharmeela/testEllasticPress/blob/main/src/pages/search.js#L44

[sharmeela]

Hi@nicholasio ,

Thank you for the update and sorry for the late response.

I have hosted the site for you to test which gives 2 rows of data after changing "loadInitialData={true}".
https://modest-fermi-3bca58.netlify.app/search/

But the search is not working as expected, typing something does not render any data. Please have a look into the video. https://nimb.ws/I6p4yr

Also find screenshot of the endpoint which is giving data.
https://nimb.ws/uObZAJ

Let me know what changes will help me get search result based on typing.

[nicholasio]

@sharmeela Hi,

Can you try going to the ElasticPress weighting dashboard on your WP instance and hitting save?

EP.io requires an authenticated request to EP.io to tell EP.io which fields can be queriedd through the autosuggest endpoint. Saving in the weighting dashboard should force the EP plugin to make that request.

[vishalkhialani]

Hi @nicholasio ,

1. We tried updating ElasticPress weighting dashboard on your WP instance and hitting save this did not address the issue.

2. We want to search for products and not posts. As you can see here the posts show up here https://modest-fermi-3bca58.netlify.app/search/ see for ref - https://nimb.ws/FbCkQ2

3. We think you don't have the react frontend component for Products. The component directory does not have it listed.
   Please see the list of components you provide https://github.com/10up/elasticpress-react/tree/develop/src/components

4. Your wp plugin has a configuration to index products in woo-commerce ref - https://nimb.ws/aGAT6r
   However, you might not have a react component to search the index directly. Please advice.

5. fyi we are using "@10up/elasticpress-react": "^2.0.0",

Thankyou,
Vishal / Sharmeela

[nicholasio]

@vishalkhialani Ah yeah, this package doesn't officially support querying/searching products yet. It's definitely something we do want to support.