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
