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

Top-notch loading icon using jquery

Recently, I embarked on the journey of learning Javascript and jQuery simultaneously, and to my surprise, it feels quite manageable. As I delve deeper into creating functions, I am currently working on displaying a loading image. While I initially used on ...

jquerycsshtml

Error: Import statement is invalid outside of a module in next.js

Every time I attempt to run the register.tsx page in my next.js project, I encounter the error message shown below. My Next.Js project utilizes TypeScript. import React, { useState } from 'react'; ^^^^^^ SyntaxError: Cannot use import st ...

node.jstypescriptnext.js

What steps are needed to have typescript recognize a typed function as a throw-statement?

I'm grappling with a typescript issue - I have a custom function that consistently throws an error, which is used to handle null variables. Strangely, if I directly throw an error without using the function, typescript recognizes that the variable can ...

typescript

Tips for concealing divs when hovering over them

I have designed a header for my website with the following styles: .header-cont { width:100%; position:fixed; top:0px; } .header { height:50px; background:#F0F0F0; border:1px solid #CCC; width:950px; margin:0px auto; } .hea ...

htmlcssheader

Creating Personalized Checkboxes for Internet Explorer Versions 7 and 8

I am currently in the process of implementing custom checkboxes for my website. Everything is functioning smoothly on browsers such as IE9 and other modern ones. However, I am encountering issues with IE8 and 7. Below is a snippet of my CSS code: input[typ ...

javascripthtmlcss

Is it possible to disable the pointer event on the parent element only in CSS

Here's the structure I'm working with: <div class='offline'>some text <button class='delete'>Delete</button></div> I want to disable the div using pointer-events: none, but still keep the button activ ...

css

Encountering a Hydration Error with Next.JS and MDX-Bundler when a MDX Component Adds Extra New Lines to its Children

Currently, I am incorporating next.js + mdx-bundler into my project. There is a simple component that I frequently use in my mdx files. Everything runs smoothly with the following code: Mdx is a great <Component>format and I like it a lot</Compon ...

javascriptreactjsnext.jsmdxjshydration

HTML - one div's child element takes precedence over another div

My HTML page features two consecutive divs. The first div contains a child span that has a relative position, causing it to overlap the second div. I have implemented click events for both divs. However, when I click on the span that overlaps the second d ...

javascriptjqueryhtmlcss

Jest is having difficulty locating a module while working with Next.js, resulting in

I am encountering some difficulties trying to make jest work in my nextjs application. Whenever I use the script "jest", the execution fails and I get the following result: FAIL __tests__/index.test.tsx ● Test suite failed to run ...

reactjstypescriptjestjsnext.jsts-jest

Building a table using MUI 5 and the powerful Grid component from Material UI

For my project, I decided to utilize the Grid component of Material UI v5 to create a global table component. This choice was made due to the difficulties encountered when trying to modify the border and border radius for the table row and footer elements. ...

htmlcssreactjshtml-tablematerial-ui

Spacing applied to content within a fresh Vue application

Having been assigned the task of developing a Vue page for my team, I am facing an issue with a persistent white border surrounding the entire page. <script setup lang="ts"> </script> <template> <body> <div>&l ...

htmlcssvue.js

Bootstrap 4 Collapse - Ensuring that collapsed elements remain open when expanding other accordions

Can someone help me figure out how to keep an element open when another one is opened? Here is an example: https://getbootstrap.com/docs/4.0/components/collapse/ <div id="exampleAccordion" data-children=".item"> <div class="item"> & ...

javascripthtmlcssbootstrap-4

Setting the CSS property `overflow-y: scroll;` does not make the element scrollable and causes it to exceed 100% of the block

I am seeking a solution to create a y-axis scrollable block within the left-navbar. The height of this block should occupy all available space within the left-navbar, ensuring that the left-navbar itself remains at 100% of the page height. The issue arise ...

htmlcsssass

Two boxes each taking up half of the width, with content placed inside a container

How can I achieve the appearance seen in this image? The layout consists of four columns using regular Bootstrap code. The first two columns should have a white background within a .container, while the other two columns should have a black background tha ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Guide on integrating materialize-css npm package into webpack

I'm currently developing a client-side application with Webpack and facing challenges when trying to incorporate the materialize-css package. Using Henrik Joreteg's hjs-webpack package, I was able to include the yeticss npm package by importing i ...

cssnpmwebpackmaterializewebpack-style-loader

Challenge with Express Helmet: CSS fails to load properly on iOS Safari browser

After successfully adding Helmet to my Node/Express/EJS project and configuring my CSP to allow inline scripts, styles, and certain external sources on my Windows laptop in Opera, Chrome & Edge, I encountered a problem when connecting via iOS Safari on mob ...

cssnode.jsexpresshelmet.js

The letter 'X' is not suitable for use as a JSX component because its return type 'Element[]' does not qualify as a valid JSX element

Currently, I am working on rendering two simple joke cards in TypeScript. The cards are displaying correctly in my browser, but I've encountered an error message that says: 'Jokes' cannot be used as a JSX component. Its return type 'Ele ...

reactjstypescriptreact-nativejsxtsx

Exploring Typescript keyof in Storybook's User Interface customizations

Currently, I am working on developing components for integration with Storybook, but I am encountering an issue related to Typescript inferred types. While striving for code reusability, I prefer not to specify the options for a control within the story i ...

reactjstypescriptstorybook

CSS Class ID selection for selectpicker

I have two classes: selectpicker with different IDs: selected_Test_Platforms and selected_SIL_relevant I am trying to assign a preselection from an array called "availableTestPlatforms" to the selected_Test_Platforms. Currently, when I use the selector $( ...

javascriptjquerycsscss-selectors

Issue with pop-up functionality on web page using HTML, CSS, and JavaScript

Recently, I created a unique popup using HTML. You can see the complete code (excluding CSS) here: https://codepen.io/nope99675/pen/BawrdBX. Below is the snippet of the HTML: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

javascripthtmlcsswebencoding