react-pdf: [v6] Module parse failed: Unexpected character '#' when using Create-React-App

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

So I have a CRA with react-scripts@4.0.3 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!

If you want to solve this problem you need to switch to “react-pdf”: “^5.3.2” version, this issure may be helpful for you, or see my codebox ！！！！If the codebox runs incorrectly, it is possible to export the project run！！！！

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.

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

You Needs to downgrade you package version to.

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

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

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

I was getting this issue in another library pdf-viewer-reactjs@2.1.2 that installs pdfjs-dist@2.1.x. @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 pdfjs-dist@2.1.x and everything works now.

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",

./node_modules/pdfjs-dist/build/pdf.js 1198:17 Module parse failed: Unexpected character ‘#’ (1198: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() { | this._capability = (0, _util.createPromiseCapability)();

react: 17.0.2, react-pdf: 6.2.2, typescript: 4.2.4,

just use 5.3.2

I fix this issue via updating react-scripts from @4.0.1 to @5.0.1

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

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?