Error: The property 'pathname' cannot be read, as it is null

UPDATE: Removing this section from _document did solve the issue, but why?

<Link href={`/search`} prefetch={false}>
                <a
                    className="d-inline-block text-center"
                    style={{ textDecoration: 'none', color: darkColor }}
                >
                    <Search
                        width="23px"
                        height="23px"
                        color={darkColor}
                        style={{ display: 'block', margin: '0 auto' }}
                    />
                    <div className="icon-lbl">
                        <span>search</span>
                    </div>
                </a>
            </Link>

I recently deployed a website to AWS which consists of production and development stages. Interestingly, the production site kept encountering errors while the dev site was functioning perfectly with identical code.

The error message that persisted was:

web-app_1  | TypeError: Cannot read property 'pathname' of null
web-app_1  |     at Link (webpack-internal:///./node_modules/next/dist/client/link.js:159:14)
...

I attempted to revert to the previous version, however, no changes were observed.

Any assistance would be highly appreciated!

reactjsnext.js

Answer №1

UPDATE: It appears that many nextjs developers are facing a common issue, possibly due to recent changes in the latest versions. You can refer to this PR which addresses the issue: https://github.com/vercel/next.js/pull/15604

The fix is expected to be implemented soon.

To resolve the problem, you can simply replace all Link items with plain anchor elements as shown below:

        <a
            className="d-inline-block text-center"
            style={{ textDecoration: 'none', color: darkColor }}
            href="/search"
        >
            <Search
                width="23px"
                height="23px"
                color={darkColor}
                style={{ display: 'block', margin: '0 auto' }}
            />
            <div className="icon-lbl">
                <span>search</span>
            </div>
        </a>

If you manage to identify the root cause of this issue, kindly inform me.

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

Caution: An issue has been encountered when attempting to use the format function of the timeago library

WARNING in ./node_modules/timeago.js/esm/format.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago. ...

reactjsnpmtimeago

Next.js presents a challenge with micro frontend routing

In the process of developing a micro frontend framework, I have three Next.js projects - app1, app2, and base. The role of app1 and app2 is as remote applications while base serves as the host application. Configuration for app1 in next.config.js: const ...

javascriptwebpacknext.jsmicro-frontendwebpack-module-federation

Tips on how to customize Material UI box component for overlay styling

I'm a beginner in the world of styling components and creating visual designs that meet my preferences. My goal is to design two overlapping box components that will showcase user statistics and daily targets in a sleek and professional manner. The ...

reactjsmaterial-ui

Experiencing difficulty importing Materialize CSS JS into React

Good day everyone, I've been facing challenges in implementing materialize css into my react-app, specifically with the JavaScript files. After trying various methods, I believe that I have made some progress using the following approach: In my &ap ...

javascriptnode.jsreactjsnpmmaterialize

Is there a way to activate and change the color of a Radio Button when it is clicked?

Is there a way to change the background-color of a clicked Radio Button so it appears highlighted? For example, when the first choice is clicked, I want it to stand out visually. This is the current UI displaying the choices: https://i.stack.imgur.com/a7 ...

javascriptreactjsmaterial-ui

While trying to set up a development server in Firebase, I mistakenly deleted my build folder

I recently encountered an issue with my Firebase project. While trying to set up a development server for my existing React web app that is already in production, I ran into some unexpected problems. firebase use bizzy-book-dev firebase init firebase ...

javascriptreactjsfirebasefirebase-hosting

Issues with Docker port publishing on Windows 10

Recently, I've been diving into the world of Docker and ran into an issue with port publishing from a docker container to the host machine. To start off, I built an image for a simple React app (using Vite) by running the command docker build -t reac ...

reactjswindowsdockerportvite

NextAuth asynchronous function completion occurring before value is returned

When signing in, I am working on querying FirestoreDB and then retrieving the user data or null. I have attempted to use async await for this purpose, but the dependent code executes before the database query is complete. This issue is evident when "CORRE ...

reactjsfirebaseasynchronousnext.jsnext-auth

Elevate state in React to modify classNames of child elements

I have a structured set of data divided into 6 columns representing each level of the hierarchy. When a user makes selections, their chosen location is highlighted with a dynamic CSS class name and displays the relevant data list. I've managed to impl ...

javascriptreactjsstateevent-bubbling

Clearing input fields after submitting a form in React can be achieved by setting the

As I work on completing my portfolio, I've reached the final page which is the contact form. Most of it is done and set up with emailjs to receive messages as expected. The issue I'm facing now is that upon submitting the form, I am unable to cl ...

reactjsformsemailmaterial-uiinput-field

Unused React import in the index.js file

Just starting to explore the world of reactJS. import React from 'react'; import ReactDOM from 'react-dom'; var App = ()=>{ return <div> Hello !!</div> } ReactDOM.render(<App />, document.getElementById(' ...

reactjs

What is the best way to include a variable or literal as a value in styled components?

When it comes to managing various use cases, I always rely on props. However, I am currently facing a challenge in changing the border color of a styled input during its focus state. Is there a way to utilize props for this specific scenario? Despite my f ...

javascriptcssreactjstypescriptstyled-components

Is it possible to incorporate AngularJS 1.4, AngularJS 2.0, and ReactJS all within the same project?

My project is a collection of tags that are referred to by different names in various languages. I refer to these elements as views. Currently, our users are creating views using Angular 1.4. I am looking to provide flexibility to our users so they can ...

angularjsreactjs

When using Material UI select inside a React datatable component, an error occurs mentioning that event.target.getAttribute is not a valid function

Recently, I started using the react-datatable-component and incorporating custom cells to enable editing for specific fields. Unfortunately, I encountered an issue while implementing the Select field from material UI. It was giving me an error stating tha ...

reactjsmaterial-ui

The maximum date setting in the Material UI MobileDatePicker is not functioning correctly

I am having trouble understanding how to use the maxDate prop in the MobileDatePicker component. Whenever I attempt to set it as maxDate={new Date()}, I find that I can still select dates beyond the current date. Visit this codesandbox for more details &l ...

reactjsmaterial-ui

Discover the optimal method for integrating a Next.js CSR React application with Django and PostgreSQL

I have a question about developing a full-stack app. Currently, I am using a Next.js React app on the frontend and a Django app with a PostgreSQL database on the backend. There are two main approaches I have seen to integrate all of these components seaml ...

reactjsdjangopostgresqldjango-rest-frameworknext.js

Performing a single API request without utilizing the map function

I'm a beginner in ReactJs and I'm struggling to understand the following change. After a form submission, the code below makes API calls based on the number of items present. In order to make a single call instead of multiple calls by removing t ...

reactjsmobx-react-form

Webpack is refusing to compile

Having an issue with Webpack in my React-Django project. The compiled file (main.js) isn't generating as expected, and I'm struggling to identify the problem. Here's a snapshot of the file tree: |-- __init__.py |-- admin.py |-- apps.py |-- m ...

reactjswebpack

Creating a realistic typewriter effect by incorporating Code Block as the input

I am looking to add a special touch to my website by showcasing a code segment with the Typewriter effect. I want this code block not only displayed but also "typed" out when the page loads. Unfortunately, I have been unable to find a suitable solution s ...

javascriptreactjstypescriptnext.js

How can you style a two-item list in Material-UI React to display the items side by side?

I have a list that contains two items: 'label' and 'value'. This is the current layout: https://i.stack.imgur.com/HufX7.png How can I rearrange the items on the right to be positioned next to the label on the left? https://i.stack.im ...

javascriptcssreactjsmaterial-ui