next.js中的window is not defined

1.问题描述

使用了next+express做SSR，引入了富文本编辑器braft-editor（我也不知道自己为什么要用SSR渲染后台界面），代码如下

import React from 'react'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'

export default class EditorDemo extends React.Component {

    state = {
        editorState: BraftEditor.createEditorState(null)
    }

    async componentDidMount () {
    }

    submitContent = async () => {
    }

    handleEditorChange = (editorState) => {
        this.setState({ editorState })
    }

    render () {
        const { editorState } = this.state
        return (
            <div className="my-component">
                <BraftEditor
                    value={editorState}
                    onChange={this.handleEditorChange}
                    onSave={this.submitContent}
                />
            </div>
        )

    }

}

遇到了如下错误：

(ReferenceError): window is not defined

这个很好理解了，页面使用ssr渲染的时候，react的生命周期中render()阶段负责创建虚拟dom，进行diff算法，更新dom树，render及之前的阶段，并没有将组件渲染为实际的dom节点，所以不能获取window对象，如果是下面这样是可以拿到window对象的：

componentDidMount(){
    console.log( window !== undefined )	//true
}

但是不允许这么写：

ES6规范中import/export只能被声明于当前执行环境的顶级作用域，并且import命令会提升到整个模块的头部

这是不允许的写法 ~
componentDidMount(){
    import BraftEditor from 'braft-editor'
}

2.解决方法

next.js文档中提供了一种动态导入模块的一种办法'next/dynamic'，

import dynamic from 'next/dynamic'

const DynamicPublish = dynamic(
  import('./publish'),
  {
    ssr: false   //这个要加上,禁止使用 SSR
  }
)

export default () => <DynamicPublish />

然后就ok了，富文本编辑器可以正常使用。