Building a Next.js application that supports both Javascript and Typescript

I currently have a Next.js app that is written in Javascript, but I am looking to transition to writing new code in Typescript. To add Typescript to my project, I tried creating a tsconfig.json file at the project root and then ran 

npm install --save-dev typescript @types/react @types/node
. However, when I attempt to run npm run dev, it throws an error:

error - ./pages/_app.js:6:0
Module not found: Can't resolve 'src/assets/styles/index.scss'

This seems to be affecting the ability to import modules properly throughout the project.

What steps do I need to take in order to ensure that both Javascript and Typescript can work seamlessly together?

javascriptreactjstypescriptnpmnext.js

Answer №1

If you are encountering problems with importing modules, a quick fix could be to stop and restart the server.

While SCSS should work smoothly after the restart, if issues persist, consider declaring it in a typescript declaration file as shown below:

// index.d.ts
declare module '*.scss';

Answer №2

Modifying the tsconfig.json file

"compilerOptions": {
    ...
    "baseUrl": "./src",
    ...
}

Successfully resolved this issue

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

Discover and transform any strings that begin with http & https into clickable links

Can I use jQuery to search a paragraph for all strings that begin with http & https and turn them into clickable links? I have my Twitter feed displayed on my website, but any lines starting with http & https are shown as regular text. Is it feasible to t ...

javascriptjqueryhtml

Encountering a problem while trying to run ionic serve in the Terminal following a recent update

Currently running on ubuntu 15.10 Using ionic version 1.7.15. Recently attempted to update my nodejs to the latest version 6 and npm, but encountered an error when running the ionic server command as shown in this The commands I used for the update: su ...

node.jsubuntuionic-frameworknpm

What steps are needed to obtain a Bearer access token for embedding a PowerBi Report using the PowerBiEmbed React component within the context of MS Teams?

My team and I are currently working on embedding a PowerBi Report using the PowerBiEmbed component in order to visualize it seamlessly within a Microsoft Teams context without requiring users to repeat the sign-in process every time they access the dashboa ...

reactjsazure-active-directorypowerbi-embeddedpowerbi-api

Upgrading from Material UI Version 0.20 to v4.3.0: The Ultimate Transformation

I have been working on an application that was built using an older version of material UI (V0.20). Now, I am considering upgrading to the latest version of material UI and adding new modules to the application. However, I am concerned about the potentia ...

reactjsmaterial-ui

Artwork - Circular design disappears without warning

While working on a clock project purely for enjoyment, I noticed that the minute arc disappears from the canvas as soon as a new minute begins. Any idea why this is happening? Check out the clock in action: https://jsfiddle.net/y0bson6f/ HTML <canvas ...

javascriptcsshtmlcanvas

Is it possible to trigger JavaScript after loading a page in jqTouch with AJAX?

Similar to the kitchensink demo, I have successfully used jqtouch to call external .html pages into the index page. One of these external pages contains a video that is being played using sublime player. Everything is pretty basic so far, but my challenge ...

javascriptajaxjqtouch

The HTML code may fade away, but the JavaScript is still up and running behind the

Switching between different div elements in my HTML document is a challenge. Here's the code I currently have: <div id="screen1" class="current"> <div id="press_any_key_to_continue"> <font style="font-family: verdana" color="yellow ...

javascriptjqueryhtmlthree.js

Tips on incorporating Prisma model into prisma-offset-pagination

I am currently implementing pagination using the prisma-offset-pagination package. To do this, I need to utilize Prisma Model in my code, but I'm unsure of the correct approach: Refer to line: 02 const result = prismaOffsetPagination({ model: user ...

javascriptnode.jsormpaginationprisma2

What is the method to generate a Select Drop-down List using Form Inputs as properties for a Component in React?

I am looking to create a versatile form component that dynamically renders based on the inputs passed as props. The input fields are initially set as an array of objects like this: const userInputs = [ { id: "email", label: " ...

reactjsdrop-down-menu

Ways to resolve the npm error "peer dependency missing"

While reviewing the list of npm packages installed with npm list --depth 0 I came across two errors after the npm packages. Can anyone explain why these errors are occurring and how to resolve them? npm ERR! peer dep missing: chartist@^0.10.1, required ...

node.jsreactjsnpm

The mean.js generator is not currently installed on this system

Unable to resolve the issue: ~  i   master ⭑  mean  yo mean.js  10:02:03 PM Error mean.js You seem to not have a generator named mean.js i ...

npmmean-stackmeanjsmean.ioyo

Inconsistencies observed during the native JSON import process in JavaScript

Encountered a strange behavior when loading a JSON file into JavaScript while working on a React project. Seeking an explanation and guidance on properly accessing data from the JSON data store. The JSON file contains product data: { "product ...

javascripthtmlreactjsjson

Angular release 6: A guide on truncating text by words rather than characters

I'm currently enhancing a truncate pipe in Angular that is supposed to cut off text after 35 words, but instead it's trimming down to 35 characters... Here is the HTML code: <p *ngIf="item.description.length > 0"><span class="body-1 ...

angulartypescript

Strategies for patiently waiting for an object to appear before loading the HTML

After logging into my service, I download data from a REST API, and based on that data, I display certain tabs. However, I am experiencing issues with loading the HTML content once the data has been retrieved. The ngif directive at the beginning of the H ...

htmlangulartypescript

Import css background-images from a separate local directory that is located outside the root directory of the Next JS

I am facing a challenge with hosting a next.js app within the file structure of a parent website. I need the CSS in the app to use images that are located outside the app's file structure but within the parent website's file structure. Here is a ...

javascriptcssreactjsnext.js

An issue has been identified with React's HTML input maxLength feature where it does not display an error

Within my form, I have an input field that currently does not include validation for a maximum length. <input type="text" className="form-control" id="company" onBlur= ...

reactjstypescript

Discover the best way to highlight a specific area using imgareaelect

The code snippet provided is for uploading an image and performing some operations on it using jQuery UI Tooltip. The code includes various scripts and stylesheets to handle the image upload functionality. After uploading an image, the code checks if the ...

javascriptjqueryhtml

Only the initial upload file is being passed through the Apollo Express server, with the remaining files missing in action

Currently, I am utilizing the apollo-express server with GraphQL. One issue I am encountering involves a mutation where I pass files from the front-end to the back-end. Strangely, I receive the file:{} object only for the first file - for the others, I rec ...

javascriptnode.jsgraphqlapolloapollo-server

"Refine Your Grid with a Pinterest-Inspired

I've set up a grid of images in columns similar to Pinterest that I would like to filter. The images vary in height but all have the same width. The issue arises when a taller image is followed by a shorter one, causing the short image to float right ...

javascriptjqueryhtmlcss

Utilizing Node.js to Retrieve a POST Request JSON and Modify its Format

Received an incoming Post request in JSON format like this: [{"username":"ali","hair_color":"brown","height":1.2},{"username":"marc","hair_color":"blue","height":1.4},{"username":"zehua","hair_color":"black","height":1.8}] Need to transform it into the f ...

javascriptnode.js