[BUG] Unable to setup front end for consumer due to js error

[jithinjosejacob]

Issue: [BUG] Unable to setup front end for consumer due to js error

Steps to Repo

Clone repo to local and set up the consumer using npm install and npm start

Platform: Windows

User gets and error : Failed prop type: Invalid prop children of type array supplied to Layout, expected a single ReactElement type

[mefellows]

Thanks Jithin. It should be fairly ease to resolve, my guess is we haven't pinned a react dependency. If you could try a npm ci with a fresh node modules to see if it works it might be as simple as that

[mefellows]

See also pact-foundation/pact-workshop-js#3

[jithinjosejacob]

i am getting the same error as i mentioned in the initial bug, it looks like not unrelated to above workshop issue, tried in mac as wel

l

[mefellows]

Actually, I think the issue here is that you don't have your provider running and the react warning is just that. The canonical provider is https://github.com/pactflow/example-provider but you can mix and match many (see https://docs.pactflow.io/docs/examples/).

[mefellows]

I can't reproduce with those instructions.

I can see the bug report is http://localhost:3000/error. If the provider is unavailable when you first open the app, it will route to this page. Can you please show the network tab or capture a full HAR from the chrome dev tools when you navigate to /?

[jithinjosejacob]

Provider is running , then only i opened the consumer

No specific network erros as well.

Note: I will try to setup the tests and see if they are working fine , as i am trying to run the contract test scenarios

[mefellows]

What happens if you open in another browser? I've noticed sometimes Chrome will redirect to /error because it previously detected a redirect.

Can you please take a full HAR trace:

1. Go to the network tab
2. Set "preserve log" to true
3. navigate in the same window to http://localhost:3000
4. Choose the down arrow to export a HAR

Please paste the HAR here.

Feel free to also take a short video (command+shift+5) and upload.

[jithinjosejacob]

There is a network error on products call, loom- https://www.loom.com/share/08a190061d4549d5bafe32bc3657b3cf shared the har in slack

[mefellows]

Thanks for that.

I can see the problem - it’s trying to send requests to localhost:3001.

The example is actually part of this workshop, and one of the steps describes how to configure it to point at the locally running provider: https://docs.pactflow.io/docs/workshops/ci-cd/set-up-local-development/run-the-applications

I'm not sure why it doesn't use the default, but likely there was a good reason.

I’ll update the README so people coming from a different source will know what to do (or I'll update the api.js file to change the default if it makes sense).

Hope this helps!

I'll leave it open so you can confirm.

[jithinjosejacob]

thanks, this works, probabaly good to update readme

[mefellows]

Have updated the readme. Note, there was already a Usage section that linked to how to run this in detail, however I've specifically brought in the section on how to run it locally.