1

I am getting 404 not found error when loading the chartjs library. Below is the code I have for loading it onto my code. I have read on the web saying the v2.9.3 is not locker service compatible, so as of now I have the 2.7.3 uploaded and also I have the js file uploaded directly not zipped. Also putting it in here that I am the platformresourceloader to laod the leaflet libraries as well.

import {
  loadStyle,
  loadScript
} from 'lightning/platformResourceLoader';
import leaflet from '@salesforce/resourceUrl/leaflet'
import ChartsJS from '@salesforce/resourceUrl/ChartsJS';
      getAddressCharts(e) {
        // console.log(e.target.dataset.id);
        Promise.all([
            loadScript(this, ChartsJS + '/Chart.js')
          ]).then(() => {
                //d something
          .catch(error => {
            console.log("Cant load CHARTJS");
          });
      }

Below are the screenshots: 404 Not Found: enter image description here enter image description here

EDIT: After apply sfdcfox solution I was able to get rid of the 404 not found error. but now I get 'Cannot read property 'getContext' of null'

 <template if:true={showCharts}>
          <lightning-card title="Sand Samples" icon-name="utility:chart" key={address.key}>
            <div class="slds-grid slds-wrap slds-grid--pull-padded">
              <canvas class="linechart" lwc:dom="manual"></canvas>
            </div>
          </lightning-card>
        </template>

  @track showCharts = false;

  getAddressCharts(e) {
    // console.log(e.target.dataset.id);
    Promise.allSettled([
        loadScript(this, ChartsJS)
      ]).then(() => {
        console.log("Charts Loaded");

    this.showCharts = true;
    const ctx = this.template.querySelector('canvas.linechart').getContext('2d');
    this.chart = new window.Chart(ctx, this.config);
    this.chart.canvas.parentNode.style.height = '100%';
    this.chart.canvas.parentNode.style.width = '100%';
  })
  .catch(error => {
    console.log(error);
  });

}

1 Answer 1

3

If it's not a zip, don't add a path at the end:

loadScript(this, ChartsJS)

All the examples in the docs use a ZIP file, but if you don't have one, no file name is required.

14
  • Thanks @sfdcfox, I was able to get rid of the 404 error, but still I am not able to load the chart. I am loading the chart on a button click, Now it says 'Cannot read property 'getContext' of null'. Could you please advise
    – sumchans
    Commented Apr 14, 2020 at 20:17
  • Could this be related to the chart library I have loaded?
    – sumchans
    Commented Apr 14, 2020 at 20:25
  • 1
    @sumchans const ctx = this.template.querySelector('canvas.linechart').getContext('2d'); seems to be the culprit? Make sure you're getting the correct element. Also, is it marked as lwc:dom="manual"? You'll probably need that to avoid any locker service errors.
    – sfdcfox
    Commented Apr 14, 2020 at 20:46
  • 1
    @sumchans Actually, since you only have a fragment, would it be possible to send me a minimum viable reproduction I can deploy to my org? That'd save me a bit of time.
    – sfdcfox
    Commented Apr 14, 2020 at 22:49
  • 1
    @sumchans You can't package static resources on the playground. Can you wrap it up in a package or just download the files, zip it up, and send it to me? My email's on my profile.
    – sfdcfox
    Commented Apr 14, 2020 at 23:03

You must log in to answer this question.

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