Relative import with targeting to es6

[Strate]

I got stuck with loading relative modules and targeting ts compiler to es6.
Example 1:

import dep = require('./file.ts') // causes error TS1202: Import assignment cannot be used when targeting ECMAScript 6 or higher. Consider using 'import * as ns from "mod"', 'import {a} from "mod"' or 'import d from "mod"' instead.

import dep from './file.ts' // causes error TS2307: Cannot find module './file.ts'.

Changing target to es5 makes both of variances work. Any ideas to get them work on es6 target?

[jbrantly]

You can't use import ... = require() when targeting ES6. That's a TypeScript rule (as you can see from TS1202). You have to use import ... from '...'.

You also need to remove the extension from the module. So you should use:

import dep from './file';

[Strate]

Yes, thank you, it works. But only for .ts files. When I want to import .tsx files, compiler fails with "error TS2307: Cannot find module" with and without extension in import .. from statement. I have created example repo to show error: https://github.com/Strate/webpack-typescript-example

[Strate]

I have found solution: adding "moduleResolution": "node" to tsconfig.json does the job.

[johnnyreilly]

@Strate, make your resolve in webpack.config.js like this and you'll be fine:

resolve: {
      // Add `.ts` and `.tsx` as a resolvable extension.
      extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  }

[Strate]

@johnnyreilly https://github.com/Strate/webpack-typescript-example/blob/master/webpack.config.js
already there

[jbrantly]

"moduleResolution": "node" should be the default. What version of TypeScript are you using? Are you using the nightly?

[Strate]

@jbrantly

% tsc --version
message TS6029: Version 1.6.2

[jbrantly]

Thanks. I'll try to replicate the original issue. You really shouldn't need to specify moduleResolution.

[basarat]

You really shouldn't need to specify moduleResolution.

Only true if --module commonjs is set. Otherwise user needs to specify ... I think 🌹

[jbrantly]

ts-loader automatically sets --module commonjs for ES3/5 target. It doesn't for ES6 target. Something to look at for sure.

[jbrantly]

So I've looked into this a bit and there are multiple cascading issues. The first issue is that there is a bug in ts-loader where the webpack lookup was failing (ts-loader first tries to resolve a file using webpack's resolution strategy). Since that was failing, the loader fell back on TypeScript's module resolution strategy. In this case TypeScript was unable to find the .tsx file because the jsx option was not specified in the compiler options, so that failed as well resulting in the "cannot find module" message. However, if you switched moduleResolution to node then TypeScript magically decided to include .tsx files in its lookup. Kind of weird if you ask me and possibly a bug that .tsx extension handling is done differently between the two strategies. In any case, by fixing the original bug the TypeScript resolution "bug" doesn't come into play.

I've opened #102 to resolve.