Main field in package.json causing SSR build to fail

[joeynimu]

I am trying to integrate your js client using gatsby and my builds are failing because your package.json doesn't have a main field, only a browser field. Any reason why this is omitted?

[OndraFiedler]

Hi @joeynimu, according to the NPM specification of package.json the browser field should be used instead of the main field as the JS client is meant for the client side. Maybe this Gatbsy issue might be related https://github.com/gatsbyjs/gatsby/issues/3192?

Of course it is not a nice solution, but perhaps you can fork our repository and change browser to main in order to make it work with gatsby?

[OndraFiedler]

@joeynimu Can we consider the solution with fork as working and close the issue?

[joeynimu]

@OndraFiedler hey I forked the package added the main field but it still didn't fix it.

[joeynimu]

Before publishing your package, are there any "pre-publishing" scripts that need to run?

[OndraFiedler]

There should be no "pre-publishing" scripts needed. Can you please give us more info on how you use the library and what exact error is produced? Ideally exact steps for reproduction of the issue.

[joeynimu]

I am using the library as documented on the docs. I want to log user interactions (product views, purchases, etc). Our e-commerce FE is built with gatsby. On dev mode the library works as expected, the problem comes in when doing a build when generating server-side pages. I get the below error;

info bootstrap finished - 12.833 s
⠀
success Building production JavaScript and CSS bundles - 30.780s
success Rewriting compilation hashes - 0.015s
success run queries - 31.344s - 17/17 0.54/s

 ERROR #98123  WEBPACK

Generating SSR bundle failed

Can't resolve 'recombee-js-api-client' in '/Users/joey/projects/m-commerce-web-app/src/utils'

File: src/utils/recombee.js

One of the reasons could be that your package doesn't have a main field in the package.json file.

Here is a simple reproduction for that. Run yarn build on the terminal

[OndraFiedler]

Thanks for providing the script for reproduction, it was really helpful!

We managed to build the projects by: 1) Changing browser -> main in package.json of recombee-js-api-client.

• As browser instead of main is according to specs, please create a fork with main entry 2) Removing gatsby-node.js (custom Webpack config of recombee-js-api-client for build-html stage)

Then the project was built successfully:

success Building production JavaScript and CSS bundles - 8.364s
success run queries - 8.500s - 6/6 0.71/s
success Building static HTML for pages - 1.019s - 4/4 3.92/s
info Done building in 12.394 sec

Please close the issue if this now works for you.

[joeynimu]

I forked the repo here and made the changes you proposed. The package can be found here. I have a problem whereby my forked package doesn't have the src directory upon installing it. Please see the screenshot showing the two directories. Notice the recombee-js-api-client-for-gatsby package doesn't have the src directory and therefor after importing it, it doesn't get resolved. Is there a command you run before publishing? Is there something I am missing? Bare with me for I have never published a package before.

[OndraFiedler]

@joeynimu I'm glad you made it work for you ;)

[joeynimu]

@OndraFiedler well, there is that issue I mentioned above. Still trying to resolve it. If you have any ideas, let me know.

[OndraFiedler]

@joeynimu Maybe you are just using wrong import? With your custom package it should be:

import recombee from "recombee-js-api-client-for-gatsby"

The example can be built successfully with this change.

[joeynimu]

@OndraFiedler I sorted this out by pointing the main field to the dist folder like so;

 ...
 "main": "./dist/index.js"
 ...

Can your API take multiple items instead of doing a forEach? Especially when adding purchases?

[OndraFiedler]

@joeynimu It is currently not possible in the Javascipt SDK. However, the requests to Recombee should run in parallel, so it hopefully should not be problem to send multiple requests. If you mean sending a lot of purchases from a transaction history, please use a server side SDK and use Batch requests.