Kategori: nodejs

Sharepoint Framework 1.12.1 error [workaround]

When using Sharepoint framework (SPFx) 1.12.1 together with NodeJS 12 and/or NodeJS 14 and spfx-controls-react, I get a nasty errormessage when the local workbench is loaded (gulp build succeeds without errors).

The same thing happens when using the remote workbench on Sharepoint as well. The erromessage looks like this in the console:

[23:59:59] Error - [webpack] 'dist':
 ./node_modules/@microsoft/decorators/lib-commonjs/index.js
 Module not found: Error: Can't resolve './override' in 'C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs'
 resolve './override' in 'C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs'
   using description file: C:\Workspace\node12-version\node_modules\@microsoft\decorators\package.json (relative path: ./lib-commonjs)
     Field 'browser' doesn't contain a valid alias configuration
     using description file: C:\Workspace\node12-version\node_modules\@microsoft\decorators\package.json (relative path: ./lib-commonjs/override)
       no extension
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\override doesn't exist
       .wasm
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\override.wasm doesn't exist
       .mjs
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\override.mjs doesn't exist
       .js
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\override.js doesn't exist
       .json
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\override.json doesn't exist
       as directory
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\override doesn't exist
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\override]
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\override.wasm]
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\override.mjs]
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\override.js]
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\override.json]
  @ ./node_modules/@microsoft/decorators/lib-commonjs/index.js 18:17-38
  @ ./node_modules/@pnp/spfx-controls-react/lib/controls/fields/fieldTextRenderer/FieldTextRenderer.js
  @ ./node_modules/@pnp/spfx-controls-react/lib/controls/fields/fieldTextRenderer/index.js
  @ ./node_modules/@pnp/spfx-controls-react/lib/FieldTextRenderer.js
  @ ./lib/webparts/xxx/components/xxxML.js
  @ ./lib/webparts/xxx/components/xxxNA.js
  @ ./lib/webparts/xxx/components/xxx.js
  @ ./lib/webparts/xxx/xxxWebPart.js
 ./node_modules/@microsoft/decorators/lib-commonjs/index.js
 Module not found: Error: Can't resolve './sealed' in 'C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs'
 resolve './sealed' in 'C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs'
   using description file: C:\Workspace\node12-version\node_modules\@microsoft\decorators\package.json (relative path: ./lib-commonjs)
     Field 'browser' doesn't contain a valid alias configuration
     using description file: C:\Workspace\node12-version\node_modules\@microsoft\decorators\package.json (relative path: ./lib-commonjs/sealed)
       no extension
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\sealed doesn't exist
       .wasm
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\sealed.wasm doesn't exist
       .mjs
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\sealed.mjs doesn't exist
       .js
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\sealed.js doesn't exist
       .json
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\sealed.json doesn't exist
       as directory
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\sealed doesn't exist
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\sealed]
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\sealed.wasm]
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\sealed.mjs]
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\sealed.js]
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\sealed.json]
  @ ./node_modules/@microsoft/decorators/lib-commonjs/index.js 16:15-34
  @ ./node_modules/@pnp/spfx-controls-react/lib/controls/fields/fieldTextRenderer/FieldTextRenderer.js
  @ ./node_modules/@pnp/spfx-controls-react/lib/controls/fields/fieldTextRenderer/index.js
  @ ./node_modules/@pnp/spfx-controls-react/lib/FieldTextRenderer.js
  @ ./lib/webparts/xxx/components/xxxML.js
  @ ./lib/webparts/xxx/components/xxxNA.js
  @ ./lib/webparts/xxx/components/xxx.js
  @ ./lib/webparts/xxx/xxxWebPart.js
 ./node_modules/@microsoft/decorators/lib-commonjs/index.js
 Module not found: Error: Can't resolve './virtual' in 'C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs'
 resolve './virtual' in 'C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs'
   using description file: C:\Workspace\node12-version\node_modules\@microsoft\decorators\package.json (relative path: ./lib-commonjs)
     Field 'browser' doesn't contain a valid alias configuration
     using description file: C:\Workspace\node12-version\node_modules\@microsoft\decorators\package.json (relative path: ./lib-commonjs/virtual)
       no extension
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\virtual doesn't exist
       .wasm
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\virtual.wasm doesn't exist
       .mjs
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\virtual.mjs doesn't exist
       .js
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\virtual.js doesn't exist
       .json
         Field 'browser' doesn't contain a valid alias configuration
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\virtual.json doesn't exist
       as directory
         C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\virtual doesn't exist
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\virtual]
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\virtual.wasm]
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\virtual.mjs]
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\virtual.js]
 [C:\Workspace\node12-version\node_modules\@microsoft\decorators\lib-commonjs\virtual.json]
  @ ./node_modules/@microsoft/decorators/lib-commonjs/index.js 14:16-36
  @ ./node_modules/@pnp/spfx-controls-react/lib/controls/fields/fieldTextRenderer/FieldTextRenderer.js
  @ ./node_modules/@pnp/spfx-controls-react/lib/controls/fields/fieldTextRenderer/index.js
  @ ./node_modules/@pnp/spfx-controls-react/lib/FieldTextRenderer.js
  @ ./lib/webparts/xxx/components/xxxML.js
  @ ./lib/webparts/xxx/components/xxxNA.js
  @ ./lib/webparts/xxx/components/xxx.js
  @ ./lib/webparts/xxx/xxxWebPart.js

Solution / Workaround

The workaround is to copy a few files from the directory ”node_modules/@microsoft/decorators/lib” to ”node_modules/@microsoft/decorators/commonjs-lib” after you have run ”npm install”

The following files should be copied:

  • override.d.ts
  • override.d.ts.map
  • override.js
  • sealed.d.ts
  • sealed.d.ts.map
  • sealed.js
  • virtual.d.ts
  • virtual.d.ts.map
  • virtual.js

Deploy Office 365 sample app to Azure

Soooo…. During my vacation I set out to test and deploy a NodeJS sample app for Microsoft Office 365 Teams to Azure.

I thought this would be a simple half hour journey, but it turned out I needed to learn some things on the way and fix a few ”glitches”.

I may be a bit of a rebellion, but I didn’t want to run the demo on my local environment (as described in the README), but rather test a ”real” deployment of an application that I (fictionally) had developed – well, it will hopefully turn into my application eventually.

I wanted to test authentication from Microsoft Teams into my own app, so I decided to use the sample project ”microsoft-teams-sample-complete-node” available on GITHUB. I thought everything would just work (except for some configuration issues), but things have probably changed along the way since the sample code was first published (two years ago), eventhough it was updated three months ago (fixing build errors).

This is what I had to do to get it up and running in an Azure App Container:

  • Modify the ”.deployment” file, as I got an errormessage saying ”unable to find file deploy.cmd”
  • Disable Oryx optimization for NODEJS builds on Azure because I recevied the error TS2688: Cannot find type definition file for node
  • Add NodeJS Handlebar error.hbs file, so errors could be rendered correctly from the app.
  • Fix NodeJS Handlebar error ”unable to find views/layouts/main.hbs”.
  • Register app and specify API security options and register callback uri’s

During my endeavours I also had to learn how Azure portal worked, with it’s ”constant improvement” strategy, where things does not always work the way people have documented it previously. I didn’t want to mix and mash different tools, but decided I wanted to do everything using Azure Portal.

To be continued….