React Pdf pdf worker 路径必须是字符串收到未定义的错误

问题描述

我正在使用 react-pdf。我的版本是；节点版本：8.9.4，react-pdf：^5.3.2，react 版本：16.3.1。我阅读了文档并创建了一个组件。 (https://www.npmjs.com/package/react-pdf) 组件适用于 CDN 解决方案，但不适用于从 entry.webpack 导入文档和页面。我收到此错误：node_modules/react-pdf/node_modules/file-loader/dist/cjs.js!./node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.worker.js 模块构建失败：类型错误：路径必须是字符串。收到未定义

我的组件是;

import { Document,Page } from 'react-pdf/dist/esm/entry.webpack'

render() {
          <Document
            file={pdf}
            onLoadSuccess={this.onDocumentLoadSuccess}
            options={options}
            rotate={this.state.rotate}
            className="document__page__main"
         >
            <Page
              object-fit="fill"
              scale={this.state.scale}
              pageNumber={this.state.pageNumber}
              width={600}
              heigth={600}
            />
          </Document>
}

我的 webpack 是；

var webpack = require('webpack')
const { resolve } = require('path')
const Progressplugin = require('webpack/lib/Progressplugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var vendorArray = require('./vendors')
var MergeJsonWebpackPlugin = require('merge-jsons-webpack-plugin')
var NpmInstallPlugin = require('npm-install-webpack-plugin')

module.exports = {
  devtool: 'source-map',resolve: {
    modules: [resolve(__dirname,'src'),'node_modules']
  },entry: {
    main: [
      'react-hot-loader/patch','webpack-dev-server/client?http://0.0.0.0:3001','webpack/hot/only-dev-server','./src/main.js'
    ],vendor: vendorArray
  },output: {
    filename: '[name].[hash:8].js',path: __dirname,publicPath: '/'
  },module: {
    rules: [
      {
        test: /\.(js|jsx)$/,enforce: 'pre',loader: './tools/proto-style-loader/index.js'
      },{
        test: /\.js?$/,exclude: /(node_modules|bower_components)/,use: [
          {
            loader: 'babel-loader',options: {
              cacheDirectory: true
            }
          }
        ]
      },/*{
        test: /\.(png|jpg|gif)$/,use: [
          {
            loader: 'file-loader'
          }
        ]
      },*/
      {
        test: /\.css$/,use: ['style-loader','css-loader']
      },{
        test: /\.scss$/,use: [
          {
            loader: 'style-loader'
          },{
            loader: 'css-loader',options: {
              url: false
            }
          },{
            loader: 'sass-loader',options: {
              url: false
            }
          }
        ]
      },{
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)([\?]?.*)$/,loader: 'url-loader'
      }
    ]
  },performance: {
    maxAssetSize: 40000000,maxEntrypointSize: 40000000,hints: 'error'
  },plugins: [
    new webpack.DefinePlugin({
      APP_ENV: JSON.stringify('dev')
    }),new Progressplugin(),new webpack.HotModuleReplacementPlugin(),new webpack.NamedModulesPlugin(),new webpack.NoEmitOnErrorsPlugin(),new webpack.optimize.CommonsChunkPlugin({
      name: ['vendor']
    }),new HtmlWebpackPlugin({
      template: './public/index.html'
    }),new MergeJsonWebpackPlugin({
      output: {
        groupBy: [
          {
            pattern: './src/**/en-US.json',fileName: 'en-US.json'
          },{
            pattern: './src/**/tr-TR.json',fileName: 'tr-TR.json'
          }
        ]
      },globOptions: {
        nosort: true
      }
    })
  ]
}

解决方法

我更改了 react-pdf 版本 4.2.0。因为我的webapck版本是3.8.1