react-pdf v6 Module parse failed: Unexpected character '#'

[sabotag]

Before you start - checklist

• [X] I followed instructions in documentation written for my React-PDF version
• [X] I have checked if this bug is not already reported
• [X] I have checked if an issue is not listed in Known issues
• [X] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

Our team is waiting for a new version of react-pdf with a new build of pdfjs-dist, which has a fix for Hebrew, so for the test, we tried to install the 6th version of react-pdf but after installation we got the following error

Steps to reproduce

install react-pdf 16 or 17 react-scripts: 3.4.4 implement [email protected]

Expected behavior

Actual behavior

./node_modules/pdfjs-dist/build/pdf.js 1390:17
Module parse failed: Unexpected character '#' (1390:17)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
|         class PDFDocumentLoadingTask {
>           static #docId = 0;
| 
|           constructor() {

Additional information

how can we solve this problem? Thank you

DEMO

Environment

• Browser (if applicable): chrome
• React-PDF version: 6
• React version: 17
• react-scripts: 3.4.4

[wojtekmaj]

Hmmm, tried running 6.0.0-beta.3 with my Create React App 5 sample app and it went without any issues. I suspect react-scripts 3.4.4 might be a bit too old 🤔

[quarryman]

Same issue here. As far as I am concerned react-scrits 3.x.x still seems to be pretty common these days and migrating to 4.x branch sometimes is not an option for any reason

Any chances to get some help with this?

[wojtekmaj]

Maybe it's possible to update Babel manually? I hope they didn't pin Babel version in CRA?

[FilipKittnar]

Hello, I am on react-scripts 4.0.3 and I have the very same problem.

[wojtekmaj]

We have tests for CRA 5, CRA 4 might need additional configuration which I haven't discovered yet

[SauravPatel3042]

This is my code import React, { useState } from "react"; import { Document, Page } from "react-pdf/dist/esm/entry.webpack";

import "react-pdf/dist/esm/Page/AnnotationLayer.css"; import "react-pdf/dist/esm/Page/TextLayer.css";

const PdfPreview = ({ data }) => { const [numPages, setNumPages] = useState(null); const [pageNumber, setPageNumber] = useState(1);

const onDocumentLoadSuccess = ({ numPages }) => { setNumPages(numPages); };

const goToPrevPage = () => setPageNumber(pageNumber - 1 <= 1 ? 1 : pageNumber - 1);

const goToNextPage = () => setPageNumber(pageNumber + 1 >= numPages ? numPages : pageNumber + 1);

return (

<button onClick={goToPrevPage}>Prev <button onClick={goToNextPage}>Next

Page {pageNumber} of {numPages}

  <Document file={data.path} onLoadSuccess={onDocumentLoadSuccess}>
    <Page pageNumber={pageNumber} />
  </Document>
</div>

); };

export default PdfPreview;

Error

packages

"react-pdf": "^6.0.3", "pdfjs-dist": "^3.0.279",

please give a solution

[yhunglee]

Hi all, #'s meaning is private class member since typescript 3.8 starts support. Please make sure you use the package: @types/react-pdf version 5.0.5. This version of @types/react-pdf supports ts3.6 and ts3.6 don't introduce # as private class member.
Also please don't use version 5.0.9 of @types/react-pdf because it supports both ts3.7 and ts3.8.

I have tested combinations and they work on environment and packages: @types/react-pdf: 5.0.5 <- This works on ts3.6. It's critical react-pdf: 5.3.0, 5.3.2. I believe later versions of 5.3.0 in series 5 will worked as 5.3.0. react-script: 3.4.3 react: 16.13.1 pdfjs-dist: 2.6.347 typescript: 3.7.3 nodejs: 14.19.0

other packages for assist compile: copy-webpack-plugin: 6.4.1 webpack: 4.42.1 react-app-rewired: 2.1.5

[victors1681]

same thing in storybook

"@storybook/react": "^6.5.13",
"react-pdf": "^6.1.1"

ERROR in ./node_modules/pdfjs-dist/build/pdf.js 1413:9
Module parse failed: Unexpected character '#' (1413:9)
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
| 
| class PDFDocumentLoadingTask {
>   static #docId = 0;
| 

I also tried to add "@babel/plugin-proposal-class-static-block", but did not work.

[veddermatic]

Another data point; I'm seeing this with:

"react-scripts": "^4.0.3",
"react": "^16.12.0",
"react-pdf": "^6.2.0",
"typescript": "^4.2.4",

[clmz]

@victors1681 Did you figure out any solution? I have the same issue with storybook.

[Kajanan02]

Did you figure out any solution? I have also this same issue :(

[assdi54]

also have same issue ./node_modules/pdfjs-dist/build/pdf.js 1410:17 Module parse failed: Unexpected character '#' (1410:17) File was processed with these loaders: * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | | class PDFDocumentLoadingTask { > static #docId = 0; | | constructor() {

[lag-of-death]

Had the same issue and found no solution (had to revert to react-pdf version 5.0.0)

[apendua]

I think that this problem is not specific to create-react-app. Most of the tooling will not transform code that comes from node_modules, unless you explicitly ask them to do so. Clearly, private class properties are not supported by all browsers yet so if some project is willing to support older browsers as well they will not be able to include this package easily. I am wondering if it would be possible to have an es5 or perhaps es6 compatible builds distributed along with this package.

Edit: I've just realized that this comment would be more appropriate for https://github.com/mozilla/pdfjs-dist.

[apendua]

Ok, so apparently pdfjs-dist actually ships with builds for legacy browsers, but this needs to be imported differently, e.g.

import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf';

Perhaps it would be more prudent if react-pdf could import those legacy (more compatible) builds instead?

[wojtekmaj]

Legacy builds were dropped in #988. One of the main reasons was that this made the code insanely big and this kept crashing people's machines due to out of memory errors.

[walpolsh]

@wojtekmaj, getting the same error here:

./node_modules/pdfjs-dist/build/pdf.js 1540:17
Module parse failed: Unexpected character '#' (1540:17)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
|         class PDFDocumentLoadingTask {
>           static #docId = 0;
| 
|           constructor() {

    "react-pdf": "^6.2.0",
    "@types/react-pdf": "^6.2.0", // I'm not using typescript in the main project, just added upon previous suggestion.
    "react-scripts": "4.0.0",

Oddly enough it was working until I changed branches and it was totally broken when I switched back.

edit: I tried rolling back to 5.7.2 and still getting the same error, unless 6.2.0 is cached or something weird.

The error goes away when I comment the import statement out: import { Document, Page, pdfjs } from "react-pdf";

Also, I'm using Chrome: 108.0.5359.98, but that shouldn't make a difference since this fails during the compilation step.

[sai-gillingham]

I've had this error on react-pdf above 4.2.0 so if you are desperate to get this implemented in a hurry I would suggest downgrading to 4.2.0.

Currently running on: react-scripts: 4.0.3

[evanjmg]

Anyone have any build solutions?

[Nubuck]

I managed to get react-pdf 6.2.2 to work with deps webpack 4.46.0 and @babel/preset-env 7.20.2

I found using the include property of the babel rule and adding pdfjs-dist after the source built and rendered successfully. Heres and snip of the webpack config for the rule:

const np = require('path')

module.exports = {
  // ...
  module: {
    // ...
    rules: [
      {
        test: /\.(mjs|jsx|js)$/,
        include: [
          np.resolve('src'),
          // babel-env has all the presets to build pdfjs, just needs to be included
          np.resolve('node_modules/pdfjs-dist/build'),
        ],
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              babelrc: false,
              configFile: false,
              presets: [
                '@babel/preset-env',
                // ....
              ],
              plugins: [
                '@babel/plugin-syntax-dynamic-import',
                // ...
              ],
            },
          },
        ],
      },
    ],
  },
}

I hope that helps someone that was also stuck on the Module parse failed: Unexpected character '#' (1413:9) build error

[aviadavi]

did anyone happen to get react-pdf 6.2.2 working via webpack 4? the recommendation below of @Nubuck didn't help. thanks.

[briandiaz]

This is still failing...

[judebaptista18]

@evanjmg Update to webpack 5 it should solve this issue.

[tamourali]

You Needs to downgrade you package version to.

("pdfjs-dist": "2.5.207") This works fine for me.

[ionutmiftode]

after 2 days on this issue I fixed it thanks to @yhunglee's comment.

So I have a CRA with [email protected] and I installed:

"pdfjs-dist": "2.6.347",
"react-pdf": "5.3.2",

and then in the .jsx file I imported like this:

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

So for typings I didn't manage to make it work with @types/react-pdf so I declare the module manually in types.d.ts

declare module 'react-pdf/dist/esm/entry.webpack';

Hope this helps!

[RomualdMashup]

Hello. I have the same issue with Storybook and react-pdf 6.2.2. And I can't find where i should edit Babel configuration...

[mikhail-uchi-ru]

Hola! Any updates on this?

[maesiegrist]

G'day - wondering if there is an ETA for this bug to be fixed? TIA

[tukuna30]

I had same issue in my React app with react-scripts 4.0.3 To render PDF instead of using this lib just used object Jsx tag

Sample usage

import pdfFile from '../../../test.pdf'; <object data={pdfFile} type="application/pdf" width="100%" height="100%"> </object>

[AndrejGajdos]

I was getting this issue in another library [email protected] that installs [email protected]. @Nubuck solution helped me to compile the project with Webpack, but my project was crashing because of an issue:

TypeError: Cannot read properties of undefined...

I added pdfjs-dist@@2.6.347 into package.json and also added "pdfjs-dist": "2.6.347" into yarn resolutions so pdf-viewer-reactjs uses pdfjs-dist@@2.6.347 instead of [email protected] and everything works now.