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 are some effective ways to create a flexible framework in Typescript for Node.js applications utilizing the native MongoDB driver?

When using node.js and the native mongodb driver, is there a way to implement a schema/schemaless structure by utilizing classes or interfaces with Typescript (ES6)? For instance, if we have a collection named users and perform actions like ...

node.jsmongodbdata-structurestypescriptdata-access-layer

One should refrain from loading the API in Angular when there is no data present, by utilizing the global.getData method

Check out this code snippet: loadNextBatch() { console.log('scrolldown'); this.pageIndex = this.pageIndex + 1; this.global.getData(`/conditions/latest?start=${this.pageIndex}&length=${this.pageSize}`) .pipe(take(1)).subscr ...

javascriptangulartypescript

The presence of catchError() within the pipe() function will display an error specifically at the .subscribe stage

I encountered an issue while trying to handle errors for a method in Angular. After adding a catchError check using the .pipe() method, I noticed that the variable roomId was marked with a red squiggly line. The error message read: TS2345: Argument of type ...

angulartypescripterror-handling

What are the best practices for utilizing an array of routes?

I'm new to working with react but I noticed something strange. My routes are currently set up like this: <Main> <Route exact path="/home" component={Home} /> <Route exact path="/home1" com ...

javascriptreactjstypescriptreact-router-dom

When you call Subscribe(), you will receive the output "complete: () => void; 'complete' is defined in this context. What exactly does this signify?

Currently, I am following a tutorial and after meticulously checking and rechecking, I can confidently say that my code matches exactly with the one the professor is using. The tutorial involves creating a simple Single Page Application in Angular using Ty ...

angulartypescript

Tips for obtaining the most recent HTML element in Angular

I was able to include HTML content in an Angular (7) UI using the DomSanitizer this.sanitizer.bypassSecurityTrustHtml("htmlstr") Once the content is sanitized and displayed in the HTML view, users have the ability to modify the values as desired ...

htmlangulartypescript

the process of extracting data from a request body in Angular 2

After creating a URL for end-users to access, I wanted to retrieve data from the request body when they hit the URL from another module. The process involves fetching the data from the request body, passing it to my service, and then validating the respons ...

javascriptangulartypescriptangular2-servicesangular4-forms

How to manually resolve a type by its string or name in Angular 2

I'm facing a challenge. Is it possible to resolve a component manually with just its name known? Let's say I have a string variable that holds the name of a component, like "UserService". I've been exploring Injector and came across method ...

typescriptangularsystemjs

`How can I effectively test a React.js page utilizing both Context and useEffect?`

I'm struggling with testing a page that uses Context and useEffect with Jest and Testing-library, can you offer any assistance? REPOSITORY: https://github.com/jefferson1104/padawan Context File: src/context/personContext.tsx import { createContext, ...

reactjstypescriptjestjsnext.jsreact-testing-library

Using Angular 4 to monitor changes in two-way binding properties

Recently, I developed a unique toggle-sorting component that examines if the current sorting parameters align with its sorting slug and manages clicks to reflect any changes. // toggle-sorting.component.ts @Input() sortingSlug: string; @Input() currSorti ...

angulartypescript

Conceal the initial value in a dropdown menu in a React component

I've set up a codesandbox to demonstrate the issue (https://codesandbox.io/s/practical-flower-k6cyl?file=/src/App.tsx) Is there a way to prevent the "AGE" text (first option) in the select box from being selected again? It should only be visible when ...

reactjstypescript

Creating a TypeScript interface where the type of one property is based on the type of another property

One of my Interfaces has the following structure: export enum SortValueType { String = 'string', Number = 'number', Date = 'date', } export interface SortConfig { key: string; direction: SortDirection; type: Sort ...

typescript

Using a HOC property within a child component in Typescript is not allowed

Challenge A component I've wrapped with a common HOC used in previous projects is causing issues. I cannot access the HOC's prop currentBreakpoint within the wrapped component because it needs to be defined in the component's type: Propert ...

reactjstypescript

Seems like ngAfterViewInit isn't functioning properly, could it be an error on my end

After implementing my ngAfterViewInit function, I noticed that it is not behaving as expected. I have a hunch that something important may be missing in my code. ngOnInit() { this.dataService.getUsers().subscribe((users) => {this.users = users) ; ...

javascriptangulartypescript

Displaying notification in Ionic 2

Whenever I click on the register button, if I fill out all the fields I am taken to the regsuccess page. Otherwise, I receive a message saying to fill in all required fields. However, I want to display an alert message using Ionic2 and TypeScript. HTML: ...

angulartypescriptionic2

Tips for stopping webpack from creating compiled files in the source directory

I'm in the process of transitioning my AngularJs project from ES6 to TypeScript and I've integrated webpack with ts-loader. However, I've encountered an issue where the compiled files and source maps are saved in my directory instead of bei ...

angularjstypescriptwebpack

Incorporate a vibrant red circle within a tab of the navigation bar

I'm looking to incorporate a red dot with a number into a messaging tab to indicate new messages. Below is the HTML code: <ul class="nav pw-nav pw-nav--horizontal"> <li class="nav-item"> <a class="nav ...

javascripthtmlangulartypescriptangular6

I'd like to know how to retrieve a total count of all the documents within a Firebase collection using Angular

My code currently fetches documents from a collection, but it's only bringing back 15 at a time (from what I can gather). This is causing an issue as I need to accurately determine the total number of documents in the collection for a program I'm ...

angulartypescriptfirebasegoogle-cloud-firestore

What is the most efficient method for line wrapping in the react className attribute while utilizing Tailwind CSS with minimal impact on performance?

Is there a more efficient way to structure the className attribute when utilizing tailwind css? Which of the examples provided would have the least impact on performance? If I were to use an array for the classes and then join them together as shown in e ...

reactjstypescripttailwind-css

Implement new interface methods on-the-fly

I am seeking a way to dynamically incorporate methods that are defined in an interface. Initially, I considered using the index signature approach, but unfortunately, not all methods have the same signature. My objective is to preserve all type information ...

typescript