Reactjs Gulp任务反应无效映射错误

我们在运行gulp时看到以下错误。它抱怨特定的JSX文件。DrugsModalDialog.jsx。任何评论/想法/建议都会有所帮助

C:\testUI\cdicms adr ui\node\u modules\browserify\node\u modules\browser pack\node\m odules\combine源映射\节点\模块\内联源映射\节点\模块\源映射 \lib\source map\source map generator.js:275
抛出新错误（'无效映射：'+JSON.stringify（{
^

错误：映射无效： {“生成”：{“行”：91123，“列”：20}，“源”：“药品” jsx，“原始”：{}，“名称”：null}
在SourceMapGenerator\u validateMapping[as\u validateMapping]（C:\testUI\cdicm s-adr-ui\node\u模块\browserify\node\u模块\browser pack\node\u模块\combine- 源映射\节点\模块\内联源映射\节点\模块\源映射\库\源映射 \源地图生成器.js:275:15）
在SourceMapGenerator_addMapping[作为addMapping]（C:\testUI\cdicms adr ui\no de_modules\browserify\node_modules\browser pack\node_modules\combine源映射\ 节点\模块\内联源映射\节点\模块\源映射\库\源映射\源映射 -generator.js:105:14）
位于C:\testUI\cdicms adr ui\node\u modules\browserify\node\u modules\browser pack \node\u modules\combine source map\node\u modules\inline source map\index.js:40:15 在Array.forEach（本机）
在Generator.addMappings（C:\testUI\cdicms adr ui\node\U modules\browserify\no de_模块\browser pack\node_模块\combine source map\node_模块\inline sour ce map\index.js:38:12）
在组合器处添加现有映射（C:\testUI\cdicms adr ui\node\U modules\browserify \node\u modules\browser pack\node\u modules\combine source map\index.js:33:18）
在Combiner.addFile（C:\testUI\cdicms adr ui\node\u modules\browserify\node\u mo dules\browser pack\node\u modules\combine source map\index.js:58:12）
在Transform.write[as\u Transform]（C:\testUI\cdicms adr ui\node\u modules\bro wserify\node\u modules\browser pack\index.js:63:23）
在转换时读取（C:\testUI\cdicms adr ui\node\u modules\browserify\node\u mod ules\browser pack\node\u modules\through2\node\u modules\readable stream\lib\u stream _transform.js:184:10）
在转换时写入（C:\testUI\cdicms adr ui\node\u modules\browserify\node\u mo 模块\browser pack\node\u modules\through2\node\u modules\readable stream\lib\u strea m_transform.js:172:12）
在doWrite（C:\testUI\cdicms adr ui\node\u modules\browserify\node\u modules\bro wser包\node\u modules\through2\node\u modules\readable stream\lib\u stream\u writabl e、 js:237:10）
在writeOrBuffer（C:\testUI\cdicms adr ui\node\u modules\browserify\node\u module） es\browser pack\node\u modules\through2\node\u modules\readable stream\lib\u stream\u w ritable.js:227:5）
在Transform.Writable.write（C:\testUI\cdicms adr ui\node\U modules\browserify \节点\u模块\browser pack\node\u模块\through2\node\u模块\readable stream\li b_stream_writable.js:194:11）

这是DrugModalDialog.jsx代码

import React from 'react';
import {Modal, Button} from 'react-bootstrap';

export default class DrugsModalDialog extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            showModal: false
        }
        this.open = this.open.bind(this);
        this.close = this.close.bind(this);
    }

    close() {
        this.setState({ showModal: false });
    }

    open() {
        console.log("open called");
        this.props.getDrugList();
        this.setState({ showModal: true });
    }

    render() {

    var createADRRow = function(item) {
            return (
                <tr key={item.name}>
                    <td>{item.drug}</td>
                </tr>
    );}

    var modalBody;
    if (this.props.isLoading) {
        modalBody = <span>Loading...</span>
    } else if (this.props.drugs.length == 0) {
        modalBody = <span>No drugs found</span>
    } else {
        modalBody = <table className="table table-bordered table-striped table-hover">
            <tbody>{this.props.drugs.map(createADRRow,this)}</tbody>
        </table>;
    }

    return (
        <div style={{display: 'inline'}}>
         <input style={{position: 'relative', marginLeft: '15px'}}type="button" value="View Drugs" name="viewDrugs"
            className="btn btn-default pull-right" onClick={this.open}/>
            <Modal show={this.state.showModal} onHide={this.close} bsSize="sm">
            <Modal.Header>
                <Modal.Title>Drugs</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                {modalBody}
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={this.close}>Close</Button>
            </Modal.Footer>
            </Modal>
        </div>
    );
}}

---

如果我执行了

debug:false

，则问题不会发生。显然存在与生成源映射相关的问题。

升级browserify后问题得到解决

gulp.task('js', function () {
  return browserify({entries: './src/main.jsx', extensions: ['.jsx'], debug: true})
    .transform('babelify', {presets: ['es2015', 'react']})
    .transform(envify({
      HOST_PORT: detectHostPort()
    }))
    .bundle()
    .on('error', function (err) {
      console.error(err);
      this.emit('end');
    })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest(config.paths.dist + '/scripts'))
    .pipe(connect.reload());
});