Haul: Cannot resolve typescript imports

[GeeWee]

Current Behavior

When attempting to use ts-loader to resolve typescript files, haul says it is unable to resolve the module.
When trying to import a ts component with the line
import { SomeComponent } from './some-component';

You get the following error from haul ERROR in
./src/index.android.tsx Module not found: Error: Can't resolve './some-component' in 'C:\Users\gusta\Documents\rn-typescript-example\src'@ ./src/index.android.tsx 15:23-50 @ multi ./~/haul-cli/src/utils/polyfillEnvironment.js ./src/index.android.tsx
(TSC gives no errors when compiling this)

if you try with the file extension, as:
import { SomeComponent } from './some-component.tsx';
Haul works fine, but react native crashes runtime with undefined is not an object

I have created a reproduction repo: https://github.com/GeeWee/rn-typescript-example

Expected Behavior

I expect it to resolve and transform the typescript file properly.

Haul Configuration (webpack.haul.js)

module.exports = ({ platform }, { module }) => ({
  entry: `./src/index.${platform}.tsx`,
  module: {
    ...module,
    rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader'
        },
        ...module.rules
      ]
  }
});

Your Environment

| software | version
| ---------------- | -------
| Haul | 0.5.0
| react-native | 0.42.3
| node | 7.7.4
| npm or yarn | yarn 0.21.3
| typescript | 2.2.2
| ts-loader | 2.0.3

[cbrevik]

I had the exact same problem yesterday, and you need to set extensions under resolve. I've got a working example here: https://github.com/cbrevik/rn-typescript-example/blob/master/webpack.haul.js

E.g.

  resolve: {
    ...resolve,
    extensions: ['.ts', '.tsx', `.${platform}.ts`, '.native.ts', `.${platform}.tsx`, '.native.tsx', ...resolve.extensions],
  },

Edit: Opened a PR to flesh out example project a bit more (https://github.com/nixterrimus/rn-typescript-example/pull/3)

[GeeWee]

Ah, that does seem to make it work.
Apparently you also need to import
import * as React from 'react';
instead of just
import React from 'react'
even though allowSyntheticDefaultImports is set to true.

Awesome PR!

I think this project would benefit a lot from some recipes in the documentation.

[ds300]

@GeeWee you can enable synthetic default imports by adding a secondary compile step with babel. See https://github.com/TypeStrong/ts-loader#babel

[GeeWee]

Wicked! I'm closing this, as it seems to be no fault of hauls

[EhsanJahoon]

Check this doc
https://webpack.js.org/guides/typescript/