SPFX Error loading webpart

Question

I'm trying to run the SharePoint framework example from GitHub SharePoint/sp-dev-fx-webparts and I'm having different behaviours between my local workbench and the SharePoint Online workbench in my tenant. In my local workbench everything works fine but online I got this error:

[SPWebPartErrorCode.ScriptLoadError]:: Unable to load web part WebPart.undefined.3f4f67ef-ef1a-48df-8229-a7e77100c0f4,Error: 
***Failed to load component "f3488557-fde2-4400-bbab-9660bd8e5d52" (undefined). Original error: 
***Failed to load entry point from component "f3488557-fde2-4400-bbab-9660bd8e5d52" (undefined). script resources due to: {1}. 

CALLSTACK:: Error 
   at t [as constructor] (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-02-17.019/sp-loader_en-us_c7a5ee2faf8f15c3c9ab1ecc5e7db21d.js:57:21740) 
   at new t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-02-17.019/sp-webpart-base_en-us_f7b0b90820799ba53083111c72956e29.js:47:22746)

My gulp serve is running, but looking at the network traffic, I can see that the webpart in my SharePoint Online is receiving a 404 error requesting http://localhost:4321/angular-secure-call.bundle while in my local workbench the webpart is requesting http://localhost:4321/dist/angular-secure-call.bundle.js

Am I missing something?

Answer 1

The problem is that you need to package all your css, scripts and images and distribute it to a cdn. The package that you deploy to the SharePoint tenant does not include these.

https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/deploy-web-part-to-cdn

Answer 2

I had a similar problem, and using the work bench under a development site collection resolved it. Note that this is contrary to the current documentation.
Error when displaying HelloWorld web part in tenant workbench.

Answer 3

Did you resolve this?

Often if I run gulp clean this error gets resolved.

It cleans up some .scss.ts files that cause issues.

Answer 4

I my case, I found last Slash "/" in my cdn Path.

Remove the CDN Folder and Create with New Name.

Remove App from Catalog.

Use Clean, Buil, Clean, bundle --ship and Package-Soution --ship.

and it works.

I am sharing so that I could remember and it may help others.

Answer 5

As psafth and webtechy user said it could be how,where and why or why not the scripts and scss is loaded. However until then if you change or alter the scss in any way you may get this and for me it's usually a case doing Clean,Build,Clean,Clean, Build. As much as you need to ;-)