0
[SPLoaderError.loadComponentError]:
***Failed to load component "348ddc24-873a-4c72-add6-aabdb4b03432" (CrudWebPart). Original error: ***Failed to load URL 'https://localhost:4321/node_modules/react/dist/react.js' for resource 'react' in component '348ddc24-873a-4c72-add6-aabdb4b03432' (CrudWebPart). The file was not found in the server. Make sure that you are running 'gulp serve'.

https://github.com/sharemypain/simple-crud

ran:

npm i
npm i -g gulp
gulp
gulp serve

but I get the same error every time. These error logs are not very helpful and I've been stuck here for a while. I have no idea what's wrong.

5
  • did you run gulp serve?
    – willman
    Commented Feb 19, 2020 at 21:47
  • Yes, I get the error after I try to add the webpart.
    – Sayaman
    Commented Feb 19, 2020 at 21:51
  • to what page are you adding your webpart?
    – willman
    Commented Feb 19, 2020 at 21:54
  • Using on-prem workbench or online?
    – willman
    Commented Feb 19, 2020 at 21:57
  • I use the workbench on my localhost. Did you try running it?
    – Sayaman
    Commented Feb 20, 2020 at 13:19

1 Answer 1

2

I was able to get your webPart to load by downgrading the react version to 16.8.5.

change the dependencies section in your package.json to the below, then re-run npm install.

"dependencies": {
    "@microsoft/sp-core-library": "1.10.0",
    "@microsoft/sp-http": "^1.10.0",
    "@microsoft/sp-lodash-subset": "1.10.0",
    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
    "@microsoft/sp-property-pane": "1.10.0",
    "@microsoft/sp-webpart-base": "1.10.0",
    "@types/es6-promise": "0.0.33",
    "@types/react": "16.8.8",
    "@types/react-dom": "16.8.3",
    "@types/webpack-env": "1.13.1",
    "antd": "^3.22.2",
    "axios": "^0.19.0",
    "react": "16.8.5",
    "react-dom": "16.8.5",
    "react-scripts": "3.1.1",
    "redux": "^4.0.4"
  }

Once the webpart was loading, I found a few other runtime errors that I solved as follows:

you will want to change line 14 of Crud.tsx to
<Todolist spHttpClient={this.props.spHttpClient}></Todolist>

And modified the getToDosAsync at the bottom of Todolist.tsx:

getToDosAsync = (): Promise<any> => {
    let response = {};
    let promise = this.props.spHttpClient.get(`${this.props.siteUrl}/_api/web/lists/getbytitle('ToDo')/items`,
    response = SPHttpClient.configurations.v1).then(async(response)=>{ 
        debugger;
        return response.json();
    });
    return promise;

}

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.