Our state of the art Gantt chart


[REACT] Issues with Example SPFx

Post Reply

Post by ggalipeau »

I am trying to get the SPFx working of the Bryntum Gantt for Trial 4.0.8. I've read the Readme file and I've also read this post (https://www.bryntum.com/blog/using-bryntum-gantt-in-a-sharepoint-spfx-fabric-web-part/). So, according to them, all I should have to do is run:
npm i
npm install -g gulp (I skipped this because gulp is already installed globally on my environment)
gulp trust-dev-cert
gulp serve

npm i (I see issues here)
I ran npm i on the folder and it ran for a while. At the very end there was an error about an issue in the post install "49995 error Failed at the bryntum-fabric-sp-fx@0.0.1 postinstall script." So, I am pretty sure that is causing my issues.

gulp serve
I tried to run gulp serve even if I saw that issue in npm i with the post install. That didn't work. I get hundreds of errors that all say: [12:25:43] Error - [tsc] src/webparts/bryntumGantt/shared/BryntumGantt.js(1,17448): error TS1127: Invalid character. Note: this makes sense. The actual BryntumGantt.js file seems corrupted that got built.

Anyways, is the example in the trial version working? I do a lot of SPFx development. So, I am fairly sure there is no issue with my environment (at least in terms of SPFx development in React). Also, seems like your directions are pretty straight forward. So, I can't figure out why this is happening. Definitely has something to do with the "_shared" folder in React. Just seems like that is not building correctly and copying to the SharePoint environment

Thanks in advance,
Greg

FYI: Here is the relevant section of the log for the npm i failure I mentioned:

49985 verbose stack Error: bryntum-fabric-sp-fx@0.0.1 postinstall: postinstall
49985 verbose stack Exit status 1
49985 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
49985 verbose stack at EventEmitter.emit (events.js:198:13)
49985 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
49985 verbose stack at ChildProcess.emit (events.js:198:13)
49985 verbose stack at maybeClose (internal/child_process.js:982:16)
49985 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
49986 verbose pkgid bryntum-fabric-sp-fx@0.0.1
49987 verbose cwd D:\Projects\Bryntum\gantt-4.0.8-trial_2\gantt-4.0.8-trial\examples\react\typescript\sharepoint-fabric
9988 verbose Windows_NT 10.0.19042
49989 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "i"
49990 verbose node v10.23.3
49991 verbose npm v6.14.11

Post by Terence »

Hi, I can build it on Mac with node v10.19.0 however, but the problem seems to be in the postinstall. Could you try the following, my guess is that Windows has troubles making symlinks.

Change 'link' for gantt.d.ts into 'copy'.

"postinstall": {
    "node_modules/bryntum-gantt/gantt.d.ts": "copy node_modules/bryntum-gantt/gantt.module.d.ts",
    "node_modules/bryntum-gantt/gantt.stockholm.css": "copy src/webparts/bryntumGantt/resources/gantt.stockholm.scss",
    "node_modules/bryntum-gantt/fonts": "copy src/webparts/bryntumGantt/resources/fonts",
    "../../../_datasets/launch-saas.json": "copy src/webparts/bryntumGantt/resources/data/launch-saas.json",
    "node_modules/bryntum-react-shared/resources/images": "copy src/webparts/bryntumGantt/resources/images",
    "node_modules/bryntum-react-shared/src/BryntumGantt.js": "copy src/webparts/bryntumGantt/shared/BryntumGantt.js",
    "node_modules/bryntum-react-shared/src/BryntumWidget.js": "copy src/webparts/bryntumGantt/shared/BryntumWidget.js"
},

Please let me know if this works.

Post by ggalipeau »

Yep, that was the issue. After changing the postinstall from link to copy, everything worked. Thanks!

Post Reply