The module 'csstype' is nowhere to be found, according to error code TS2307

I've encountered an issue with Visual Studio 2017 not compiling my code.

Recently, I integrated Typescript, React, and Webpack into our solution, and everything seemed to be working fine. However, upon attempting to build our MVC application, it started breaking. After initially facing multiple errors, I've traced the problem down to csstype not being found (TS2307).

Some suggestions on Stack Overflow recommend adding "moduleResolution": "node", but unfortunately, this hasn't resolved the issue in my specific case...

This is how my tsconfig.json file looks:

{
  "compilerOptions": { 
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules"
  ]
}

And here's the package.json content:

{
  "version": "1.0.0",
  "name": "fortressui.content",
  "private": true,
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.0",
    "source-map-loader": "^0.2.3",
    "ts-loader": "^4.4.2",
    "typescript": "^2.9.2",
    "webpack": "4.16.2"
  },
  "dependencies": {
    "@types/lodash": "^4.14.113",
    "@types/mocha": "^5.2.5",
    "@types/pluralize": "0.0.29",
    "@types/react": "^16.4.7",
    "@types/react-dom": "^16.0.6",
    "chai": "^4.1.2",
    "csstype": "^2.5.6",
    "gulp-typescript": "^5.0.0-alpha.3",
    "install": "^0.12.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "shelljs": "^0.8.2",
    "typescriptnpm": "^1.0.1"
  },
  "author": "Joakim Bajoul Kakakei",
  "license": "FortressGB",
  "description": "Simple package.json file to handle dependencies"
}

The line that Visual Studio is flagging as problematic: import * as CSS from 'csstype'; within 

\node_modules\@types\react\index.d.ts
..

I've attempted solutions like deleting the node_modules folder, reinstalling npm modules, relinking TypeScript, but the react package cannot locate csstype even though it exists in node_modules\.

Anyone have any insights or potential solutions?

typescriptvisual-studio-2017tsconfig

Answer №1

I encountered the same error even after specifying:

"moduleResolution": "node"

in my tsconfig.json file.

To resolve this issue, I found a workaround by explicitly adding the ccstype dependency using the command:

yarn add csstype

For further details, you can visit this link.

Answer №2

In my React project running on version 16.8.4, I encountered an issue when adding "moduleResolution": "node". Unfortunately, this didn't solve the problem for me.

While analyzing the error in the file 

\node_modules\@types\react\index.d.ts
, I identified that the error stemmed from the line with the code import * as CSS from 'csstype'.

Upon further investigation, I realized that the path was leading to \node_modules\@types, where the folder csstype was missing. To fix this, I copied the csstype folder from \node_modules to \node_modules\@types, which successfully resolved the 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

What is the best way to activate an input field in react-select?

Currently, I am working on a dropdown feature using react-select and have encountered some issues that need to be addressed: 1) The input field should be focused in just one click (currently it requires 2 clicks). 2) When the dropdown is opened and a cha ...

javascriptreactjstypescriptreact-select

Tips for accurately documenting the Props parameter in a React component with Destructuring assignment

Attempting to create JSDocs for a React component using destructuring assignment to access props: const PostComponent: React.FC<IPostComponent> = ({ title, body }) => { ... } The issue arises when trying to document multiple parameters in JSDocs ...

reactjstypescriptjsdoc

Tips for enabling users to import from subdirectories within my NPM package

Is there a way to allow users to import from subfolders of my TypeScript NPM package? For instance, if the TypeScript code is structured like this: - lib - src - server - react Users should be able to import from the subfolders as package-name/react, ...

typescriptnpmimportsubdirectory

Incorrect typings being output by rxjs map

combineLatest([of(1), of('test')]).pipe( map(([myNumber, myString]) => { return [myNumber, myString]; }), map(([myNewNumber, myNewString]) => { const test = myNewString.length; }) ); Property 'length' does not ...

typescriptrxjs

Using Promise.all for multiple function calls

I have several functions set up like this: private async p1(): Promise<Result> { let p1; // Do some operations. return p1; } private async p5(): Promise<void> { // Make a call to an external API. } Some of these functions c ...

typescriptpromise

Error TS2393 in Typescript: Multiple function declarations found within a Node/Express application

In my TypeScript node + express application, I have implemented a function in some API routes that looks like this: function cleanReqBody(req) { req.body.createdBy = req.user; req.body.modifiedBy = req.user; req.body.modified = new Date(); } Howeve ...

node.jsexpresstypescript

Retrieve data from a table within an Angular component

Struggling with the ng2-smart-table library, I am facing challenges in passing values entered in the edit line to a custom component: Refer to the code snippet below for passing Maximum and Minimum Temperature values to the SmartTableEditorFunctionsCompon ...

angulartypescriptfrontend

Angular: Implementing asynchronous data retrieval for templates

I am currently facing the following issue: I need to create a table with entries (Obj). Some of these entries have a file attribute. When an entry has a file attribute (entry.file), I need to make a backend call to retrieve the URL of that file: public g ...

htmlangulartypescriptrxjs

Printing values of an object in an Angular/HTML script is proving to be quite challenging for me

In my Angular project, I have created a service and component for listing objects. The list is functioning correctly as I have tested it with 'console.log()'. However, when I try to display the list on localhost:4200, nothing appears. <table&g ...

htmlangulartypescript

Having trouble retrieving spot price using Uniswap SDK due to a transaction error LOK

const quotedAmountOut = await quoterContract.callStatic.quoteExactInputSingle( immutables.token0, immutables.token1, immutables.fee, amountIn, 0 ) I set up a pool on Uniswap V3 for two ERC20 dummy tokens by using the createPool() met ...

node.jstypescriptuniswap

"Unsubscribing in Angular via a button click: A step-by

I'm having trouble canceling a subscription for "device orientation" in Angular using (click) in HTML. I've tried multiple solutions but none seem to work. Does anyone have any ideas on how to fix this? TS // Watching the change in device compa ...

angulartypescriptionic-framework

TypeScript(error:2532): object may be undefined despite null or undefined check

Currently, I am developing a Discord-bot using TypeScript which includes a command to retrieve information from an airport. To do this, users only need to provide the 4-character ICAO code that identifies the specific airport. However, due to potential use ...

typescriptdiscordundefined

Implementing Bootstrap 5 JS within an Angular 11 component TypeScript

I am currently working on a project that utilizes Angular 11 and we are aiming to integrate Bootstrap 5 native JS without relying on third-party libraries like ng-bootstrap, MDB, or ngx-bootstrap (jQuery is not being used as well). I understand that using ...

angulartypescripttwitter-bootstrapnpmbootstrap-5

Convert string to integer value

Is it possible to convert a literal string type (not runtime value) to its corresponding numerical type, for example '1' to 1? I am looking to restrict a variable to only being a key of an object (assuming the type of obj is precise since TypeSc ...

typescript

Managing input and output using a collaborative service

I've been working on refactoring some code that contains a significant amount of duplicate methods between two components. Component A is a child of component B, and they can be separate instances as intended. The issue I'm facing revolves around ...

angulartypescript

Could you clarify the significance of the brackets in this TypeScript Lambda Expression?

I'm currently delving into an Angular book, but I'm struggling to locate any definitive documentation regarding the usage of square brackets in a lambda expression like [hours, rate]) => this.total = hours * rate. While I grasp that these para ...

javascripttypescriptlambdaecmascript-6

Executing a designated assessment in Protractor

Is there a way to run a specific test scenario in my Angular app? I recently added a new feature in Protractor, created the necessary page and steps, but I already have other features implemented. I am wondering if it is possible to solely test the new f ...

angulartypescriptprotractor

TypeScript requires that the `includes` function must have the same type parameter for both input and

When working with TypeScript, I've encountered an interesting dilemma regarding the use of the Array.Prototype.includes function. It seems that this function requires me to pass in the same type as in the original array, but isn't the purpose of ...

typescript

Scrolling the mouse wheel on Angular 2 Typescript Highcharts Highmap

I'm currently exploring if it's possible to subscribe to the zooming event in a Highmap using Angular 2 with Typescript for Highcharts/Highmap, or possibly even to a mouse wheel scrolling event. @HostListener('scroll', ['$event&a ...

angulartypescripthighchartsmousewheelhighmaps

Redirect user to the "Confirm Logout" page in Keycloak after refreshing the page before logging out

While working on a project with keycloak, I've encountered an issue that I can't seem to figure out. After logging in and navigating to my project's page, everything operates smoothly. However, if I happen to refresh the page before logging ...

angulartypescriptkeycloakkeycloak-angularkeycloak-js