Using Draft-Js in SPfx Webpart

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

 

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.