2017-11-24 13 views
3

Dashコンポーネントを生成するためにReactでD3v4をインポートしようとしています。これは、これまでの私のコードです:予期しない名前空間のインポートインポート/名前空間なし

import React, {Component} from 'react'; 
import PropTypes from 'prop-types'; 
import * as d3 from 'd3'; 

function createBox(divId) { 
    var svgContainer = d3.select(divId).append('svg') 
            .attr('width', 200) 
            .attr('height', 200); 

//Draw the Circle 
    svgContainer.append('circle') 
         .attr('cx', 30) 
         .attr('cy', 30) 
         .attr('r', 20); 
} 

/** 
* ExampleComponent is an example component. 
* It takes a property, `label`, and 
* displays it. 
* It renders an input with the property `value` 
* which is editable by the user. 
*/ 
export default class ExampleComponent extends Component { 
    constructor() { 
     super(); 
     this.plot = this.plot.bind(this); 
    } 
    plot(props) { 
     createBox(props.id); 
    } 

    componentDidMount() { 
     this.plot(this.props); 
    } 

    componentWillReceiveProps(newProps) { 
     this.plot(newProps); 
    } 

    render() { 
     const {id} = this.props; 
     return (
      <div id={id}/> 
     ); 
    } 
} 

ExampleComponent.propTypes = { 
    /** 
    * The ID used to identify this compnent in Dash callbacks 
    */ 
    id: PropTypes.string 

}; 

しかし、私は$ npm run prepublishを使用してダッシュをprepublishしようとすると、エラーがスローされます。

error Unexpected namespace import import/no-namespace 

そして、それは私がのオフに構築していますimport * as d3 from 'd3';

に戻って指します独自のコンポーネントを作成する際にPlotlyが提供する例です。

答えて

1

esling Docsで述べたように:

Reports if namespace import is used.

ですから、これにそれを変更する必要があります。

import d3 from 'd3'; 

または(eslintのドキュメントで言及したように)名前空間を使用する必要がある場合は、ルールを無効にします

更新

import d3 from 'd3'; 

が動作しない場合があります:私は、したがって、この d3には default輸出がないと仮定して3210は、彼らが同じパターンを使用します。

import {scaleLinear} from "d3-scale"; 

をまたは私は上記のようなルールを無効にします。
は、このように個人の部品の名前のインポートを使用しますか。

+2

このソリューションを試してみました。私はちょうど 'd3-selection'(私が使っていたライブラリ)を自分の依存関係に加えなければなりませんでした。ありがとう! – user9004969

+0

これを少し追加するだけで、ルールを無効にする非常に簡単な解決策は、 '// eslint-disable-next-line import/no-namespace'を使用し、次の行に' import * as d3 from 'd3'; ' – tgordon18