5

I have a strange problem with the component and I don't know what more can i do, I'm having this problem whenever I put the lwc inside the recordPage of a custom object but in a standard recordPage object it work also in IE 11, but in Firefox & Chrome no.

This is what it looks like in Lightning app builder:

enter image description here

But when I go back to the record page I find this problem:

enter image description here

When I display the same code in another sandbox, the component works perfectly.

How do I load the static resource styles:

import { loadStyle } from 'lightning/platformResourceLoader';
import styles from '@salesforce/resourceUrl/rep_sr_datatableStyles';

....

 renderedCallback() {
    Promise.all([
        loadStyle(this, styles)
    ]).then(() => {
        window.console.log('Files loaded.');
    }).catch(error => {
        window.console.log("Error " + error.body.message);
    });
}

rep_sr_datatableStyles => is a static resource that it have just a file .css

Improve this question
1
  • I recently discovered that "this" doesn't parse as an LWC component in a child component. The answer is to move the loadScript/loadStyle calls to the parent - at least that's what worked for me. Typically, you would pre-load all the libraries you need in your app right up front anyway. That said, it would be nice if it could be lazy-loaded.
    – Ixalmida
    Jun 5 at 14:24

2 Answers 2

Reset to default
2

This is a known issue in salesforce. https://success.salesforce.com/issues_view?id=a1p3A000001SHoDQAW

Improve this answer
3

I believe you need to specify the file inside the static resource.

If the css file were named style.css inside the zip / static resource, it'd look like this:


import { loadStyle } from 'lightning/platformResourceLoader';
import styles from '@salesforce/resourceUrl/rep_sr_datatableStyles';

....

 renderedCallback() {
    Promise.all([
        loadStyle(this, styles + '/style.css') //specified filename
    ]).then(() => {
        window.console.log('Files loaded.');
    }).catch(error => {
        window.console.log("Error " + error.body.message);
    });
}

Also, you could do away with the Promise.all if you're really only needing to only load the one file.

loadStyle(this, styles + '/style.css')
  .then(() => console.log('files loaded'))
  .catch(error => console.log("Error " + error.body.message))

Reference: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_third_party_library

Improve this answer
7
  • If you load just a file in the static resource you can use "loadStyle(this, styles)", but if you look the first image you can se that the styles is applied. The problem that i have is that if I put the component in a recordPage of a custom object I get the error(Second image) in Chroome and Firefox, but in IE11 it works everywhere.
    – Alex M.
    May 29, 2019 at 6:41
  • Gotcha. I made an lwc and uploaded css file without zip and it worked via app builder and on a record page. I made a gist of that lwc, curious to see if it works for you too: gist.github.com/jsmithdev/53e2bcdbd077f7e2fed5ee8a0ee1924f
    – Jamie Smith
    May 30, 2019 at 3:06
  • Try displaying it on a custom object record page. Because if I implement it in Account, it works, but if I create a tab for a custom object, the "loadStyle" function does not work.
    – Alex M.
    May 31, 2019 at 11:45
  • I made sobject Unicorn, made tab and seems to be working: i.imgur.com/w2Xl1wD.png
    – Jamie Smith
    May 31, 2019 at 21:09
  • Pff, I don’t understand anything. I’m having this problem whenever I use it on a custom object. It can be by the configuration of the project, the version of the sandbox or the Visual Studio?
    – Alex M.
    Jun 1, 2019 at 22:30

You must log in to answer this question.

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