TypeScript 2.1 Feature of Implicit Import Not Working

Question

I was very excited about the latest TypeScript 2.1.4 release in that a big factor in convincing my team to use TS is the ability to import an installed module without having to find or create type definitions for it, which implicit any imports provide. For some reason, however, this doesn't seem to be working as advertised, as I still get error messages telling me that a module cannot be found. When I install types for my module (React in this case) it works just fine.

Here's my package.json:

{
  "name": "my_app_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --colors --port 8282"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.0.0-beta.9",
    "source-map-loader": "^0.1.5",
    "typescript": "^2.1.4",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}

My tsconfig.json:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "commonjs",
    "target": "esnext",
    "jsx": "react"
  },
  "include": [
    "./**/*"
  ]
}

And a sample .tsx file for a React component that replicates this issue:

import * as React from "react";

export interface HelloProps { compiler: string; framework: string; }

export const Hello = (props: HelloProps) => {
    return <h1>Hello from {props.compiler} and {this.props.framework}!</h1>
};

I also went ahead and created another project replicating this issue and uploaded it to BitBucket for anyone interested. Any help would be greatly appreciated. If this turns out to be an issue with TypeScript itself, I'll make sure to create an Issue on the Github repo.

artem · Accepted Answer · 2016-12-11 19:14:51Z

1

Looks like implicit import does not always work. When I fixed your package.json (removed trailing comma in scripts) and tsconfig.json (added bin to exclude), I'm getting these errors with typescript 2.1.4:

src/greeter.tsx(2,24): error TS2307: Cannot find module 'react-modal'.
src/greeter.tsx(19,26): error TS2339: Property 'setState' does not exist on type 'Greeter'.

I think I khow the explanation for the first one. In package.json for react-modal, the main property is

"main": "./lib/index",

but the actual file has .js extension, that is, it's ./lib/index.js.

When I change main in node_modules/react-modal/package.json to

"main": "./lib/index.js",

the first error goes away.

I think it's indeed an issue with TypeScript.

answered Dec 11, 2016 at 19:14

artem

52.2k10 gold badges86 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

alex-ayala Over a year ago

So I opened an issue for this on the TypeScript repo and it turns out that the compiler will look for an index.js at the root of the npm module by default. This is counterintuitive, but if you want to use untyped imports instead of just typing in import Something from 'some-module' you need to make sure you have the location of some-module's entry point (from the package.json) and type the path to where it is within the module. In my case, I needed to type out import Modal from 'react-modal/lib'.

artem Over a year ago

To me it looks like TypeScript is using main from package.json because import ... from 'react' works, although there is no index.js in react - it has "main": "react.js". The apparent issue with TypeScript is that it does not add .js extension when it's not there.

born2net · Accepted Answer · 2016-12-11 17:39:39Z

0

try and add you tsconfig and enable and disable noImplicitAny :

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "../../node_modules/@types/"
    ]
  }      
}

answered Dec 11, 2016 at 17:39

born2net

25.1k22 gold badges72 silver badges106 bronze badges

Collectives™ on Stack Overflow

TypeScript 2.1 Feature of Implicit Import Not Working

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related