Sp-dev-docs: React problem with SharePoint hosted Workbench (On-Prem 2019)

[AndreyFedotov]

Category

• [ ] Question
• [ ] Typo
• [x] Bug
• [ ] Additional article idea

Expected or Desired Behavior

I would like to test my Client WebPart with Sharepoint page context. So I'm using SharePoint hosted Workbench: http://shp-dev1/sites/testWeb/_layouts/15/workbench.aspx

Observed Behavior

I'v got an error in browser when I try to add simple HelloWorld WP to my On-Prem 2019 Workbench page:

_> [SPLoaderError.loadComponentError]:

*Failed to load component "fe735b47-53a5-4b5f-98ae-6ce4c3d2fce0" (HelloWorldWebPart).
Original error: *Failed to load URL 'https://localhost:4321/node_modules/react/dist/react.js' for resource 'react' in component 'fe735b47-53a5-4b5f-98ae-6ce4c3d2fce0' (HelloWorldWebPart). The file was not found in the server.
Make sure that you are running 'gulp serve'.

*INNERERROR:
*Failed to load URL 'https://localhost:4321/node_modules/react/dist/react.js' for resource 'react' in component 'fe735b47-53a5-4b5f-98ae-6ce4c3d2fce0' (HelloWorldWebPart). The file was not found in the server.
Make sure that you are running 'gulp serve'
_

Steps to Reproduce

1) download latest yo generator (1.7)
2) select 'SharePoint 2019 onwards, including...' as a target
3) select reactJS
4) update config.json by setting
"initialPage": "http://shp-dev1/sites/testWeb/_layouts/15/workbench.aspx"
5) gulp serve

When Workbench is hosted locally - there is no problem!

[StfBauer]

In the 'serve.json' file is a setting to use HTTPS or HTTP. Since your portal is and workbench is running on HTTP you need to set this setting to false too.

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": false,
  "initialPage": "https://localhost:5432/workbench",
  "api": {
    "port": 5432,
    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
  }
}

You target the launch page ('initialPage') to your workbench but the assets will be served by the local web server launch through 'gulp serve'.

[AndreyFedotov]

Setting "https": false give me another error:

GET https://localhost:4321/temp/manifests.js net::ERR_CONNECTION_CLOSED

sp-webpart-workbench-assembly.js?uniqueId=2g4QD:105 Failed to load debug manifests: Error: Error loading https://localhost:4321/temp/manifests.js
XHR error loading https://localhost:4321/temp/manifests.js

I see the problem in a path to _react.js_:

• Local Workbench load reactJs from here:
  https://localhost:4321/node_modules/@microsoft/sp-loader/node_modules/react/dist/react.js
• SP-hosted Workbench try to find it here:
  https://localhost:4321/node_modules/react/dist/react.js

[StfBauer]

@AndreyFedotov can you share your serve.json?

[AndreyFedotov]

{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "http://shp-dev1/sites/testWeb/_layouts/15/workbench.aspx",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
}

[StfBauer]

I was able to reproduce your behaviour and got the same result. I am afraid the only option you have right is to create and assign a self-signed cert to your SharePoint. After that and switching the 'server.json' back to serve via HTTPs I was able to debug the web part.

[AndreyFedotov]

@StfBauer nothing changed(

{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://shp-dev1/sites/testWeb/news/_layouts/15/workbench.aspx",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
}

[StfBauer]

So the error message says you should make sure that your gulp serve is running.
Sorry to ask. Is it running?

[AndreyFedotov]

yes, of course it's running)

error text is correct - react folder (_/node_modules/react_) really do not contains dist folder:

[andrewconnell]

@AndreyFedotov In an effort to eliminate things, have you tested it in a SharePoint Online hosted workbench?

[AndreyFedotov]

@andrewconnell I'v just tested the same HelloWorld client web part in a SPO hosted workbench - it's working good.
SP2019 workbench still give me an error((

[StfBauer]

When you select the SharePoint 2019 option in the 'package.json' ReactJS version 16 is referenced after I downgraded it to ReactJS version 15 I was able to host the web part in SharePoint 2019 workbench.

I simply changed the following dependencies in 'package.json':

"dependencies": {
    "react": "16.3.2",
    "react-dom": "16.3.2",
    "@types/react": "16.4.2",
    "@types/react-dom": "16.0.5",
...

to:

"dependencies": {
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "@types/react": "0.14.46",
    "@types/react-dom": "0.14.18",
    ...

After the downgrade in the package.json. I performed an npm install again. Probably an npm update should have the same result.

Relaunching workbench through gulp serve and I was able to load the web part correctly.

It seems like React16 is not yet supported by SharePoint 2019 workbench.

[andrewconnell]

I doubt SP2019 will support React16... SP2019 is from v1.4.1 which is January 2018. They didn't start rolling React v16 to SPO until just recently. I doubt we'll see React16 on SP2019 anytime soon, if ever.

[AndreyFedotov]

@StfBauer your solution helps me a lot. Thanks!

[andrewconnell]

@AndreyFedotov Cool... so ok to close this issue as resolved?

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues