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

  • 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 Aug 10 '18 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 Aug 12 '18 at 12:21
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.

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.