插入图片报错，打印不了htmlContent

[cjmafei]

Uncaught TypeError: Cannot set property 'getCurrentStack' of undefined at setCurrentDebugStack (react-dom-server.browser.development.js:1822) at ReactDOMServerRenderer.read (react-dom-server.browser.development.js:2231) at Object.renderToStaticMarkup (react-dom-server.browser.development.js:2511) at getBlockTags (getBlockTags.js:39) at convertToHTML.js:118 at Array.map () at convertToHTML.js:83 at t.N.getContent (braft.js:1) at t.N.getHTMLContent (braft.js:1) at braft.js:1

[cjmafei]

版本 1.3.2

[margox]

可能是因为你使用了和服务端渲染相关的技术？ react-dom-server.browser.development.js 我这边本身是没有调用这个的，看上去报错在是在react-dom-server.browser.development.js里面

[cjmafei]

能再解释一下吗，我这边还没开始和服务端交互呢，请求也没有，只是单纯的引入然后插入图片就打印不出htmlContent.如果像您说的这样，是我这里的问题，我该怎样解决呢，现在无处下手。。。

[cjmafei]

onChange方法是没问题的，也打印出了相关信息。但是onHTMLChange如果插入图片就报错，不插入图片是没问题的

[margox]

可以根据报错来调试，比如最底层的报错是在：react-dom-server.browser.development.js:1822,你从这一行开始一步步往上找，看看是那个地方导致的报错

[margox]

另外贴一下你的使用代码看看那，我看看能不能复现一下

[cjmafei]

import * as style from './css/ProContent.less';
import config from 'config/global';  // 全局
import { Link, Control ,CacheLink,Route,HashRouter } from 'react-keeper';
import { Component, LogicRender } from 'refast';
import { Menu,Input,Select,Button,Table,Modal } from 'antd';
// 引入编辑器以及编辑器样式
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/braft.css'
const { TextArea } = Input;
const Option = Select.Option;

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

const columns = [{
    title: '标题',
    dataIndex: 'name',
  }, {
    title: '类型',
    dataIndex: 'age',
  }, {
    title: '状态',
    dataIndex: 'address',
  }, {
    title: '支部',
    dataIndex: 'partment',
  },{
    title: '状态',
    dataIndex: 'state',
  },{
    title: '创建人',
    dataIndex: 'man',
  },{
    title: '创建时间',
    dataIndex: 'time',
  },
  { 
    title: '操作', 
    dataIndex: '', 
    key: 'x', 
    render: () => <div style={{color:"#38ADFF",fontSize:'14px'}}><span>预览</span> | <span>邀添</span> | <span>删除</span> | <span>发布</span> </div>
},];

const data = [{
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    partment:'支部',
    state:'在职',
    man:'我',
    time:'2017-12-12',
  }];

class ProContent extends Component {
    constructor(props) {
        super(props);
        this.state={
            visible: false,
            htmlContent: '',
        }
    }

    handleChange(value) {
        console.log(`selected ${value}`);
    }
    showModal = () => {
        this.setState({
          visible: true,
        });
      }
    hideModal = () => {
        this.setState({
          visible: false,
        });
      }

    editerChange = (content) => {
        console.log('content',content)
    }

    editerHTMLChange = (html) => {
        console.log('html',html);
        this.setState({ htmlContent:html });
    }
    render() {
        const editorProps = {
            onHTMLChange: this.editerHTMLChange,
            height: 200,
            initialContent: '',
            contentFormat:'raw',
            onChange: this.editerChange,
            viewWrapper: '.demo',
            tabIndents :2,
            imageControls :{
                floatLeft: true,
                floatRight: true,
                alignLeft: true,
                alignCenter: true,
                alignRight: true,
                link: true
            },
            media:{
                image: true, // 开启图片插入功能
                video: false, // 开启视频插入功能
                audio: false, // 开启音频插入功能
                validateFn: null, // 指定本地校验函数，说明见下文
                uploadFn: null, // 指定上传函数，说明见下文
                externalMedias:{
                    image: false,
                    audio: false,
                    video: false
                },
            },
            imageControls:{
                floatLeft: false,
                floatRight: false,
                alignLeft: false,
                alignCenter: false,
                alignRight: false,
                link: false
            },
            controls:[
                'undo', 'redo', 'split', 'font-size', 'font-family', 'text-color',
                'bold', 'italic', 'underline', 'strike-through','text-align', 
                'split', 'headings', 'list_ul', 'list_ol','media'
            ],
          }
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
              console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: record => ({
              disabled: record.name === 'Disabled User', // Column configuration not to be checked
              name: record.name,
            }),
          };
        return (
                <div className="ProContent">
                    <p className="header-title">党员管理 > 杭州市委组织部党员管理 > 杭州市临安市委</p>
                    <div className="main-area">
                        <div className="search-nav">
                            <Input placeholder="关键词"/>
                            <Select 
                                defaultValue="" 
                                placeholder="请选择分类" 
                                style={{ width: 200 }} 
                                onChange={this.handleChange}
                            >
                                <Option value="jack">Jack</Option>
                            </Select>
                            <Select 
                                defaultValue="" 
                                placeholder="请选择状态" 
                                style={{ width: 200 }} 
                                onChange={this.handleChange}
                            >
                                <Option value="jack">Jack</Option>
                            </Select>
                            <Button type="primary">搜索</Button>
                        </div>
                        <div className="optionpart">
                            <img src={require('./images/delete.png')}/>
                            <Button type="primary" onClick={this.showModal}>新增内容</Button>
                            <Button type="primary">批量发布</Button>
                        </div>
                        <Table 
                            rowSelection={rowSelection} 
                            columns={columns} 
                            dataSource={data} 
                            pagination={true}
                        />
                    </div>
                    <Modal
                        title="编辑页面"
                        visible={this.state.visible}
                        onOk={this.hideModal}
                        onCancel={this.hideModal}
                        okText="确定"
                        cancelText="取消"
                        width="700"
                        wrapClassName="vertical-center-modal"
                    >
                        <ul>
                            <li>
                                <div className="left">标题：</div>
                                <div className="right">
                                    <Input/>
                                </div>
                                <div className="clear"></div>
                            </li>
                            <li>
                                <div className="left">分类：</div>
                                <div className="right">
                                    <Select 
                                        defaultValue="" 
                                        placeholder="请选择状态" 
                                        style={{ width: '100%' }} 
                                        // onChange={this.handleChange}
                                    >
                                        <Option value="jack">Jack</Option>
                                    </Select>
                                </div>
                                <div className="clear"></div>
                            </li>
                            <li>
                                <div className="left">封面图片：</div>
                                <div className="right">
                                    <div className="adddpic">
                                        <img src={require('./images/add.png')}/>
                                    </div>
                                    <span className="tips">建议图片尺寸至少为480*270px</span>
                                </div>
                                <div className="clear"></div>
                            </li>
                            <li>
                                <div className="left">内容：</div>
                                <div className="right">
                                    <div className="demo">
                                        <BraftEditor {...editorProps}/>
                                    </div>
                                </div>
                                <div className="clear"></div>
                            </li>
                        </ul>
                    </Modal>
                </div>
        )
    }
}

export default ProContent;

[cjmafei]

一直追溯到报错的那个js

var ReactVersion = '16.2.0';

var describeComponentFrame = function (name, source, ownerName) {
  return '\n    in ' + (name || 'Unknown') + (source ? ' (at ' + source.fileName.replace(/^.*[\\\/]/, '') + ':' + source.lineNumber + ')' : ownerName ? ' (created by ' + ownerName + ')' : '');
};

var ReactInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

ReactInternals is not defined. 我现在使用的react16.2.0最新版。不会是有bug吧

[cjmafei]

大哥，解决了，感觉可能就是16版本的哪里兼容性不好或者有bug吧，我换了15就OK了，问题算是解决了，但是哪里的错还是不懂，您可以试试react16.2.0,谢谢了

[margox]

我这边也是16.2.0, 而且我这边React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED是有值的，你再看看React和ReactDOM版本是不是相互不兼容？我这边React和ReactDOM都是16.2.0

[cjmafei]

我一开始也都是16.2.0，两个都是。那这就奇怪了

[margox]

删除node_modules再装一下试试，哈哈

[cjmafei]

你那边React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED是什么。 我这里是ReactCurrentOwner:{current: null}

我把版本号改回16还是报错

[margox]

比你的多了一些成员： 你那边报错是因为没有ReactDebugCurrentFrame这个成员

[cjmafei]

对，就是这个问题，这就奇怪了，我还是先降回低版本，求稳，哈哈

[margox]

看了一下源码，production版本的React. __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED是不包含ReactDebugCurrentFrame的，development版本的React才包含，React的入口文件(node_modules/react/index.js)：

'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

你可以在这儿加个断点看看引用的哪个文件...

[margox]

如果引用的文件不对，那就是process.env.NODE_ENV被设置成production了。。。

[cjmafei]

我这里process.env里面没有NODE_ENV的，是undefined,所以应该不是production吧

[margox]

恩？ 你这边的判断怎么是!=="production"？ 截图的是react的入口文件的代码么

[cjmafei]

我这个是react-dom-server.browser.development.js里面看的

[margox]

@cjmafei 昨天另外一个同学也遇到了这个问题，后面调查发现是因为webpack打包的时候使用了dll，并且dll打包只包含了react和react-dom，没有包含react-dom/server，后面把react-dom/server包含进去就行了，如果你这边使用了dll，也可以试一下看看能不能解决。

[cjmafei]

嗯，我是用了dll，今天我试一下

[cjmafei]

我刚看了下，那个项目里没用dll。。。

[margox]

那就是有别的类似的构建缓存策略，导致项目引入的react是非开发环境的react，而react-dom/server又是开发环境的，如果你那边需要升级到React16的话，可以从这个点入手去找下解决方案

[cjmafei]

好的