Kategori: Uncategorized

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