Module imports are not working

[0x-r4bbit]

When trying to import symbols from any other TS module within an embark project that based on this template, webpack isn't able to resolve the module paths.

Here's how this can be reproduced:

$ embark new test --template embark-framework/embark-typescript-template

Then, take the Greeter class from app/js/index.ts and move it into app/js/greeter.ts:

// greeter.ts
export class Greeter {
  ...
}

Next try to import Greeter from this new file inside index.ts:

import { Greeter } from './greeter'

This will result in:

./app/js/index.ts
Module not found: Error: Can't resolve './greeter' in '/Users/pascalprecht/projects/embark/playground/ts-test/app/js'
resolve './greeter' in '/Users/pascalprecht/projects/embark/playground/ts-test/app/js'
  using description file: /Users/pascalprecht/projects/embark/playground/ts-test/package.json (relative path: ./app/js)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/pascalprecht/projects/embark/playground/ts-test/package.json (relative path: ./app/js/greeter)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/pascalprecht/projects/embark/playground/ts-test/app/js/greeter doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/pascalprecht/projects/embark/playground/ts-test/app/js/greeter.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /Users/pascalprecht/projects/embark/playground/ts-test/app/js/greeter.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/pascalprecht/projects/embark/playground/ts-test/app/js/greeter.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/pascalprecht/projects/embark/playground/ts-test/app/js/greeter.json doesn't exist
      as directory
        /Users/pascalprecht/projects/embark/playground/ts-test/app/js/greeter doesn't exist
[/Users/pascalprecht/projects/embark/playground/ts-test/app/js/greeter]
[/Users/pascalprecht/projects/embark/playground/ts-test/app/js/greeter.wasm]
[/Users/pascalprecht/projects/embark/playground/ts-test/app/js/greeter.mjs]
[/Users/pascalprecht/projects/embark/playground/ts-test/app/js/greeter.js]
[/Users/pascalprecht/projects/embark/playground/ts-test/app/js/greeter.json]
 @ ./app/js/index.ts 5:0-36 13:18-25
 @ multi ./app/js/index.ts

[iurimatias]

I can't replicate this anymore, at least with next

[iurimatias]

also works with develop

[0x-r4bbit]

Verifying this now on latest develop and next

[0x-r4bbit]

@iurimatias I can still reproduce this on both, develop and next. Here are the steps to reproduce:

$ cd embark
$ git checkout -f develop # or next
$ rm -rf node_modules && npm install
$ npm link
$ cd path/to/some/embark-project
$ embark run

[0x-r4bbit]

So after I saw embarklabs/embark-angular-template#2 (comment) I tried it again by importing modules including their file extension.

This seems to work perfectly fine but I honestly didn't expect this. I think we should support importing modules without specifying the file extension.

[michaelsbradleyjr]

Using embark's next branch, I am unable to reproduce the problem per the instructions at the top.

Even without giving a file extension (import { Greeter } from './greeter' in index.ts), embark run completes successfully. I verified the expected transpiled code is in dist/js/app.js.

[michaelsbradleyjr]

Also unable to reproduce with embark's develop branch.

[0x-r4bbit]

That is very weird, because I still manage to reproduce this.