Gulp任务React Invalid mapping错误

Question

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

  

C：\ testUI \ cdicms-ADR-UI \ node_modules \ browserify \ node_modules \浏览器的包\ node_m   odules \结合 - 源地图\ node_modules \直列源地图\ node_modules \源映射   \ lib中\源映射\源-MAP-generator.js：275个
          抛出新错误（'无效映射：'+ JSON.stringify（{
          ^

     

错误：映射无效：   { “生成”：{ “行”：91123， “塔”：20}， “源”：“DrugsM   odalDialog.jsx”， “原生态”：{}， “名”：空}
      在SourceMapGenerator_validateMapping [as _validateMapping]（C：\ testUI \ cdicm   S-ADR-UI \ node_modules \ browserify \ node_modules \浏览器包\ node_modules \ combine-   源地图\ node_modules \直列源地图\ node_modules \源映射\ lib中\源映射   \源-MAP-generator.js：275：15）
      在SourceMapGenerator_addMapping [作为addMapping]（C：\ testUI \ cdicms-adr-ui \ no   de_modules \ browserify \ node_modules \浏览器包\ node_modules \合并源地图\   node_modules \直列源地图\ node_modules \源映射\ lib中\源映射\源映射   -generator.js：105：14）
      在C：\ testUI \ cdicms-adr-ui \ node_modules \ browserify \ node_modules \ browser-pack   \ node_modules \结合 - 源地图\ node_modules \直列源地图\ index.js：40：15       在Array.forEach（native）
      在Generator.addMappings（C：\ testUI \ cdicms-adr-ui \ node_modules \ browserify \ no   de_modules \浏览器包\ node_modules \合并源地图\ node_modules \直列酸   CE-地图\ index.js：38：12）
      在Combiner._addExistingMap（C：\ testUI \ cdicms-adr-ui \ node_modules \ browserify）   \ node_modules \浏览器的包\ node_modules \结合 - 源地图\ index.js：33：18）
      在Combiner.addFile（C：\ testUI \ cdicms-adr-ui \ node_modules \ browserify \ node_mo）   dules \浏览器的包\ node_modules \结合 - 源地图\ index.js：58：12）
      在Transform.write [as _transform]（C：\ testUI \ cdicms-adr-ui \ node_modules \ bro   wserify \ node_modules \浏览器包\ index.js：63：23）
      在Transform._read（C：\ testUI \ cdicms-adr-ui \ node_modules \ browserify \ node_mod）   ULES \浏览器的包\ node_modules \ through2 \ node_modules \可读流\ lib_stream   _transform.js：184：10）
      在Transform._write（C：\ testUI \ cdicms-adr-ui \ node_modules \ browserify \ node_mo）   dules \浏览器的包\ node_modules \ through2 \ node_modules \可读流\ lib_strea   m_transform.js：172：12）
      at doWrite（C：\ testUI \ cdicms-adr-ui \ node_modules \ browserify \ node_modules \ bro   wser包\ node_modules \ through2 \ node_modules \可读流\ lib_stream_writabl   e.js：237：10）
      在writeOrBuffer（C：\ testUI \ cdicms-adr-ui \ node_modules \ browserify \ node_modul）   es \ browser-pack \ node_modules \ through2 \ node_modules \ readable-stream \ lib_stream_w ritable.js：227：5）
      在Transform.Writable.write（C：\ testUI \ cdicms-adr-ui \ node_modules \ browserify）   \ node_modules \浏览器的包\ node_modules \ through2 \ node_modules \可读流\利   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>
    );
}}

调试此browserify错误（JSX文件中的哪一行）的任何其他标志都非常受欢迎。

一些其他信息。我们有gulpfile任务设置如下。

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());
});

如果我debug : false，那么问题就不会发生。显然存在与生成源地图相关的问题。