3

Im trying to put mapbox working on a spfx webpart. But having trouble with it when deploying the webpart to App Catalog On gulp serve, it works ok enter image description here

but when deployed to App Catalog it renders like this enter image description here

It shows up a warning on console, that the .css was not loaded, and I can see that is not present on Network tab.

Im loading the css like this

protected onInit(): Promise<void> {
SPComponentLoader.loadCss('https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css');
return super.onInit();
}

Like the example shown here: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/reference-third-party-css-styles

Improve this question
2
  • what does the warning message show ? Can you try it as protected onInit(): Promise<void> { SPComponentLoader.loadCss('https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css'); return super.onInit(); }
    – Gautam Sheth
    Commented Aug 10, 2018 at 5:13
  • That was the code i was using, the content editor replaced the <void>. Nevertheless we got to solve the issue, it wasn't just the css, even the js script wasn't being loaded on the package, we had to add the reference to the js file on node_modules in the "externals" in the config.json. Thanks ;)
    – João Silva
    Commented Aug 12, 2018 at 12:21

1 Answer 1

Reset to default
0

We got to solve the issue, it wasn't just the css, even the js script wasn't being included on the package, we had to add the reference to the js file on node_modules in the "externals" in the config.json.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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