Odtnhj

I want to display a pdf file generated in an image folder and display it in my app. I'm using pdf.js and importing pdfjs-dist for this purpose. So far I have been able to get the workers working and configured the webpack to load file. But I get an error with file path. No matter how I try to write the file path, I'm getting an error. I'm stuck trying to figure this out. How do I get the pdf to render?

import React, Component from "react";
import pdfjsLib from 'pdfjs-dist';
import pdfPath from '../../../../static/dist/assets/images/sampleStuff.pdf';
import ReactDOM from "react-dom";

pdfjsLib.GlobalWorkerOptions.workerSrc = '../../../../static/dist/pdf.worker.bundle.js';

class Samplepdf extends Component { 

 state = 
 file: pdfPath
 

 componentDidMount() 
 const canvas = ReactDOM.findDOMNode(this.refs.myCanvas);
 const ctx = canvas.getContext("2d")
 const img = this.refs.image


 img.onload = () => 
 ctx.drawImage(img, 0, 0)
 ctx.font = "20px Courier"
 ctx.fillText(this.props.text, 210, 75)
 

 render()

 var loadingTask = pdfjsLib.getDocument(pdfPath);

 return (
 <div> 
 <canvas ref="myCanvas" width=640 height=425 />
 <img ref="image" src= this.state.file className="hidden" />
 </div>
 )
 
 

webpack:

module.exports = 
 mode: "development",
 entry: 
 'main': './client/reactApp/index.js', 
 'pdf.worker': 'pdfjs-dist/build/pdf.worker.entry'
 ,
 output: 
 path: path.resolve(__dirname, "static/dist"), 
 filename: "[name].bundle.js"
 ,
 watch: true,
 module: 
 rules: [
 png,
 bower_components)/,
 use: 
 loader: 'babel-loader',
 options: 
 presets: ['@babel/preset-env', "@babel/preset-react"],
 plugins: [
 ['@babel/plugin-proposal-object-rest-spread'],['@babel/plugin-proposal-class-properties']
 ]
 
 
 ,
 
 test: /.css$/,
 use: ["style-loader", "css-loader"]
 
 ]