React Pdf pdf worker Path must be a string. Received undefined error

Question

I am using react-pdf. My versions are; node version:8.9.4, react-pdf:^5.3.2, react version: 16.3.1 . I read documentation and created a component. ( https://www.npmjs.com/package/react-pdf ) Component works well with CDN solution but doesn't work with importing Document and Page from entry.webpack. I got this error: node_modules/react-pdf/node_modules/file-loader/dist/cjs.js!./node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.worker.js Module build failed: TypeError: Path must be a string. Received undefined

My component is;

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>
}

My webpack is;

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
      }
    })
  ]
}

Answer 1

I changed react-pdf version 4.2.0. Because my webapck version is 3.8.1