giovedì 5 settembre 2019

Utilizzare Kendo React in spfx 1.8 (e pbiviz: PowerBI Visual Tools)

Kendo React è una suite di controlli basati su React della Progress (vedi qui). Per utilizzarli in una soluzione Sharepoint framework (spfx) 1.8, va seguito il tutorial a questo link. Unico accorgimento in più rispetto  al tutorial: è necessario installare il typescript 3.4.2. I passi da seguire sono:

  • eseguire npm install typescript@3.4.2
  • eseguire npm install @microsoft/rush-stack-compiler-3.4
  • sostituire tutte le occorrenze di "@microsoft/rush-stack-compiler-2.7": "^0.4.0" con "@microsoft/rush-stack-compiler-3.4": "^0.1.20"
  • sostituire nel file tsconfig.json "extends": "./node_modules/@microsoft/rush-stack-compiler-2.7/includes/tsconfig-web.json" con "extends": "./node_modules/@microsoft/rush-stack-compiler-3.4/includes/tsconfig-web.json"
UPDATE: vanno installati anche i pacchetti  @progress/kendo-drawing e @progress/kendo-react-data-tools, quindi
  • eseguire npm install @progress/kendo-drawing
  • eseguire npm install @progress/kendo-react-data-tools
UPDATE: Questo tutorial va bene anche per pbiviz. Vanno prima seguite queste linee guida. Per avere un quadro più generale di pbiviz vedere qui. La parte di modifica su tsconfig.json e package.json di rush-stack-compiler non è necessaria in pbiviz dopo averne installato il package

venerdì 9 agosto 2019

SPFX - Nel caso un pacchetto risulti outdated durante il processo di build

Capita ogni tanto che lanciando il comando gulp bundle --ship build la build non riesca perchè qualche pacchetto risulta outdated. Nel mio caso l'errore era "Browserslist: caniuse-lite is outdated. Please run next command npm update caniuse-lite browserslist". In realtà il messaggio è fuorviante e spesso lanciare semplicemente npm update con il nome del pacchetto da aggiornare non risolve niente (questo a partire da npm@2.6.1, vedi qui). Il trucco consiste nell'utilizzare il parametro depth per aggiornare le dipendenza anche in pacchetti annidati molto in profondità nella gerarchia del progetto. Nel mio caso ho lanciato
npm update --depth 10 caniuse-lite browserslist e ho risolto.