Using Draft-Js in SPfx Webpart


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 ( 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':
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\fbjs\lib\setimmediate.js
Used by 2 module(s), i. e.

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 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




1 Reply
Hi Nigel

I see that it has been long time since you wrote about this issue. I have the same issue now.
have you figured out how to solve it.