The export named 'PDFDataRangeTransport' could not be located when utilizing react-pdf in a Next.js application

Hey there! I'm currently working on rendering a PDF using the react-pdf library in my next app, but I've run into a problem:

SyntaxError: The named export 'PDFDataRangeTransport' cannot be found in the module 'pdfjs-dist'. This module is a CommonJS one, which may not fully support all exports as named exports. CommonJS modules can be imported using the default export like so:

import pkg from 'pdfjs-dist';
const { PDFDataRangeTransport } = pkg;

I have updated the next.config.js to include the following changes:


webpack(config, options) {
    config.module.rules.push({
            test: /\.node/,
            use: 'raw-loader',
        },
        {
            test: /\.mp3$/,
            use: {
                loader: 'file-loader',
            },
        });
    return config;
},

However, while paging, an issue arises. Strangely, if I exclude the Document component and let the page render first before adding back the Document component, everything renders correctly.

Answer №1

For more information, you can visit this link

To resolve any problems, consider reverting back to version 7.2.0.

Answer №2

The issue has been resolved in the latest update, version 7.3.3

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can one properly extend the Object class in JavaScript?

I have a scenario where I want to enhance a record (plain Javascript object) of arrays with additional properties/methods, ideally by instantiating a new class: class Dataframe extends Object { _nrow: number; _ncol: number; _identity: number[]; co ...

Unable to submit a fetch request

I've been searching for quite some time without finding any answers to this particular issue. The problem I'm facing is that when I attempt to send an asynchronous request to another web page, I'm not receiving any response. I suspect that t ...

What is the best way to run a scheduled task automatically using node-cron?

I have a custom function that saves data to the database using the POST method. When testing it with Postman, I send an empty POST request to trigger the controller. Upon execution, the function triggers two more functions. One of them is responsible for ...

Button and input elements within Popover HTML content failing to display

I'm attempting to include a button in a popover, but for some reason, it's not showing up. Is the way I've set it up correct or is there a more effective method? $('#myinput').popover({ trigger : "focus", container : ...

"Extracting Text from Images: Convert Images to Text using Optical Character Recognition

While referencing a live Codepen demonstration available at this link, the application functions correctly when the "choose file" button is clicked to upload an image from the local computer and extract text from it. However, my question is how can I uploa ...

Refreshing the page in Next.js causes issues with the CSS classNames

I am currently in the process of migrating a React SPA to Next.js, and I am relatively new to this framework. The issue I am encountering is that when I initially load the Home page, everything appears as expected. However, if I refresh the page, incorrect ...

The Ajax form's malfunction is attributed to JSON, as it throws a parser error indicating a SyntaxError. Specifically, the JSON.parse function encounters an unexpected end of data at line 1, column 1

I understand that this is a commonly asked question, but I have tried all the solutions provided and none of them have worked for me. My specific issue is that I am unable to load a JSON response from the server using AJAX. Here's the setup: my "scrip ...

Receiving a NULL value instead of the expected string in the soap request

My mobile application interacts with a SOAP web service using AJAX. The user is required to input their username and password in order to log in. When the login button is clicked, a JavaScript function is triggered to send the data to the web service via ...

The Analog Clock is unable to access the property of null

I'm struggling to understand what's wrong here. The querySelector doesn't seem to be functioning correctly as I keep encountering the error "cannot read the property of null" on line 10 of my JavaScript code. const deg = 6; const hr = docum ...

Achieving success was like uncovering a hidden treasure chest after a successful

Is there a way to address this JSON data issue? success{"data": [{"id":"1","name":"something1"},{"id":"2","name":"something2"},{"id":"3","name":"something3"}] } The success variable contains the JSON data. This is how the server script returns the data: ...

Tips for accessing every "results" (parameters) from an API

Here is the response I received after making an API call in my attempt to retrieve each "bloc" result using a .forEach. const app = express(); const axios = require('axios') jobList = []; app.get('/getAPIResponse', function(req, res) ...

What is the best way to apply various styles to a single CSS class?

I'm in the process of implementing a dark mode feature on my website, and I want to do it without using any boilerplate code. My plan is to create a .darkmode class in CSS, apply styles to it, and have JavaScript add the darkmode class to the <bod ...

Transform Ajax response into dropdown menu option

I have made an ajax call and received HTML as a response. Now, I need to convert this output into options and add them to select tags on my webpage. <div class="views-element-container"> <div class="view view-contact-view-id-conta ...

Set up a trigger to activate when a WordPress User Role is selected, or alternatively, execute JavaScript

Looking for a solution to detect when a new user is created with a custom User Role set to lessee. Options include adding a trigger through WordPress filters or actions, or detecting the change in JavaScript using an event listener. I have identified the ...

Generating forms dynamically in Vue using code

I'm looking to prompt the user to specify how many points they want to create, followed by entering coordinates for each point. One approach I attempted involved using an initial text field to capture the number of points desired, and then using a lo ...

An error occurred while trying to serialize the `.res` response received from the `getServerSideProps` function in

I encountered the following issue while utilizing the getServerSideProps function to fetch data from Binance API. import binance from "../config/binance-config"; export async function getServerSideProps() { const res = await binance.balance(( ...

Search for text within the nearest <p> tag using HTML and jQuery

My table contains different td elements with the same ID, as shown in this foreach loop: <td class="AMLLeft" style="display:inline-block; !important">ID: <p class="important">${item.id}</p> </td> <td align="right" nowrap="tr ...

Triggering the execution of a JavaScript function associated with my project through the ng-click directive

I am facing an issue with calling a JavaScript function in my project that requires 3 parameters. I am trying to pass these parameters from an array using ng-repeat. When I use the onclick event with predefined parameters, the function works fine. Howev ...

Tips for decreasing bar height in Chart.js

Currently, I am using a bar-chart from chart.js along with bootstrap. The canvas is contained within a div that has the class col-md-8. While it works properly, I have noticed that the height of the bars is too high. I tried looking for a barHeight proper ...

Is the NPM package not being imported? How exactly is it being utilized?

mediacms-vjs-plugin is a unique plugin designed for Video.js. The MediaCmsVjsPlugin.js source code begins with: import { version as VERSION } from '../package.json'; import 'mediacms-vjs-plugin-font-icons/dist/mediacms-vjs-icons.css'; ...