1

I am trying to use react components following this tutorial. But when I load the page I am getting a bunch of errors in chrome console complaining about invalid relative path in loading react and react-dom.

enter image description here

There is one more error after these errors: enter image description here

Here is the code I am using to load tthe top place holder:

        if (this._topPlaceholder.domElement) {
            const element: React.ReactElement<IProps> = React.createElement(
              LeftNav,
              {}
            );
            ReactDom.render(undefined, this._topPlaceholder.domElement);

If I comment these lines , the error is gone. I checked the package json and node modules folder; react and reac-dom are added properly.

enter image description here

What am I missing here?

1 Answer 1

0

Found the solution Here.

Also, even if you use npm i [email protected] version 16.14.0 will be installed because npm adds ^ to package version. I observed that Windows respects ^ sign, but Linux doesn't, so if you want to use React in SPFx, you should explicitly put 16.9.0 in package.

The issue is with version of react. 16.9.0 need to be specified explicitly.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/compatibility

1
  • I tried installing the exact version of react using npm i [email protected] but gave following error.Could not resolve dependency: npm ERR! peer react@">=16.13.1 <18.0.0" from @microsoft/[email protected]
    – Yayati
    Commented Jun 7, 2023 at 5:55

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.