React-pdf: <hash>.worker.js returns Error 404

[MeganGong]

Hi, guys, I am trying to run the sample file, I got an Error :
pdf.worker.js?./node_modules/worker-loader/dist/cjs.js:2 GET http://localhost:8005/54780f3c4e0c00bc5d4d.worker.js 404 (Not Found)
so le PDF can't load

Here is a screen shot:

Here is my project directory and code :

Here is my webpack.config.js :

```
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
// the entry file for the bundle
//__dirname is the most common method. It gives you the path of the currently running file.
//entry: indicate the entry path of the module on which we start build out the app
//.js should only ever be for files that use features of standard JavaScript - anything nonstandard use jsx
entry: path.join(__dirname, '/client/src/app.jsx'),

// the bundle file we will get in the result
output: {
path: path.join(__dirname, '/client/dist/js'),
filename: 'app.js',
},

module: {
// apply loaders to files that meet given conditions
// loaders transform
rules: [
{
test: /.jsx?$/,
include: path.join(__dirname, '/client/src'),
loader: 'babel-loader',
query: {
presets: ["react", "es2015"]
},
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader',
],
},
]

},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
new CopyWebpackPlugin([
{ from: './server/static/index.html' },
{ from: './material/sample.pdf' },
{ from: 'node_modules/pdfjs-dist/cmaps/', to: 'cmaps/' },
]),
],

// start Webpack in a watch mode, so Webpack will rebuild the bundle on changes
watch: true
};
````

I am very beginner, if you need more information to locate the problem, please let me know, thank you !

[wojtekmaj]

Hello,
don't worry, Webpack can be tricky for most beginners, and actually, for more experienced devs too!
What is suspicious for me is that all the files outputted by Webpack are landing in /js folder. If you by chance did any modifications to the structure, so for example you're moving index.html out of /js folder back to the root folder and modifying <script src /> tags, like so:

- js
 |- app.js
 |- 0.app.js
 |- abcdef123456.worker.js
- index.html

then the paths to any files not directly loaded by index.html might get screwed. I suggest you, for starters, to output everything to root folder.

[wojtekmaj]

Regarding the path to sample.pdf, React-PDF won't even try to load it if it failed to load the worker file. But I think the correct path would be /js/sample.pdf, because it's relative to the place the code will be ran from, and not relative to the place your source code is in. The latter would be true if you would decide to load the PDF file via Webpack's file-loader.

[MeganGong]

Hello, wojtekmaj
Your suggest has solved my problem, I have output every thing to root folder, and it works, thought I still haven't figured out what was wrong before. I have compared the two output file, everything is the same, so I guess maybe some kind of dependencies in the root file was missing before.

Thank you very much! Have a nice day!

[wojtekmaj]

You're welcome! Glad to help.

I assume you may have issues with output section of Webpack config. Perhaps it's missing publicPath parameter? I suppose you need to specify that one if out want to output js files to a different directory than root.

[weasteam]

@wojtekmaj Same problem here, would you please let me know how can I change my configure file? Beginner of webpack.

...
module.exports = {
    entry: [
        './src/index.js'
    ],
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
...
};

[wojtekmaj]

@weasteam, have you read about publicPath parameter? If not, check it out and if you still have issue we will figure something out.

Mind you, publicPath should go to output.

[weasteam]

@wojtekmaj
No, I tried with below code, it is still not working:

    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: path.join(__dirname, 'public')
    },

Also, I noticed the example code in documentation is never correct for me:
https://github.com/wojtekmaj/react-pdf

import { Document } from 'react-pdf/dist/entry.webpack';

I have to use this code

import { Document, Page } from 'react-pdf/build/entry.webpack';

[wojtekmaj]

@weasteam What you see on README.md on this repo currently is the bleeding edge version on master branch. If you want to see documentation for specific release, you should use the following.

[weasteam]

For those who might still have the problem, I resolved it via:

Copy pdf.worker.min.js from pdfjs-dist, then in your code

import * as PDFJS from 'pdfjs-dist/build/pdf';
import { Document, Page } from 'react-pdf';

PDFJS.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js'; 

[wojtekmaj]

Mind you, that's how you do it in the newest React-PDF, using newest PDF.js, If I recall correctly on 3.x you'd need to set pdfjs.PDFJS.workerSrc instead.

[wojtekmaj]

Duplicate of #97