Module parse failed: Unexpected token (401:22)

NiharikaSrinivasa commented 4 months ago

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

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 (

{ 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); }} />

Page {pageNumber} of {numPages}

); }

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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

NiharikaSrinivasa commented 4 months ago

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

wojtekmaj commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

Have you tried v5 as i suggested?

NiharikaSrinivasa commented 4 months ago

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 commented 4 months ago

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.

NiharikaSrinivasa commented 4 months ago

Hi @wojtekmaj thanks a lot for your response the y axis of elements is loading from bottom left corner now can i set it to top left corner of page?

saranyaanantapalli commented 4 months ago

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?

github-actions[bot] commented 3 weeks ago

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

github-actions[bot] commented 1 week ago

This issue was closed because it has been stalled for 14 days with no activity.

wojtekmaj / react-pdf