Using Draft-Js in SPfx Webpart

%3CLINGO-SUB%20id%3D%22lingo-sub-266700%22%20slang%3D%22en-US%22%3EUsing%20Draft-Js%20in%20SPfx%20Webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-266700%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20-%20need%20some%20help%20from%20a%20SPfx%20dev%20whizz.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20a%20web%20part%20that%20is%20hosting%20a%20react%20component%20that%20in%20turn%20hosts%20a%20Draft-js%20component%20(%3CA%20href%3D%22https%3A%2F%2Fdraftjs.org%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdraftjs.org%2F%3C%2FA%3E).%20Upon%20compiling%20with%20%22gulp%20serve%22%2C%20I%20get%20warnings%20indicating%20that%20a%20file%20used%20in%20Draft-js%20has%20a%20name-case%20conflict%20with%20a%20file%20used%20by%20the%20%22fbjs%22%20module%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CBLOCKQUOTE%3E%3CP%3E%5B16%3A32%3A03%5D%20Warning%20-%20%5Bwebpack%5D%20'dist'%3A%3CBR%20%2F%3E.%2Fnode_modules%2Ffbjs%2Flib%2FsetImmediate.js%3CBR%20%2F%3EThere%20are%20multiple%20modules%20with%20names%20that%20only%20differ%20in%20casing.%3CBR%20%2F%3EThis%20can%20lead%20to%20unexpected%20behavior%20when%20compiling%20on%20a%20filesystem%20with%20other%20case-semantic.%3CBR%20%2F%3EUse%20equal%20casing.%20Compare%20these%20module%20identifiers%3A%3CBR%20%2F%3E*%20C%3A%5Csrc%5Capp-coown%5Cnode_modules%5Csource-map-loader%5Cindex.js!C%3A%5Csrc%5Capp-coown%5Cnode_modules%5Cfbjs%5Clib%5CsetImmediate.js%3CBR%20%2F%3EUsed%20by%201%20module(s)%2C%20i.%20e.%3CBR%20%2F%3EC%3A%5Csrc%5Capp-coown%5Cnode_modules%5Csource-map-loader%5Cindex.js!C%3A%5Csrc%5Capp-coown%5Cnode_modules%5Cdraft-js%5Clib%5CeditOnBeforeInput.js%3CBR%20%2F%3E*%20C%3A%5Csrc%5Capp-coown%5Cnode_modules%5Csource-map-loader%5Cindex.js!C%3A%5Csrc%5Capp-coown%5Cnode_modules%5Cfbjs%5Clib%5Csetimmediate.js%3CBR%20%2F%3EUsed%20by%202%20module(s)%2C%20i.%20e.%3CBR%20%2F%3EC%3A%5Csrc%5Capp-coown%5Cnode_modules%5Csource-map-loader%5Cindex.js!C%3A%5Csrc%5Capp-coown%5Cnode_modules%5Cfbjs%5Clib%5CsetImmediate.js%3C%2FP%3E%3C%2FBLOCKQUOTE%3E%3CP%3EThen%20going%20on%20to%20use%20the%20webpart%2C%20the%20Draft-Js%20component%20the%20reports%20the%20error%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CBLOCKQUOTE%3E%3CP%3EUncaught%20TypeError%3A%20setImmediate%20is%20not%20a%20function%3CBR%20%2F%3Eat%20editOnBeforeInput%20(editOnBeforeInput.js%3A162)%3C%2FP%3E%3C%2FBLOCKQUOTE%3E%3CP%3EGoogling%20around%20I%20found%20this%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Ffacebook%2Ffbjs%2Fissues%2F234%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Ffacebook%2Ffbjs%2Fissues%2F234%3C%2FA%3E%26nbsp%3Bwhich%20indicates%20that%20this%20name%20conflict%20could%20be%20resolved%20by%20modifying%20the%20Webpack%20config%20file%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CBLOCKQUOTE%3E%3CP%3E%3CSPAN%3ESpecifically%20if%20you%20get%20rid%20of%20the%26nbsp%3B%3C%2FSPAN%3Eresolve%3CSPAN%3E%26nbsp%3Bfield%20in%26nbsp%3B%3C%2FSPAN%3Ewebpack.config.js%3CSPAN%3E%26nbsp%3Bthen%20it%20works%20fine%3C%2FSPAN%3E%3C%2FP%3E%3C%2FBLOCKQUOTE%3E%3CP%3E%3CSPAN%3EIm%20not%20really%20sure%20how%20to%20do%20this%20in%20an%20SPfx%20project%20(no%20webpack.config.js%20file%20I%20can%20see)%2C%20and%20not%20sure%20if%20making%20a%20change%20like%20this%20could%20have%20any%20other%20effects.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EAny%20chance%20someone%20with%20a%20cleaerer%20understanfing%20of%20this%20could%20help%20me%20out%3F%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EMany%20thanks%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3ENigel%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-266700%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Contributor

Hi - need some help from a SPfx dev whizz.

 

I have a web part that is hosting a react component that in turn hosts a Draft-js component (https://draftjs.org/). Upon compiling with "gulp serve", I get warnings indicating that a file used in Draft-js has a name-case conflict with a file used by the "fbjs" module:

 

[16:32:03] Warning - [webpack] 'dist':
./node_modules/fbjs/lib/setImmediate.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\src\app-coown\node_modules\source-map-loader\index.js!C:\src\app-coown\node_modules\fbjs\lib\setImmediate.js
Used by 1 module(s), i. e.
C:\src\app-coown\node_modules\source-map-loader\index.js!C:\src\app-coown\node_modules\draft-js\lib\editOnBeforeInput.js
* C:\src\app-coown\node_modules\source-map-loader\index.js!C:\src\app-coown\node_modules\fbjs\lib\setimmediate.js
Used by 2 module(s), i. e.
C:\src\app-coown\node_modules\source-map-loader\index.js!C:\src\app-coown\node_modules\fbjs\lib\setImmediate.js

Then going on to use the webpart, the Draft-Js component the reports the error:

 

Uncaught TypeError: setImmediate is not a function
at editOnBeforeInput (editOnBeforeInput.js:162)

Googling around I found this https://github.com/facebook/fbjs/issues/234 which indicates that this name conflict could be resolved by modifying the Webpack config file:

 

Specifically if you get rid of the resolve field in webpack.config.js then it works fine

Im not really sure how to do this in an SPfx project (no webpack.config.js file I can see), and not sure if making a change like this could have any other effects.

 

Any chance someone with a cleaerer understanfing of this could help me out?

 

Many thanks

 

Nigel

 

0 Replies