Module parse failed: Unexpected token (401:22)

[NiharikaSrinivasa]

Before you start - checklist

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

Description

my dependencies -
"react-scripts": "4.0.3",
"react": "^17.0.2",
"react-pdf": "^7.7.0",

I am getting error :
1. Module not found

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

2. Module parse failed: Unexpected token (401:22)

./node_modules/pdfjs-dist/build/pdf.js 401:22
Module parse failed: Unexpected token (401:22)
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.
  |
  | function _isValidProtocol(url) {

      switch (url?.protocol) {

| case "http:":
| case "https:":

Steps to reproduce

install react-pdf and add this code in app.js

import React, { useState, useEffect } from "react";
import { pdfjs, Document, Page } from "react-pdf";
import "react-pdf/dist/Page/AnnotationLayer.css";
import "react-pdf/dist/Page/TextLayer.css";

pdfjs.GlobalWorkerOptions.workerSrc = //unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js;

function App() {
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);

useEffect(() => {
const loadWords = async () => {
const words = await getPageTextContent(pageNumber);
console.log(
"Indices of words on first load:",
words.map((word, index) => ({ word, index }))
);
};
loadWords();
}, []);

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

const handleMouseDown = async (event) => {
const selection = window.getSelection();
if (selection) {
const selectedText = selection.toString();
const range = selection.getRangeAt(0);
const boundingRect = range.getBoundingClientRect();

  const highlightDiv = document.createElement("div");
  highlightDiv.style.position = "absolute";
  highlightDiv.style.left = `${boundingRect.left}px`;
  highlightDiv.style.top = `${boundingRect.top}px`;
  highlightDiv.style.width = `${boundingRect.width}px`;
  highlightDiv.style.height = `${boundingRect.height}px`;
  highlightDiv.style.backgroundColor = "yellow"; // Change color as desired
  highlightDiv.style.opacity = "0.5"; // Adjust opacity as desired

  document.body.appendChild(highlightDiv);

  console.log("Selected Text:", selectedText);
  console.log("Bounding client rect properties:", boundingRect);
  console.log("Bounding client rect width:", boundingRect.width);
  console.log("Bounding client rect height:", boundingRect.height);
  console.log("x1==>", boundingRect.left);
  console.log("x2==>", boundingRect.right);
  console.log("y1==>", boundingRect.top);
  console.log("y2==>", boundingRect.bottom);

  // Extract words from the PDF page
  const pageWords = await getPageTextContent(pageNumber);

  // Find the index of each word in the selected text
  const wordIndices = [];
  let position = 0; // Initialize position counter to 0
  pageWords.forEach((word, index) => {
    if (word === selectedText) {
      wordIndices.push({
        word: selectedText,
        index: index,
        position: position,
      });
    }
    position++; // Increment position counter
  });

  console.log("Indices of selected words:", wordIndices);

  // Find the index of the selected text
  const selectedTextIndex = pageWords.findIndex(
    (word) => word === selectedText
  );
  console.log("Index of selected text:", selectedTextIndex);
}

};

const getPageTextContent = async (pageNum) => {
const loadingTask = pdfjs.getDocument("test07.pdf");
const pdf = await loadingTask.promise;
const page = await pdf.getPage(pageNum);
const textContent = await page.getTextContent();

// Extract words with their coordinates and index
const wordsWithCoordinates = textContent.items.map((item, index) => {
  const transform = item.transform;
  const fontSize = transform[0]; // Assuming the font size doesn't change
  const scaleX = transform[2];
  const scaleY = transform[3];
  const x = transform[4];
  const y = transform[5];
  const word = item.str.trim();
  return {
    word,
    x: x * scaleX,
    y: y * scaleY,
    index,
  };
});

// Log words with coordinates and index
console.log("Words with coordinates and index:", wordsWithCoordinates);

// Extract words only
const words = wordsWithCoordinates.map((word) => word.word);

return words;

};

const onPageLoadSuccess = (page) => {
console.log(page);
console.log("Page width:", page?.viewport?.width);
console.log("Page height:", page?.viewport?.height);
};

return (

<Page
pageNumber={pageNumber}
onMouseDown={handleMouseDown}
onLoadSuccess={onPageLoadSuccess}
scale={1}
canvasLayer={(canvas, pageProps) => {
const { width, height } = pageProps.viewport;
const context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;

        // Draw a rectangle on the canvas
        context.fillStyle = "rgba(255, 0, 0, 0.3)";
        context.fillRect(50, 50, 200, 100);
      }}
    />
  </Document>
  <p>
    Page {pageNumber} of {numPages}
  </p>
</div>

);
}

export default App;

Expected behavior

need the pdf view
and to console x and y , width and height of selected text
along with the number of the occurrence if it is repeating

Actual behavior

Its throwing error and server is not starting up :
./node_modules/pdfjs-dist/build/pdf.js 401:22
Module parse failed: Unexpected token (401:22)
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.
  |
  | function _isValidProtocol(url) {

      switch (url?.protocol) {

| case "http:":
| case "https:":

Additional information

No response

Environment

• Browser (if applicable):
• React-PDF version: "^7.7.0",
• React version: "^17.0.2",
• Webpack version (if applicable):

[wojtekmaj]

You did not provide any info about your environment. You may be using Webpack, but I'm not sure. Can you provide a reproducible example?

[NiharikaSrinivasa]

when I even just install react-pdf and add the above app.js code in app.js file I am getting this reproduced
@wojtekmaj this is the webpack version used :
"peerDependencies": {
"@types/webpack": "4.x",
"react-refresh": ">=0.8.3 <0.10.0",
"sockjs-client": "^1.4.0",
"type-fest": "^0.13.1",
"webpack": ">=4.43.0 <6.0.0",
"webpack-dev-server": "3.x",
"webpack-hot-middleware": "2.x",
"webpack-plugin-serve": "0.x || 1.x"
},

  There is no any webpack.config.js file written in the project
  
  my dependencies of package.json-

"react-scripts": "4.0.3",
"react": "^17.0.2",
"react-pdf": "^7.7.0",

[wojtekmaj]

You may be affected by old version of Webpack not supporting nullish coalescing (?. bit): webpack/webpack#10227

[NiharikaSrinivasa]

Upgrading Webpack is the only solution we got?
I am unable to update the webpack due to other dependencies of my project.

[wojtekmaj]

Updating Babel is worth a shot too, but it doesn't look too good. Upgrading Webpack may be your best choice. What's blocking you exactly?

You could also try a legacy PDF.js build or an older React-PDF version. Try v5? 🤔 But remember that then you're digging a deeper hole for yourself, so I'd use this as a last resort.

[NiharikaSrinivasa]

I added a webpack.config.js file and babel.config.js file by adding those 2 babels (@babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-nullish-coalescing-operator) mentioned in the linked solution by you.
This is causing react version incompatibility

can you please tell which react-pdf version can i use with "react-scripts": "4.0.3" and react 17 version
facing this issue from 2 days

[wojtekmaj]

Have you tried v5 as i suggested?

[NiharikaSrinivasa]

Yes, I tried with version "react-pdf": "^5.7.2",

---

here is the webpack.config.js file :

const path = require("path");

module.exports = {
  entry: "./src/index.js",

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
};

---

here is the babel.config.json file :

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-private-property-in-object"
  ]
}

---

this is the error :

./node_modules/react-data-grid/lib/bundle.js 16:10
Module parse failed: Unexpected token (16:10)
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.
| }
| function scrollIntoView(element) {
>   element?.scrollIntoView({
|     inline: 'nearest',
|     block: 'nearest

[wojtekmaj]

The error does not come from react-pdf, but react-data-grid. Granted though, it's exactly the same problem you started the issue with.

Here are the facts:

• Your Webpack config specifically excludes node_modules from being parsed by Babel
• Your old Webpack version can't understand ?. syntax

You will need to parse files with Babel in order to get old Webpack to work. Try removing

exclude: /node_modules/,

bit. It will be painfully slow, but chances are it might work. If that's so, you can then add exclude back, carefully selecting the packages that needs parsing using negative lookahead.

Once again, you're gonna have a real bad time with outdated Webpack version, and as you can clearly see from the error above, it's not gonna be react-pdf exclusive.

[saranyaanantapalli]

I am using node version 21.16.1
I have these packages installed
react-pdf-viewer/core (3.12.0)
react-pdf-viewer /default-layout(3.12.0)
pdfjs-dist (3.4.120).
dotenv-webpack (8.0.1)
I am facing the same issue. I tried the steps mentioned above. I added babel rule in the webpack config file
and this is my babel config file

{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-private-property-in-object"
]
}

Can I get help in resolving this?