【问题标题】：React component not recognized as string or class functionReact 组件不被识别为字符串或类函数
【发布时间】：2017-12-19 14:42:48
【问题描述】：

我正在尝试构建一个可用作 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 文件夹。

然后我将此构建文件夹符号链接到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;

但这导致了开始时的屏幕截图。

我尝试过的其他事情：

project/src/index.js export {PDF} from './PDF';
project/src/index.js export {PDF as default} from './PDF';
project/src/PDF.js export {PDF};
project/example/src/Viewer.js import {PDF} from 'react-pdf';

但没有任何效果。我怀疑这与 webpack 构建配置有关，但我没有弹出任何内容。

【问题讨论】：

能否上传到github，我们可以测试一下。
你在index.js中试过了吗import PDF from './PDF'; export default PDF;
@PiyushDhamecha，不行：-/这是一个工作项目，没有可用的公共 github 存储库（管理层不允许我在我的个人帐户上分叉）
@FinbarrO'B，同样的问题：-/
ok.. np... 你能用pdf文件源代码更新问题吗？

标签： reactjs webpack

【解决方案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

【讨论】：