1

I have developed a webpart to get list of news title and data. I wanted to change the name shown in sharepoint thus I created another project a web-part with react.

  1. yo@ microsoft/sharepoint
  2. gulp serve to check localhost and online workbench works
  3. copy the .tsx .scss and Props.tx contents to newly created project
  4. carefully checked the class name, import name

Problems: Unable to load the webpart on the online workbench.

localhost:4321/node_modules/react/dist/react.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
localhost:4321/node_modules/react-dom/dist/react-dom.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
sp-webpart-workbench-assembly_en-us_5e860bd4437e10b51e6df117464b1e55.js:20 Uncaught (in promise) Event
sp-webpart-workbench-assembly_en-us_5e860bd4437e10b51e6df117464b1e55.js:20 Uncaught (in promise) Event
localhost:4321/dist/latest-news-web-part.js:210 Uncaught (in promise) TypeError: Cannot read property 'get' of undefined
    at LatestNews.<anonymous> (localhost:4321/dist/latest-news-web-part.js:210)
    at step (localhost:4321/dist/latest-news-web-part.js:157)
    at Object.next (localhost:4321/dist/latest-news-web-part.js:138)
    at localhost:4321/dist/latest-news-web-part.js:132
    at new Promise (<anonymous>)
    at 4uSA.__awaiter (localhost:4321/dist/latest-news-web-part.js:128)
    at LatestNews.4uSA.LatestNews.getListData (localhost:4321/dist/latest-news-web-part.js:199)
    at LatestNews.4uSA.LatestNews.loadNews (localhost:4321/dist/latest-news-web-part.js:189)
    at new LatestNews (localhost:4321/dist/latest-news-web-part.js:175)
    at ul (sp-webpart-workbench-assembly_en-us_5e860bd4437e10b51e6df117464b1e55.js:21)

I attempted

  • change the launch.json to change online workbench
  • change serve.json "https": true, to "https": false,

Please kindly enlighten me how to solve this problem?

Random I.T
  • 113
  • 1
  • 11
  • 2
    Did you copy the package.json from the old project to the new one and run npm install to make sure all the dependencies are installed? – Dylan Cristy Feb 04 '20 at 16:47

1 Answers1

0

Thanks Dylan, I found out a very very silly act which is forgetting to update the xxxWebPart.ts outside my component folder.

My pagecontext: this.context.pageContext, SPHttpClient: this.context.spHttpClient was defined in the Props, called in the tsx class but wrong variable name in the Webpart which lead to unable to get.....

Random I.T
  • 113
  • 1
  • 11