Error: Unable to locate module 'next/font/google/target.css'

After setting up Next.js version 14.0.1 on Node.Js v20.9.0 and Ubuntu 20.04, I encountered an error right from the start.

Failed to compile
/var/www/html/C#/nextApp/app/layout.js

Module not found: Can't resolve 'next/font/google/target.css?{"path":"app/layout.js","import":"Inter","arguments":[{"subsets":["latin"]}],"variableName":"inter"}'

I tried removing the node_modules folder and then reinstalled the modules using npm i. I am aware that next/font is already integrated into Next.js. The path next/font/google/target.css exists in node_modules, but the target.css file is empty.

What could be causing this issue with my application?

cssnode.jsnext.js

Answer №1

I have identified the issue and fixed any errors that occurred initially. The pathway for my project was "/var/www/html/C#/nextApp". A better path would be: "/var/www/html/Csharp/nextApp". It seems to be sensitive to these details. I discovered the problem within _document.js located in ".next/server/pages/".

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

The buffer for the operation `users.insertOne()` exceeded the timeout limit of 10000 milliseconds, resulting in a Mongoose

I am currently utilizing a generator that can be found at this Github link Project repository: Github Project Link Encountering an issue when attempting to input a user using the `MASTER_KEY`, I keep receiving the following error message: MongooseError ...

javascriptnode.jsmongodbexpressmongoose

CSS Animations are effective in CodePen, but unfortunately, they do not function properly once integrated into an ASP.Net project

I created a unique design on codepen with a background animation, which functions properly there. However, when I integrate it into my ASP.Net Core project, the animation doesn't work as expected. The file references seem correct because the backgroun ...

htmlcsscss-animationsasp.net-core-2.0

Looking to effortlessly move and arrange items with ng2-drag-drop in Angular 2?

I have encountered a problem with the ng2-drag-drop library. I am trying to drag and drop items from one div to another, and then freely move the dropped item within the droppable area. One issue I'm facing is that when I drop my draggable item in th ...

htmlcssangulartypescriptdrag-and-drop

Accessing PUT/POST/DELETE endpoints directly from the backend through the browser without the need for UI connectivity

How can PUT/POST/DELETE methods be implemented in NodeJS directly within the browser? router.put('/sync/:syncId', (req, res) => { res.send(JSON.stringify({ "status": 200, "error": false, "response": "HELL ...

javascriptnode.jsrestexpress

5 Creative Techniques for Manipulating Boolean Variables in If Statements

I am receiving a unique custom header value and the values I am getting are accurate. The expected values include: true, false, undefined. However, the response associated with the value: false is incorrect. Code Snippet let deviceStatus = req.headers[ ...

javascriptnode.js

There was an error encountered while attempting to bundle using jspm,

While I was in the process of cloning an already existing project, I encountered an error message stored in the npm-debug.log: 0 info it worked if it ends with ok 1 verbose cli [ 'c:\\Program Files\\nodejs\\node.exe&apos ...

node.jsnpmjspm

Passing event handlers to Client Components within NextJS 13 and using the <button onClick={}> element is not supported

Oops! It looks like you can't pass event handlers to Client Component props. If you want your component to be interactive, consider converting some of it to a Client Component. const reqHelp = () => { Swal.fire({ title: '1', ...

javascriptreactjsnext.jsserver-side-rendering

Customizable form with dynamic content and interactive button within a set location

One distinct challenge not addressed in the similar inquiries below relates to a FORM component with both a variable segment and a fixed footer for submit buttons. The objective is to present: A header (a table set to 100% width including a logo and tex ...

htmlcssformsflexbox

Tips for sending images as properties in an array of objects in React

I've been experimenting with various methods to display a background image underneath the "box" in styled components. How can I pass an image as a prop into the background image of the box with the image stored in the array of objects? I'm unsure ...

javascripthtmlcssreactjs

Retrieve all entries and merge a field with aggregated information in Mongoose (MongoDB)

I am faced with the challenge of working with two Mongo collections, Users and Activities. The Activities collection consists of fields such as createdAt (type Date), hoursWorked (type Number), and a reference to the user through the user field. On the oth ...

javascriptnode.jsmongodbexpressmongoose

Ways to share socket.io instance with other TypeScript modules

When it comes to exporting an io object obtained from initializing socket.io to my router module in typescript, I am unsure whether I should export the io object from the server.ts module or initialize socket.io in my router module. Are there any other rec ...

node.jstypescriptexpresssocket.io

Can you make two columns in CSS that are left floated and maintain their original order?

While the title may not provide much clarity, I am struggling to put into words exactly what I am trying to achieve. I have created a layout in Photoshop which I have shared below to help illustrate my goal. Essentially, I have a blog that displays my sto ...

javascripthtmlcss

Tips for exiting a Terminal window while running a node.js file without interrupting the process?

After starting a file with node.js (such as a http server) by typing "node example.js", I noticed that when I close the Terminal window on my Mac OS X Lion, the process stops and no longer responds to requests. The same issue occurs when using "ctrl c" o ...

macosnode.jsterminal

The use of the "connect-timeout" Express middleware results in the error message "Cannot set headers after they have been sent."

Here is the code snippet: timeout = require('connect-timeout') app.get('/', timeout('5s'), function(req, res){ ##DO SOMETHING 1 ##DO SOMETHING 2 ##DO SOMETHING 3 res.send('ok'); ##line 7 }); When a user ma ...

node.jsexpressconnect-timeout

Do not include the nextjs api URL in the Sentry events

I have a nextjs app integrated with Sentry. I am looking to add a new api route, such as api/status, without sending it to Sentry to avoid cluttering logs and exceeding my quota. After some research, I discovered that there is an array called denyUrls whi ...

next.jssentry

To properly document the results, I must utilize a button to record the identification of a specific color

I'm working on a code that creates a clickable box which changes colors from black to green to white by going through different shades of green whenever the mouse is clicked. What I now need to do is implement a feature that displays the current shade ...

javascriptjqueryhtmlcssexcel

Prevent clicking until the IE 10 and 9 windows have fully loaded

My goal is to prevent clicking on an image element until all the resources have finished loading, enabling the click only after the window.load() or when document.readystate reaches complete status. While this code works well in Chrome and Safari, I am fac ...

jquerycssinternet-explorerclickpointer-events

How can I make an absolutely positioned div slide down from a specific area on the page using jQuery's slideDown() function?

I have a website project in progress where the main image on the homepage is of a house with windows and a door. The idea is that when a user clicks on a window, a <div> should appear with some text. Similarly, clicking on the door should trigger a & ...

jquerycsshtmlcss-positionslidedown

Is it possible to animate multiple SVGs on a webpage with just the click of a button?

Is there a way to trigger the animation in the SVG each time a next/prev button is clicked while navigating through a carousel where the same SVG is repeated multiple times? The carousel is built using PHP and a while loop. jQuery(document).ready(function ...

javascriptjquerycssanimationsvg

Automatically redirect users to a new page using ReactJs/NextJS after a brief delay of 5 seconds

After a customer logs in, I want to show them a welcome page that automatically redirects them to another page after 5 seconds. To achieve this, I initially set the state with a default value of 5 seconds and then used setInterval to count down by 1 every ...

reactjsnext.js