Troubleshooting in Next.js 13: Issue with module not being found while trying to reference a package containing CSS

Currently working with Next.js version 13.4.2 and I have included an npm package that comes with CSS styles and fonts. The issue arises when trying to utilize one of the CSS files within my application. In the layout.tsx file, I imported the CSS file as follows:

import '@leap/core-thin/core.classic-dark.css';

Upon running the project, I encountered the following error message:

../../node_modules/@leap/core-thin/core.classic-dark.css:4:0
Module not found: Can't resolve './@leap/core-thin/fonts/fa-solid-900.woff2'

The problematic section of the CSS code looks like this:

@font-face {
  src: url("@leap/core-thin/fonts/fa-solid-900.woff2") format("woff2"), url("@leap/core-thin/fonts/fa-solid-900.ttf") format("truetype");
}

Adjusting the paths in the CSS file to use a relative path resolves the issue, however, since I do not own the package, I am exploring other methods to configure my project so it can correctly interpret the paths. Any suggestions?

cssnext.js

Answer №1

For those looking to utilize custom fonts that have been downloaded and imported, the process involves using localFont in Next.js and updating the app.js file accordingly.

import localFont from 'next/font/local';

const BeVietnamFont = localFont({
  src: [
    {
      path: '../../public/fonts/BeVietnam-Light.ttf',
      weight: '300',
      style: 'normal',
    },
    {
      path: '../../public/fonts/BeVietnam-Regular.ttf',
      weight: '400',
      style: 'normal',
    },
    {
      path: '../../public/fonts/BeVietnam-Bold.ttf',
      weight: '700',
      style: 'normal',
    },
  ],
  display: 'swap',
});

Nextjs Local Font

Answer №2

Give this a shot:

const applyCSS = require("@leap/core-light/"); // your package path
module.exports = applyCSS({
  useCSSModules: true
});

OR

To include the necessary webpack modules in your next.config.js file, import them with the following code:

const filePath = require("path");
const webpackModule = require("webpack");

Then, outline your custom webpack setup by inserting the specified code snippet:

module.exports = {
  configureWebpack: (config, { isServer }) => {
    if (!isServer) {
     config.resolve.modules.push(filePath.resolve("./node_modules"));
    }
    return config;
  },
};

This configuration utilizes the resolve.modules property to include the node_modules directory as a location for finding imported modules.

Save your updated next.config.js file and restart your Next.js development server. You can now effortlessly import CSS styles from the node_modules folder directly into your Next.js components using standard import syntax.

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

Uploading base64 images to Azure Storage using Next.js is a breeze!

After attempting various alternatives to solve this issue, I discovered that many of them are outdated. Even though the code below runs without any errors and successfully uploads the image while setting the mimetype correctly, it fails to render as an ima ...

node.jsazurenext.jsazure-blob-storage

Tips for customizing text field appearance in Safari and Chrome

I haven't had a chance to test it on IE yet. My goal is to create a unique style for the background image and text box shape, along with borders, for the search bar on my website, [dead site]. If you check it out on Firefox or Opera and see the sear ...

htmlcssformsbrowsercross-browser

Steps to easily modify the color of Font Awesome stacked icons when hovering over them

I have incorporated two Font Awesome icons into my design: fa-circle-thin fa-user-plus These icons are stacked to create a circular icon appearance. <span class="fa-stack fa-sm"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i c ...

htmlcssfont-awesome

What is the reason behind this HTML/CSS/jQuery code functioning exclusively in CodePen?

I have encountered an issue where this code functions properly in JSFiddle, but not when run locally in Chrome or Firefox. I suspect there may be an error in how the CSS or JavaScript files are being linked. In the Firefox console, I am receiving an error ...

javascriptjqueryhtmlcssjsfiddle

I am experiencing issues with my PHP quiz application; it is malfunctioning when I try

In my PHP MySQL quiz application, I have developed two sections: one for students and another for admins. In the admin area, there is an "addquestion" page where the code is as follows: <form class="form-horizontal " action="addquestion.php" method=" ...

phphtmlcssmysql

Tips for Eliminating Unnecessary Space Above the Navigation Bar

I have a problem with the top navbar on my test site. There is some extra space above it that I want to remove so that the navigation extends all the way up to cover the viewport. Here is an image of what I'm trying to achieve: https://i.stack.imgur.c ...

htmlcss

Creating a Docker image for NextJS with an nginx server

Exploring the realm of Docker as a newbie, I am immersing myself in its official documentation. My current venture involves fashioning a NextJS build with a docker image tailored for an nginx server, and here is my roadmap: Commencing by installing the es ...

dockernginxnext.js

Step-by-step guide to creating a dynamic button that not only changes its value but also

I am trying to implement a translation button on my website that changes its value along with the text. Currently, I have some code in place where the button toggles between divs, but I am struggling to make the button value switch as well. Given my limit ...

javascriptjqueryhtmlcss

Material UI defaults remain unchanged despite any emotional influence

I'm currently experimenting with custom styling on a MaterialUI Typography component using the code snippet below: const StyledTitleTypography = styled(Typography)` color: 'black'; font-weight: 'bold'; `; <StyledTitleTypogr ...

cssreactjsmaterial-uistyled-componentsemotion

The appearance of the webkit-scrollbar is not reflecting the intended style

I have successfully created a wrapper for a styled scrollbar in React JS - import styled from '@emotion/styled'; export const ScrollbarWrapper = styled.div(() => ({ maxHeight: '65vh', overflowY: 'auto', '*::-web ...

javascripthtmljquerycssreactjs

Setting a CSS grid column to have a minimum width of `max-content` and a specific

I am trying to create a CSS grid where the column widths adjust based on the content, but with a minimum width of 100px. I attempted using minmax(max-content, 100px), however it did not produce the desired result. In the example below, the narrow column sh ...

htmlcsscss-gridmin

Is there a way to exclusively utilize CSS in order to achieve bottom alignment for this btn-group?

I currently have a series of div elements that I transformed into two columns. https://i.stack.imgur.com/xG7zT.png My goal is to align the PDF/XML button group at the bottom, creating a layout like this: https://i.stack.imgur.com/ijtuH.png This is an e ...

htmlcss

Step-by-step guide on how to turn off the loading animation in react-select when there is no text input entered

Currently, I am utilizing AsyncSelect in my code to generate a text input field. The purpose is to search for a specific text using a REST API and return the results in a select list. Despite everything functioning as expected, an issue arises when initi ...

reactjsnext.jsreact-select

The copyright (©) symbol is unresponsive to rotation

Why can't I rotate the © character? Am I missing something? .copy { font-size: 12px; font-family: Arial; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); } <span class="copy">&copy; This is not ...

htmlcss

React Material Design Cards for Responsive Layouts

Hi there, I am currently navigating my way through Material Design and attempting to ensure that the cards section is responsive by utilizing media queries and flex. However, I have encountered an issue where only a portion of the image is displayed when t ...

cssreactjsresponsive-designmaterial-design

Is there a way to retrieve a state variable from a client component within a server component in Next.js?

Utilizing state variables can be a bit tricky when passing form values from a client component (Component A) to a server component (Component B) responsible for querying an .XML file. How can we access 'aValues' in Component B, especially when de ...

reactjsnext.jsnext.js13

floating point for a list item compared to other elements

nav > ul > li { float: left; } #one { float: left; } <nav> <ul> <li> he has a cow </li> <li > he has a dog </li> <li> he has a mouse </li> </ul> & ...

htmlcss

margin-top: automatic adjustment, with a minimum of 50 pixels

I am trying to add a minimum of 50px margin to the top of my footer tag using CSS, but I haven't been successful with the min() function. I'm not sure if I am overlooking something or if there is another correct approach to achieve this. * { ...

javascripthtmlcss

Images are not displayed when utilizing font-awesome on a MVC 5 website

I'm having an issue where adding font-awesome to the style bundle is causing images not to display correctly. Instead of showing the right icon, I am getting a transparent box. My style bundle configuration looks like this: bundles.Add(new StyleBund ...

csstwitter-bootstrapasp.net-mvc-5font-awesome

Successfully executing complex designs using CSS grid or flexbox

I have a specific responsive layout that I need to achieve using a series of div tags. Below is the HTML structure I have: <div class="container"> <div>1</id> <div>2</id> <div>3</id> <div>4& ...

cssflexboxcss-grid