How to push changes in package.json of kentico-cloud-delivery of node_modules into bitbucket

Question

According to the Kentico technical support adviser, in order to get my create-react-app application rendered on IE11, I had to change the following line of code inside the node_modules -> kentico-cloud-delivery -> package.json file:

"main": "./_bundles/kentico-cloud-delivery-sdk.browser.umd.min.js"

After this change, my react application is rendering on my local IE, but the problem is that how can I push this change into the bitbucket so that the react application could be rendered on IE11 on a server as well.

Regarding that usually, we never push the node_modules into bitbucket and put it in .gitignore file, would you please let me know how can I resolve this problem. Note: My project is a create-react-app application.

Answer 1

By not pushing your npm-modules to a bitbucket server it means that the application running there will fetch packages from a list in a file usually called package.json. So, you are probably pushing a .json file to a bitbucket which contains all dependency information and which you can edit to render your app in IE11.

Cheers!

Answer 2

I would like to link the issue where the advised workaround is to set react-scripts load appropriate package and the linked issue for all the context.

The issue itself is caused because of parse5 library does not publish ES5 code to npm and therefore the build fails.

• So the root cause of this issue is the parse5 library.

Possible solutions

1) The general recommendation from create-react-app is to upgrade to v.2+ and this is quoted also on the FAQ section of Kentico Cloud javascript SDK.

2) If you want to place the workaround despite all recommendations because it is a manual change to the automatically managed node_modules you need to assure that the change of the package is preserved on the server before the build is made. So after npm install/yarn you would edit the package.json file in node_modules.

The script (named i.e. workaround.js written in node) would look like:

const fs = require('fs');
const KCPackagePath = 'node_modules/kentico-cloud-delivery/package.json';
const package = require(KCPackagePath);

package.main = "./_bundles/kentico-cloud-delivery-sdk.browser.umd.min.js"

fs.writeFile(configPath, JSON.stringify(package, undefined, 2), function (err) {
  if (err) {
    console.error('Error while writing to file: ' + KCPackagePath);
    throw err;;
  }
  console.info('Package was successfully updated.')
});

and define a script in package.json in your app from

{
  ...
  "scripts": {
    "workaround": "node workaround.js"
  }
  ...
}

Answer 3

The exact answer to the question of how to ignore one file in the repository and ignore the rest in the folder is using ! pattern format:

node_modules
!node_modules/kentico-delivery-sdk/package.json

!BUT! npm install/yarn command would still replace the package.jsoncontent