I have a simple aura component with a lightning container:
<aura:component access="global" implements="flexipage:availableForAllPageTypes">
<lightning:container aura:id="ReactApp" src="{!$Resource.MyApp + '/index.html'}" onerror="{!c.handleError}" />
</aura:component>
When I built my react app, it created this index.html:
<!doctype html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="./manifest.json" />
<title>React App</title>
<link href="./static/css/main.12c31e37.chunk.css" rel="stylesheet" />
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function (l) { function e(e) { for (var r, t, n = e[0], o = e[1], u = e[2], f = 0, i = []; f < n.length; f++)t = n[f], p[t] && i.push(p[t][0]), p[t] = 0; for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (l[r] = o[r]); for (s && s(e); i.length;)i.shift()(); return c.push.apply(c, u || []), a() } function a() { for (var e, r = 0; r < c.length; r++) { for (var t = c[r], n = !0, o = 1; o < t.length; o++) { var u = t[o]; 0 !== p[u] && (n = !1) } n && (c.splice(r--, 1), e = f(f.s = t[0])) } return e } var t = {}, p = { 1: 0 }, c = []; function f(e) { if (t[e]) return t[e].exports; var r = t[e] = { i: e, l: !1, exports: {} }; return l[e].call(r.exports, r, r.exports, f), r.l = !0, r.exports } f.m = l, f.c = t, f.d = function (e, r, t) { f.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, f.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, f.t = function (r, e) { if (1 & e && (r = f(r)), 8 & e) return r; if (4 & e && "object" == typeof r && r && r.__esModule) return r; var t = Object.create(null); if (f.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: r }), 2 & e && "string" != typeof r) for (var n in r) f.d(t, n, function (e) { return r[e] }.bind(null, n)); return t }, f.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return f.d(r, "a", r), r }, f.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, f.p = "/"; var r = window.webpackJsonp = window.webpackJsonp || [], 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; a() }([])</script>
<script src="./static/js/2.be491123.chunk.js"></script>
<script src="./static/js/main.1015bdce.chunk.js"></script>
</body>
I brought my aura component onto the lightning record page for an account to see my little table I built in react. But instead of seeing my table, I get this (complains about the first script tag in the body):
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension: 'unsafe-eval' https://sfdc.azureedge.net *.visualforce.com https://ssl.gstatic.com/accessibility/ 'nonce-8e50be4d7a3378d85f497c9a385dc277b7c8b32b3673f722381b7b1a443068d0'". Either the 'unsafe-inline' keyword, a hash ('sha256-nmGfw5N3ehzrkVlMnw7qNnJmhthWaTeOqUBKW2K/m7o='), or a nonce ('nonce-...') is required to enable inline execution.
All I see for examples on getting a react component into a lightning container are: Build component, zip build, put in static resources, load index.html in lightning:container.
As far as I can see those are the exact steps I followed but I get this CSP error... It works fine when copying index.html into a VF page, but not in the lightning container.
What am I missing here to get this lightning container to work?
