1

Have an LWC component that loads the @carbon/charts UMD bundle which is in force-app/main/default/staticresources/carboncharts. The renderedCallback() is throwing this error:

[Lightning Web Security: Cannot access fullscreenEnabled.]
Un()@https://static.lightning.force.com/usa478.sfdc-lywfpd/auraFW/javascript/YWYyQV90T3g3VDhySzNWUm1kcF9WUVY4bi1LdGdMbklVbHlMdER1eVVlUGcyNDYuMTUuNS0zLjAuNA/aura_prod.js:84:2766
{anonymous}()@https://static.lightning.force.com/usa478.sfdc-lywfpd/auraFW/javascript/YWYyQV90T3g3VDhySzNWUm1kcF9WUVY4bi1LdGdMbklVbHlMdER1eVVlUGcyNDYuMTUuNS0zLjAuNA/aura_prod.js:108:11031
apply()@https://static.lightning.force.com/usa478.sfdc-lywfpd/auraFW/javascript/YWYyQV90T3g3VDhySzNWUm1kcF9WUVY4bi1LdGdMbklVbHlMdER1eVVlUGcyNDYuMTUuNS0zLjAuNA/aura_prod.js:108:52299
{anonymous}()@[native code]
apply()@[native code]
{anonymous}()
{anonymous}()
{anonymous}()
eval code()
{anonymous}()
global code()@blob:https://spotlightai.lightning.force.com/20a90fa9-c0c3-49bf-907f-c291653c7ac2:1:23

Carbon Charts has a feature we're not using that allows a chart to be displayed fullscreen. My guess is that Lightning Web Security sees the feature in the UMD bundle during loadScript(). Any thoughts on how to get around this? Probably cannot convince IBM to remove the feature from Carbon Charts.

In case this is helpful, here's the LWC JavaScript...

import { api, LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import carboncharts from '@salesforce/resourceUrl/carboncharts';
import IMAGES from '@salesforce/resourceUrl/images';

export default class Radar extends LightningElement {
  carbonChartsInitialized = false;
  chart = {};
  logo = IMAGES + '/small.svg';
  @api radarData = [
    {
      group: 'Score',
      letter: 'Metrics',
      score: 50
    },
    {
      group: 'Score',
      letter: 'Economic Buyer',
      score: -10
    },
    {
      group: 'Score',
      letter: 'Decision Criteria',
      score: 25
    },
    {
      group: 'Score',
      letter: 'Decision Process',
      score: 0
    },
    {
      group: 'Score',
      letter: 'Paperwork',
      score: 25
    },
    {
      group: 'Score',
      letter: 'Identify Pain',
      score: 100
    },
    {
      group: 'Score',
      letter: 'Champion',
      score: -5
    },
    {
      group: 'Score',
      letter: 'Competition',
      score: 100
    }
  ];

  async renderedCallback() {
    if (this.carbonChartsInitialized) return;

    // Loading fails because Lightning Web Security: Cannot access fullscreenEnabled
    try {
      await Promise.all([
        loadScript(this, `${carboncharts}/bundle.umd.js`),
        loadStyle(this, `${carboncharts}/styles.min.css`)
      ]);
  
      this.initializeCharts();
    } catch (err) {
      console.error(err);
    }
  }

  initializeCharts() {
    const options = {
      radar: {
        alignment: 'center',
        axes: {
          angle: 'letter',
          value: 'score'
        }
      },
      resizable: true,
      data: {
        groupMapsTo: 'group'
      },
      legend: {
        enabled: false
      },
      toolbar: {
        enabled: false
      },
      height: '230px',
      width: '100%'
    };

    try {
      const chartHolder = this.template.querySelector('div.radar-chart');
      this.chart = new window.Charts.RadarChart(chartHolder, { data: this.radarData, options });
      this.carbonChartsInitialized = true;
    } catch (err) {
      console.error(err.message);
    }
  }
}

UPDATE: Went to https://developer.salesforce.com/docs/component-library/tools/lws-console and pasted in the fullscreenEnabled check in @carbon/charts found here: https://github.com/carbon-design-system/carbon-charts/blob/master/packages/core/src/configuration.ts#L165

Sure enough, it gives me the message...

enter image description here

Just submitted a PR for @carbon/charts changing

const isFullScreenEnabled =
    typeof document !== 'undefined' &&
    (document['fullscreenEnabled'] ||
        document['webkitFullscreenEnabled'] ||
        document['mozFullScreenEnabled'] ||
        document['msFullscreenEnabled'])

to

let isFullScreenEnabled = false

try {
    isFullScreenEnabled =
        typeof document !== 'undefined' &&
        (document['fullscreenEnabled'] ||
            document['webkitFullscreenEnabled'] ||
            document['mozFullScreenEnabled'] ||
            document['msFullscreenEnabled'])
} catch (e) {
    console.warn('Fullscreen capabilities check failed: ', e.message)
}

UPDATE UPDATE: Carbon Charts 1.15.4 UMD bundle works fine in a Salesforce Lightning Web Component.

2 Answers 2

1

This is a security feature, as outlined in the LWS Distortion Viewer. Basically, to make sure their customers are safe from phishing attacks, salesforce.com has blocked this feature entirely. Note that this is a runtime error, meaning Carbon Charts is attempting to access it (probably for feature detection). Aside from convincing either IBM or salesforce.com to change their framework code, your only real choices are to manually patch the code or use a different chart framework. Other frameworks that should work include chart.js and D3.js.

1
0

I am seeing a different issue when I try running this code. I get through the resource loading but am stopped at this.chart = new window.Charts.RadarChart. I get an error stating that window.Charts.RadarChart is not a constructor. This seems to get past any errors when loading the script.

Separately, have you tried adding the following to options? I wonder if you can turn off the toolbar entirely or just the fullScreenMode button and avoid the validation error.

      toolbar: {
        enabled: false
      },
2
  • Interesting. Did you add Carbon Charts UMD bundle (and styles.min.css) as static resources to the SFDX project? But the idea of turning off the toolbar is a good one. Commented Feb 7 at 21:58
  • If you look at the code sample above, toolbar is disabled in the options. Commented Feb 8 at 3:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .