Error encountered when transitioning to TypeScript: Unable to resolve '@/styles/globals.css'

While experimenting with the boilerplate template, I encountered an unusual issue when attempting to use TypeScript with the default NextJS configuration. The problem arose when changing the file extension from .js to .tsx / .tsx. Various versions of NextJS from 13 to the most recent were tested, along with TypeScript 5 and 4.

Error - ./pages/_app.tsx:1:0
Module not found: Can't resolve '@/styles/globals.css'
> 1 | import '@/styles/globals.css'
  2 | import { Analytics } from '@vercel/analytics/react'
  3 |
  4 | export default function App({ Component, pageProps }) {

https://nextjs.org/docs/messages/module-not-found

When I attempt to command+click the file in VSCode, it cannot be located. However, renaming the file to Globals.module.css, resolves this issue. Yet, the error persists: module not found.

Any suggestions?

Check out the related GitHub Issue.

Related: Module not found: Can't resolve '@styles/globals.css'

csstypescriptnext.js

Answer №1

Simply changing the file extension from .js to .ts / .tsx won't cut it - you'll also need to integrate TypeScript into your project. Don't forget to set up a tsconfig.json file with the necessary configurations, ensuring that the baseUrl and paths options are correctly defined as shown below:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    /* ... other configs */
    "baseUrl": "./",
    "paths": {
      "@/*": ["*"],
      "@/public/*": ["public/*"],
      "@/components/*": ["components/*"],
      "@/components": ["components"],
      "@/store/*": ["store/*"],
      "@/store": ["store"],
      "@/pages/*": ["pages/*"],
      "@/lib/*": ["lib/*"],
      "@/styles/*": ["styles/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

However: I highly recommend bootstrapping your project using npx create-next-app@latest and selecting TypeScript when prompted with: 

Would you like to use TypeScript? › No / Yes

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

Developing a custom styling class using JavaScript

Looking to create a custom style class within JavaScript tags. The class would look something like this: #file-ok { background-image: url(<?php echo json.get('filename'); ?>); } Essentially, the value returned from the PHP file (json ...

javascriptjquerycssajax

Angular allows for the dynamic updating of og meta tags

Sharing dynamic content on WhatsApp has been made possible through an API. By utilizing the angular Meta class in my component.ts file, I am able to dynamically update the default meta tag property in index.html with the latest content. ...

htmlangulartypescriptmeta-tagsog-meta

What is the best method to eliminate the 2px flaws on the right edge?

Issue only observed on small screens using Android Chrome (Nexus 5x, Nexus 6) with Android 5+. Cannot replicate problem on a Nexus 4. Utilizing basic bootstrap setup and angular; unsure if related. Experiencing artifacts up to 2px wide on the right side o ...

androidcssangularjstwitter-bootstrapgoogle-chrome

Having trouble determining the reason for the error: Invalid element type

Exploring with Next.js and Metamask I'm currently experimenting with connecting Next.js to Metamask in a local setting to retrieve addresses and balances of accounts. My initial step involves creating a simple user interface where I can place a "wal ...

reactjsnext.jsethereummetamask

Achieving consistent positioning for child elements at the top

I have the following code. I can't figure out why the top position of div1 in the second block is different from the first one. When div1 in child1 contains text or other elements, the top position of div1 and div2, div3 is equal. Can someone explain ...

htmlcssposition

Extracting Raw Body from Stripe Webhook in NextJS

I'm feeling frustrated trying to get a raw body passed for the Stripe webhook in NextJS! Despite trying numerous solutions from various sources, I just can't seem to get it to work. Calling upon the developers with special powers (of which I am ...

javascriptnext.jsstripe-paymentswebhooksserverless-framework

Tips for utilizing CSS container queries in conjunction with the Material-UI framework

I'm looking to implement CSS container queries with MUI. In my code, I want to change the background color to red if the parent width is less than 300px. Check out the sandbox const StyledItem = styled("div")(({ theme }) => ({ border: ...

javascriptcssreactjsmaterial-uicontainer-queries

Connecting Multiple Relationships with Many-To-Many Matches

My database consists of the following entities: @Entity class User { @ManyToMany(type => Group) @JoinTable() groups: Group[]; } @Entity class MediaObject { @ManyToMany(type => Group) @JoinTable() groups: Group[]; } @Entity ...

sqlpostgresqltypescripttypeorm

Issue with updating Angular list reference when deleting an item

My current task involves implementing a feature that displays selected items from a hierarchical structure on the right side. slice.component.ts : import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core&a ...

javascripthtmlangularlisttypescript

Strategies for mitigating the use of Observables when passing data between Angular routes

When trying to exchange data between routes, the most effective method appears to be using a service. To ensure that data is updated and re-rendered in the view, we are required to utilize BehaviorSubject. Based on my understanding, a simple component wou ...

angulartypescriptangular2-observablesangular-router

The vertical spacing in Font "bottom-padding" appears to be larger than anticipated

Recently, I purchased the font Proxima Nova for my project and I am encountering issues with vertical alignment. Despite setting margins, line-heights, and padding to match those of Arial, the results are not consistent as the Proxima Nova appears misalign ...

htmlcssfontsless

steps to create a personalized installation button for PWA

Looking to incorporate a customized install button for my progressive web app directly on the site. I've researched various articles and attempted their solutions, which involve using beforeinstallprompt. let deferredPrompt; window.addEventListener(& ...

javascriptreactjsnext.jsprogressive-web-appsnext-pwa

styling a flex container with aligned text and buttons

I'm attempting to align text on the left and button controls on the right within a display: flex div. <CustomFieldContainer> <StyledWellContainer> <FieldDetails key={id}> <H4 bold>{label}</H4> <Styled ...

cssreactjs

Which files should be included to define the variable $? in jQuery/JavaScript?

I am looking to create a sliding Div over another div in a simple way. The example provided in this Fiddle is exactly what I have in mind, but as someone new to coding, I encountered the warning Uncaught ReferenceError: $ is not defined after transferring ...

javascriptjqueryhtmlcss

What methods can I utilize from Google Maps within Vuex's createStore()?

Currently, I am in the process of configuring my Vuex store to hold an array of Marker objects from the Google Maps Javascript API. Here is a snippet of how my createStore function appears: import { createStore } from "vuex"; export default ...

javascripttypescriptvue.jsgoogle-mapsvuex

Creating uniform-sized flex items with varying image sizes

When setting flex: 1 1 0 on flex items, it does not work as expected especially when the flex items contain images of varying sizes. In this scenario, the flex-item containing the image ends up becoming significantly wider than the others. Below is the H ...

htmlcssflexbox

What is the method for adding a dark, semi-transparent overlay across the entire webpage?

Is it possible to overlay the entire webpage with a 50% opaque black div? I attempted to achieve this by creating a fixed position div at the top of the script with 100% width and height and a z-index of 1. However, this method prevents me from placing an ...

htmlcss

How can I authenticate to enable access to static files in Next.js?

After exploring various authentication options for Next.js that wouldn't require server-side changes, I aimed to prevent users from accessing the website without entering a password. I conducted tests with NextAuth and managed to block pages using se ...

reactjsauthenticationnext.jsnext-auth

Exploring the power of RxJs through chaining observers

In my Angular application, I am utilizing Observables to set up a WebSocket service. Currently, I have the following implementation: readwrite(commands: command[]) : Observable<response[]>{ const observable = new Observable((observer)=>{ ...

typescriptrxjsobservable

Angular - Enhancing the page with valuable information

Recently, I've been developing an Angular application that is designed to function as a digital magazine. This app will feature articles, news, reviews, and more. Along with this functionality, I am looking to include an admin panel where I can easily ...

angulartypescript