2

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.

rocky
  • 7,506
  • 3
  • 33
  • 48
marjanatwork
  • 21
  • 1
  • Could you describe more in detail what files are you pushing to the bitbucket? And how do you make a deployment from the bitbucket to the hosting? – Simply007 Mar 25 '19 at 19:39
  • 1
    You shouldn't change the package.json of your dependency. Since 'kentico-cloud-delivery-sdk.browser.umd.min.js' is pretty standard umd javascript, you can import it directly in react - instead of using 'import from 'kentico-cloud-delivery' you can impot directly from 'kentico-cloud-delivery/_bundles/_bundles/kentico-cloud-delivery-sdk.browser.umd.min' – Enn Mar 25 '19 at 20:07

3 Answers3

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!

noname
  • 227
  • 2
  • 7
  • It is NOT the general package.json which is usually located on the root of a project, it is the kentico-cloud-delivery package.json inside the node_modules, so I think I have to push it in Bitbucket, but I don't know how? – marjanatwork Mar 25 '19 at 13:39
  • In that case, contact your seniors and tell them about your specific problem. The way I see it is you can either push your version of kentico-cloud-delivery or make a PR if it is open source. – noname Mar 25 '19 at 21:48
1

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"
  }
  ...
}
Simply007
  • 444
  • 3
  • 14
1

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

Simply007
  • 444
  • 3
  • 14