Algolia servers not found when build create react app for production

I am using the React Instant Search module. It works fine when am in development. The moment i create a production build by running yarn build. No hits are retrieved and when i check from Chrome Dev tools, i can see that the url to algolia is being encoded, but during development its not encoded.


Hi Joseph,

Can you create an example of your implementation using the React InstantSearch with Codesandbox.io. Start out with the template found here:

Thanks!

Its the same with sandbox, only am running yarn build for production . The code sandbox doesnt run yarn build, its running in development with yarn start so you wont see anything different.

Resolved. I was reading the config settings from the environment variables and seems when you initialize the component with those environment variables, during build the url used by the client will be encoded.

I set the environment variables for prod and dev in .env.development and .env.production.

CodeSandbox will not work for this particular case since the code there runs in dev, i can create and github repo and share to reproduce the error?

Hey @Josephk, just had a quick look at your screenshot, and it looks like you have %22 (the URL encoded form of ") in there, just before the -dsn. This is because your env variable in the .env.production likely has a stray quote at the end of the appID

Thanks i solved the issue, yes the problem was with how React reads the environment variable. However the url was not in the environment variable, only the api keys. So somehow, when i initialised the search with the api keys from the environment variable, the url will be encoded. So i moved the api keys to a config file instead of using environment variables and the issue was resolved.