Semantic-ui-react: Typescript: TS2307/TS2688 (Cannot Find Module/Cannot Find Type Definition) Errors

[Ghirigoro]

I'm having a hard time using the library in a typescript project. Adding the semantic-ui-react folder to typeRoots ("typeRoots": ["./node_modules/semantic-ui-react/"]) results in a slew of TS2307 errors and the following:

    ERROR in /Users/XXX/Repositories/XXX/tsconfig.json
    error TS2688: Cannot find type definition file for 'dist'.

Installing the index.d.ts using Typings still results in the TS2307 errors but the final error is slightly different (it can't find modules rather than dist):

    ERROR in /Users/XXX/Repositories/XXX/tsconfig.json
    error TS2688: Cannot find type definition file for 'modules'.

What is the intended way to import the definitions into a project?

[dennari]

At least with TypeScript 2.1, you don't have to add anything to the typeRoots. It should work out of the box like this:

import * as React from 'react';
import { Button } from 'semantic-ui-react';

[Ghirigoro]

Thanks. That's what I thought (and that is how I'm importing in the source) but it's not working. My tsconfig.json is pretty straightforward (see below). I'm kind of baffled, but I must be doing something wrong (maybe it's a webpack/ts-loader issue...).

// tsconfig.json
{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "jsx": "preserve",
    "sourceMap": true,
    "allowJs": true
  },
  "exclude": [
    "node_modules"
  ]
}

[Ghirigoro]

Just in case someone else has the same issue and stumbles upon this: you need to tell the compiler to use node module resolution. I.e. add the following to your tsconfig.json file:

"moduleResolution": "node"

[n3ps]

I have the moduleResolution set but it still randomly throws that error. Weirdest thing is the temporary solution to change it to require until it errors out then switch back to import