Create-react-app: How to rename webpackjsonp to prevent conflicting two app on same page?

[bagau]

Hi all. I have conflicting two app on same page. And one of my apps don't working without write errors to console.

I'm using latest create-react-app. Earlier version of create-react-app was build one js file with anonymous function inside.

The latest version of create-react-app builds few js file, and every file begin with checking/changing webpack global variable webpackjsonp.

I use two (and more) application on same page. Every app use one webpack global variable.

I can do eject and rename this variable as webpackjsonp2. But eject it's not so good.
My question is: how I can rename webpackjsonp variable without ejecting my react project?

[viankakrisna]

i think you could do search and replace on the generated output. this npm package will probably help https://www.npmjs.com/package/replace

[bagau]

Thank you very much. It was helpful for me. I will write below about my steps.

1. I installed npm module 'replace' globally and as dev-dependency.
2. In the application root folder I create file postbuild.js.

var replace = require("replace");

replace({
  regex: "webpackJsonp",
  replacement: "webpackJsonp_" + Math.random().toString(36).substring(7),
  paths: ['build/static/js'],
  recursive: true,
  silent: true,
  includes: "*.js"
});
console.log('webpackJsonp renamed');

This script rename variable with adding random string at the end.

1. The script running automatically after build. For this I modificate package.json file.

"scripts": {
...
"build": "react-scripts build && node postbuild.js",
...
}