Help with webpack and reading PDF files

🙋Get Help
,
1

Hey all,

I am trying to use the react-pdf package in order to display some PDF files in my frontity project. I have tried service the PDF files both as a URL from my WP media URL (working fine in a browser) and as a static file in the code.

When importing the file import pdfFile from "./sample-pdf.pdf"; and passing it to the component, webpack does not build and I get this error:

Error: ./packages/client-name/src/components/flipbook/sample-pdf.pdf 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./packages/client-name/src/components/flipbook/pdfViewer.js 3:0-38 4:259-266
 @ ./packages/client-name/src/components/index.js
 @ ./packages/client-name/src/index.js
 @ ./build/bundling/entry-points/client-name/client.ts
 @ multi webpack-hot-middleware/client ./build/bundling/entry-points/client-name/client.ts

And when using the URL from WP Media, I get the following error:

ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
    at handleParseError (/home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/webpack/lib/NormalModule.js:469:19)
    at /home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)

This lead me to dive into how I can customize webpack in Frontity to enable the file loader, where I came accross this thread: https://github.com/frontity/frontity/pull/812

Here’s what I tried to do so far:

  • I updated frontity and its dependencies to the latest versions.
  • Tried to create the frontity.config.js file in my project’s root folder and added the following:
export const webpack = ({ config, mode, target }) ={
  // Add support for a new file type.
  config.modules.rules.push({
    test: /\.(otf|pdf)$/,
    loader: "file-loader",
  });
};

I also tried out a few different variations of the above to no avail.

And if it is of any use, here’s the code where I’m using react-pdf (which might not even by correct, I am using @frontity/react-easy-state here, which is the first time I use it and the only place it is used in this project.

Now I might be doing something extremely wrong, or missing a step for the frontity.config.js file to be working, but I couldn’t find a way around this. Any help is greately appreciated!

P.S. I created this project well before the custom webpack config was made, but updated afterwards. The project was creased using npx frontity create project-name command.

2

I really need help with this one, and would appreciate any input or pointing in any direction.

3

Hi @samplep182,

Thanks for opening this issue. You are almost there! The only problem you are running into is that the fontity.config.js file needs to be scoped to a package and used in your site settings. So, you can keep the config you have, but move it into a local package. For example ./packages/webpack-file-loader. And in there move your frontity.config.js. Afterwards use it in your packages list.

root/frontity.settings.js
[...]
root/packages/webpack-file-loader
root/packages/webpack-file-loader/frontity.config.js
4

Hey @cristianbote, thanks a lot for the response! Will try this tonight and get back to you.

1 Like
5

Hello @cristianbote, I was able to squeeze in a few minutes to do this, still receiving an error.

The error:
Error: Cannot read property 'rules' of undefined

I believe this is coming from the config.modules.rules.push({ line inside frontity.config.js (Complete code in the initial post). However, I do not understand this enough to figure out what to do next to try to resolve the issue.

Here’s what I did in full (might also be helpful for others who might run into a similar scenario):

  • Created webpack-config folder inside the packages directory.
  • Moved frontity.config.js to that folder.
  • Created a package.json file in the same folder, similar to the one created inside the theme.
  • Added the following to frontity.settings.js under the settings object:
packages: [
   ......
   {
     name: "webpack-config",
   },
   .....
 ],
  • And finally added "webpack-config": "file:packages/webpack-config", to the dependencies in the main npm package.json file.
  • Ran npm i which installed the new dependency successfully.
  • Receiving an error when I run npx frontity dev

Thanks again!

6

Oh, my bad. Haven’t validated your code, but I am pretty sure there’s no modules but rather module without an s.

1 Like
7

Hello @cristianbote, I did the above and it worked! Thank you.

However, I am back to receiving the first error, I tried different loader options and configs that I can find online, but to no avail. Here’s the error:

ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
    at handleParseError (/home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/webpack/lib/NormalModule.js:469:19)
    at /home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /home/samplep182/SP/client-name/dev/client-name-front-end-dev-frontity/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:73:3)

I also tried using different PDF files, just in case, but still same error.

And here are some of the webpack configs that I tried:

test: /\.(otf|pdf)$/,
loader: "raw-loader",

test: /\.(pdf|gif|png|jpe?g|svg)$/,
use: "file-loader?name=[path][name].[ext]",

test: /\.(pdf|png|jpg|gif)$/,
    use: [
      {
        loader: "file-loader",
        options: {},
      },
    ],

I have to run now, but will be back for for this tonight. Thanks a lot for your help!

8

Hello @cristianbote I would appreciate any additional help. Not sure where to look next!

9

Just a quick update, reading pdf files is working properly, the issue is happening when I am doing import { Document, Page } from "react-pdf";, which in turn is trying to import stuff from pdfjs-dist (a dependency that is included in the node_modules folder of that package, although it can be downloaded independently). And from what I understood, pdfjs-dist has compiled binaries, and I guess this is what webpack is having trouble loading.

I tried to do some research about this, but couldn’t come across anything that resolves this issue. Any input is highly appreciated!

10

I finally managed to solve this. Here are the steps:

  • Used the following imports in the file where I am using react-pdf 
import { Document, Page, pdfjs } from "react-pdf/
dist/umd/entry.webpack";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
  • Added node-loader and file-loader in webpack config, here’s the final code:
    Make sure to use a node-loader version that is compatible with webpack v4, I used node-loader@1.0.3 
export const webpack = ({ config, mode, target }) => {
  // Add support for a new file type.
  config.module.rules.push(
    {
      test: /\.pdf$/,
      use: ["file-loader"],
    },
    {
      test: /\.node$/,
      use: ["node-loader"],
    }
  );
};

And note sure if worker-loader is also required.
All loaders are devDependencies. Add --save-dev when running npm i.

This was a fun learning journey!

2 Likes