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