1

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?

1

You can try by checking below 2 issues:

  1. If static folder and index.html are in same level then, remove ./. Example: <script src="static/js/main.1015bdce.chunk.js"></script>. Do same for other script and stylesheet (There seems to be kind of bug here. In my dev org its working only without dot but in sandbox its working only with dot. So, better to check what is actually working in specific org - not sure if its related to dev org/sandbox/prod) .
  2. Remove inline script in HTML and have separate JS file.

Example:

<html>

    <head>
        <title>Sample React App</title>
        <link href="css/salesforce-lightning-design-system.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <h1>Sample React App</h1>
        <hr>
        <div id="react"></div>
        <input />
        <script src="build/search.bundle.js"></script>
        <script src="mock.js"></script>
        <script>
            // some JS
            console.log(`THIS IS INLINE SCRIPT. 
                THIS SHOULD BE IN SEPARATE JS FILE AND REFERRED HERE.`);
        // some JS
        </script>
    </body>

</html>
| improve this answer | |
  • They are in the same level but it couldn't find them until I put './'. Also, so there is an extra step to react development, where you have to pull the inline script the build produces into it's own file? That's somewhat annoying – Tyler Dahle Aug 27 '19 at 16:15
  • I tested this sample. It does not throw error when ./ is not there. Not sure how its behaving differently. However pls test with both ways – salesforce-sas Aug 27 '19 at 16:19
  • Ok I will try to put the inline in a separate js file. But yeah, my console was blowing up with 'not found' errors until I put the dot. – Tyler Dahle Aug 27 '19 at 16:21
  • So moving the inline javascript to a separate file in my static resource got my table to show up! It is just unfortunate that that has to be done, it makes doing any updates to the component and getting it back into salesforce so tedious :/. But did confirm my scripts won't load without the dot in front of the slash. – Tyler Dahle Aug 27 '19 at 18:10
  • Ok thanks @TylerDahle. Will add about dot in answer. – salesforce-sas Aug 27 '19 at 18:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.