Draft-js: error on server side render with webpack

[s524797336]

when render on server side
try catch node_modules/draft-js/lib/Draft.js like this

'use strict'
try {
var AtomicBlockUtils = require('./AtomicBlockUtils')
var BlockMapBuilder = require('./BlockMapBuilder')
var CharacterMetadata = require('./CharacterMetadata')
var CompositeDraftDecorator = require('./CompositeDraftDecorator')
var ContentBlock = require('./ContentBlock')
var ContentState = require('./ContentState')
var DefaultDraftBlockRenderMap = require('./DefaultDraftBlockRenderMap')
var DefaultDraftInlineStyle = require('./DefaultDraftInlineStyle')
var DraftEditor = require('./DraftEditor.react')
var DraftEditorBlock = require('./DraftEditorBlock.react')
var DraftEntity = require('./DraftEntity')
var DraftModifier = require('./DraftModifier')
var DraftEntityInstance = require('./DraftEntityInstance')
var EditorState = require('./EditorState')
var KeyBindingUtil = require('./KeyBindingUtil')
var RichTextEditorUtil = require('./RichTextEditorUtil')
var SelectionState = require('./SelectionState')

var convertFromDraftStateToRaw = require('./convertFromDraftStateToRaw')
var convertFromHTMLToContentBlocks = require('./convertFromHTMLToContentBlocks')
var convertFromRawToDraftState = require('./convertFromRawToDraftState')
var generateRandomKey = require('./generateRandomKey')
var getDefaultKeyBinding = require('./getDefaultKeyBinding')
var getVisibleSelectionRect = require('./getVisibleSelectionRect')

} catch (e) {
console.error(e)
}

var DraftPublic = {
Editor: DraftEditor,
EditorBlock: DraftEditorBlock,
EditorState: EditorState,

CompositeDecorator: CompositeDraftDecorator,
Entity: DraftEntity,
EntityInstance: DraftEntityInstance,

BlockMapBuilder: BlockMapBuilder,
CharacterMetadata: CharacterMetadata,
ContentBlock: ContentBlock,
ContentState: ContentState,
SelectionState: SelectionState,

AtomicBlockUtils: AtomicBlockUtils,
KeyBindingUtil: KeyBindingUtil,
Modifier: DraftModifier,
RichUtils: RichTextEditorUtil,

DefaultDraftBlockRenderMap: DefaultDraftBlockRenderMap,
DefaultDraftInlineStyle: DefaultDraftInlineStyle,

convertFromHTML: convertFromHTMLToContentBlocks,
convertFromRaw: convertFromRawToDraftState,
convertToRaw: convertFromDraftStateToRaw,
genKey: generateRandomKey,
getDefaultKeyBinding: getDefaultKeyBinding,
getVisibleSelectionRect: getVisibleSelectionRect

}

module.exports = DraftPublic

Will get an error 'Cannot read property 'indexOf' of undefined', because some where use window object, so whatever component use this package will export an undefined, and react will die.

How can i prevent this?

[nsfmc]

hi, i also do ssr draftjs, could you leave a comment about the version of webpack you're using and how you're importing draft-js and i can test locally.

[s524797336]

My webpack version is 2.4.1
And i just simply import {Editor} from 'draft-js' in my own component
Webpack config target is set to 'node'

The project is private and large, is there any thing i can provide?

[nsfmc]

at first glance that seems like webpack is attempting to import the uncompiled draft js library rather than the distributed version. would it be possible to create a small repo that just had a bare webpack config along with a single entrypoint js file that imports the editor and returns it and see if it throws the same error?

[s524797336]

I'll do it on weekend, thinks

[s524797336]

Sorry, this bug is async component SSR problem, thinks for your time @nsfmc

[flarnie]

It sounds like this was resolved? Not sure based on your message @s524797336 - if this is not a problem with Draft then we can close the issue.

[s524797336]

@flarnie yes this is not Draft issue