I am trying to load a React component dynamically into another application (also a simple React app) but cannot get the index.js to be run.
I am somewhat orienting on this article, but that's actually not the question.
I stumbled upon the fact that that the generated enormous JS function that is generated to the index.html is somehow the entry point for my index.js to be called.
<!doctype html>
<html lang="en">
<head>
<!-- head stuff here -->
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- this is the function I am talking about -->
<script>!function (c) { function e(e) { for (var r, t, n = e[0], o = e[1], u = e[2], a = 0, l = []; a < n.length; a++)t = n[a], Object.prototype.hasOwnProperty.call(i, t) && i[t] && l.push(i[t][0]), i[t] = 0; for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (c[r] = o[r]); for (s && s(e); l.length;)l.shift()(); return p.push.apply(p, u || []), f() } function f() { for (var e, r = 0; r < p.length; r++) { for (var t = p[r], n = !0, o = 1; o < t.length; o++) { var u = t[o]; 0 !== i[u] && (n = !1) } n && (p.splice(r--, 1), e = a(a.s = t[0])) } return e } var t = {}, i = { 1: 0 }, p = []; function a(e) { if (t[e]) return t[e].exports; var r = t[e] = { i: e, l: !1, exports: {} }; return c[e].call(r.exports, r, r.exports, a), r.l = !0, r.exports } a.m = c, a.c = t, a.d = function (e, r, t) { a.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, a.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, a.t = function (r, e) { if (1 & e && (r = a(r)), 8 & e) return r; if (4 & e && "object" == typeof r && r && r.__esModule) return r; var t = Object.create(null); if (a.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: r }), 2 & e && "string" != typeof r) for (var n in r) a.d(t, n, function (e) { return r[e] }.bind(null, n)); return t }, a.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return a.d(r, "a", r), r }, a.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, a.p = "/search/"; var r = window.webpackJsonpsearch = window.webpackJsonpsearch || [], n = r.push.bind(r); r.push = e, r = r.slice(); for (var o = 0; o < r.length; o++)e(r[o]); var s = n; f() }([])</script>
<script src="/search/static/js/2.360c2576.chunk.js"></script>
<script src="/search/static/js/main.f6fe58e3.chunk.js"></script>
</body>
</html>
Currently I am only including the main.js, this is why my prototype does not work, so I would like to understand what the index.html is actually doing to recreate it in the importing system.
I am not able to find any documentation to what this javascript is actually doing. Can anyone help me find some hints of what this function is doing?
The project is a simple create-react-app application. No further configuration is done, but the "homepage" attribute set in package.json.
Found the answer. Actually this post got me into the right direction.
The function is the inlined runtime chunk, to save some network traffic. There is an actual Webpack plugin for that that can be set by env-variable like this
INLINE_RUNTIME_CHUNK=false
This was implemented due to this reported issue.
The code from reacts webpack.config.js is the following:
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
// https://github.com/facebook/create-react-app/issues/5358
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),