React組件不被識別爲字符串或類函數

Question

我想構建一個組件，可以用作npm包，並構建了一個示例應用程序來測試和演示用法。這導致在

我有兩個文件：在包源中：PDF和index。 PDF定義在最後的組件和出口與

export default PDF; 

index.js只是export {default} from './PDF';

編輯 - PDF文件

import React, {Component} from 'react'; 
import PropTypes from 'prop-types'; 
import Viewer from './Viewer'; 
import pdfjsLib from './../node_modules/pdfjs-dist/webpack' 

class PDF extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      document: null 
     } 
    } 

    componentDidMount() { 

     const loadingTask = pdfjsLib.getDocument(this.props.file); 
     loadingTask.promise.then(document => { 
      console.log('Loaded Document'); 
      console.log(document); 
      this.setState({ 
       document: document 
      }) 
     }).catch(err => { 
      console.log(err); 
     }); 
    } 

    render() { 
     return(
      <div> 
       <Viewer doc={this.state.document}/> 
      </div> 
     ) 
    } 

} 

export {PDF}; 

的WebPack建立配置

module.exports = { 
    entry: { 
     'index': path.join(__dirname, 'src', 'index.js') 
    }, 
    output: { 
     path: path.join(__dirname, '/lib'), 
     filename: '[name].js', 
     sourceMapFilename: '[name].map' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.css$/, 
       use: [ 
        'style-loader', 
        'css-loader' 
       ] 
      }, 
      { 
       test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, 
       use: ['url-loader'] 
      }, 
      { 
       test: /\.js$/, 
       exclude: /(node_modules)/, 
       use: { 
        loader: "babel-loader", 
        options: { 
         presets: ["es2015", "react", "stage-2"] 
        } 
       } 
      }, 
     ] 
    } 
}; 

它創建了一個/lib文件夾爲BU ild artifacts。

我那麼這個符號鏈接build文件夾到project/example/node_modules/react-pdf併爲下面的示例演示使用它：

import React, {Component} from 'react'; 
import PDF from 'react-pdf'; 

class Viewer extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      file: '//s3-us-west-2.amazonaws.com/bucket-test/test-file-43092.pdf' 
     } 
    } 

    render() { 
     return(
      <div> 
       <PDF document={this.state.file}/> 
      </div> 
     ) 
    } 
} 

export default Viewer; 

但是，這導致在開始時的屏幕截圖。

其他的事情我已經試過：

• 項目/ src目錄/ index.js export {PDF} from './PDF';
• 項目/ SRC/index.js export {PDF as default} from './PDF';
• 項目/ SRC/PDF.js export {PDF};
• 項目/示例/ SRC/Viewer.js import {PDF} from 'react-pdf';

但沒有任何工作。我懷疑這與webpack構建配置有關，但沒有出現在我身上。

Answer 1

剛剛嘗試這一點在你的PDF類

import React, {Component} from 'react'; 
import PropTypes from 'prop-types'; 
import Viewer from './Viewer'; 
import pdfjsLib from './../node_modules/pdfjs-dist/webpack' 

export class PDF extends Component { //Update export inline 

    constructor(props) { 
     super(props); 

     this.state = { 
      document: null 
     } 
    } 

    componentDidMount() { 

     const loadingTask = pdfjsLib.getDocument(this.props.file); 
     loadingTask.promise.then(document => { 
      console.log('Loaded Document'); 
      console.log(document); 
      this.setState({ 
       document: document 
      }) 
     }).catch(err => { 
      console.log(err); 
     }); 
    } 

    render() { 
     return(
      <div> 
       <Viewer doc={this.state.document}/> 
      </div> 
     ) 
    } 

} 

//export {PDF}; // remove this line