react-script-editor-onprem - gulp serve throws Unexpected reserved word error

[Akshay-Integrano]

Disclaimer

Yes

Sample

react-script-editor-onprem

Contributor(s)

@wobba

What happened?

I see an error message when I try gulp serve. The message is as follows:

c:\spfx1\react-script-editor-onprem\node_modules@microsoft\spfx-heft-plugins\lib\plugins\devDeployPlugin\SpDevDeploy.js:165
for await (const file of filesIterable) {
^^^^^

SyntaxError: Unexpected reserved word
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:617:28)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object. (c:\spfx1\react-script-editor-onprem\node_modules@microsoft\spfx-heft-plugins\lib\plugins\devDeployPlugin\DevDeployPlugin.js:28:23)

Steps to reproduce

1. Download the source code or clone the repository
2. Make sure the NodeJs version is 8 and SPFx version is 1.4.1
3. Run npm install
4. Run gulp serve

Expected behavior

gulp serve should not throw any error and the browser window should open workbench to test the web part.

Target SharePoint environment

SharePoint Server 2019 (on-premise)

Developer environment

Windows

Browsers

• Internet Explorer
• Microsoft Edge
• Google Chrome
• FireFox
• Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

What version of Node.js is currently installed on your workstation?

v8.17.0

What version of Node.js is required by the sample?

v8 or v6

Paste the results of SPFx doctor

I get following error when I run spfx doctor commands - even the m365 version throws the following error:

C:\Users\dev\AppData\Roaming\npm\node_modules\@pnp\cli-microsoft365\dist\index.js:2
import { cli } from './cli/cli.js';
^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Function.Module.runMain (module.js:694:10)
    at startup (bootstrap_node.js:204:16)
    at bootstrap_node.js:625:3

Additional environment details

SharePoint Framework v1.4.1
Node v8.17.0
yo v3.1.0
gulp-cli v2.3.0

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[Akshay-Integrano]

@wobba Do you feel any version of the toolchain may cause this problem? If yes, can you please confirm what should be the exact versions to use?

[wobba]

Haven't done any on-prem building with SPFx in years, so not sure how best to solve it. You could always spin up a new project and copy over the code.

[Akshay-Integrano]

I will try it out this weekend. Thanks!

[fschmidteu]

I'm running in the same issue. @Akshay-Integrano have you found a solution?

[wobba]

And I want to bring the elephant into the room. Why do you need the web part? Just create a SPFx web part with the actual JavaScript code.

[Akshay-Integrano]

I'm running in the same issue. @Akshay-Integrano have you found a solution?

@fschmidteu, No. I wasn't able to make it work with a fresh solution and then porting code to it. Because it seemed like some of its code was also needed to be updated due to updated dependencies. Stakeholders wanted a quick solution then, so we had to drop it.
If you can spare some time, you can try porting the code to new solution and fix the issues. But if your requirement is something specific which may not need a generic script editor web part, you'd be better off developing a requirement specific web part.

[fschmidteu]

And I want to bring the elephant into the room. Why do you need the web part? Just create a SPFx web part with the actual JavaScript code.

Couldn't kill the elephant, this was the easy way. Thanks.