7

In my test file where I have written test cases, I have imported a typescript file like below:

import {rootReducer} from "../src/reducers/rootReducer";

In rootReducer.ts I have imported another typescript file like below:

import taskReducer from "./taskReducer.ts";

Then it shows the error:

SyntaxError: Unexpected reserved word
at src/reducers/rootReducer.ts:7

Both rootReducer.ts and taskReducer.ts come under folder /src/reducers

No failing tests if you remove '.ts' from import statement, but throws error in browser. The app won't run then

The wallaby configuration is as below:

module.exports = function (wallaby) {

    return {
        files: [
            'src/*.ts',
            'src/**/*.ts'
        ],

        tests: [
            'test/*Test.ts'
        ],

        testFramework: "mocha",

        env: {
            type: 'node'
        },

        compilers: {
            '**/*.ts': wallaby.compilers.typeScript({
                /* 1 for CommonJs*/
                module: 1
            })
        }
    }
};
Dixy Xavier
  • 667
  • 2
  • 6
  • 20
  • are you sure this isn't because you are lacking { } in the 2nd import? it looks like a syntax error. – toskv Jan 28 '16 at 14:04
  • 1
    I had tried adding {} in 2nd import. still shows same error. I guess its something I missed in wallaby configuration, because when I remove the extension '.ts', then there is no wallaby error – Dixy Xavier Jan 29 '16 at 08:58
  • You need to remove `.ts` from import, otherwise you're just loading your TypeScript file as JavaScript, hence the error. – Artem Govorov Jan 29 '16 at 12:57
  • If I remove .ts from import, the browser will read its js file instead of ts which cause some issues and the app won't work in browser. Is there any way where I can make it both work in wallaby as well as in browser? – Dixy Xavier Feb 03 '16 at 07:36
  • I'm not sure why do you need to load ts instead of js in browser, your build process/module bundler should take care of correctly compiling things for your browser. Anyway, please create a sample repository demonstrating your issue, happy to look into it and help. – Artem Govorov Feb 05 '16 at 04:22
  • @ArtemGovorov The repo url https://github.com/AmalaLiza/task-tracker – Dixy Xavier Feb 08 '16 at 06:30

2 Answers2

3

Your statement:

import taskReducer from "./taskReducer.ts";

Should either be:

// Import just taskReducer from this module
import {taskReducer} from "./taskReducer";

Or:

// Import the whole module and call it taskReducer
import * as taskReducer from "./taskReducer";
Fenton
  • 241,084
  • 71
  • 387
  • 401
  • 1
    Tried both these. Still shows same error. If I remove the extension '.ts', wallaby doesn't show any error. But browser throws error and app won't work – Dixy Xavier Jan 29 '16 at 08:55
  • @DixyXavier you shouldn't need the .ts file.. the module loader should load the .js file at rune time. :-/ – toskv Jan 29 '16 at 09:44
  • If I remove .ts from import, the browser will read its js file instead of ts which cause some issues and the app won't work in browser. Is there any way where I can make it both work in wallaby as well as in browser? – Dixy Xavier Feb 03 '16 at 07:38
3

The issue is not in wallaby.js, but in your webpack config. To enable requiring files without specifying the extension, you must add a resolve.extensions parameter specifying which files webpack searches for:

// webpack.config.js
module.exports = {
  ...
  resolve: {
    // you can now require('file') instead of require('file.ts')
    extensions: ['', '.js', '.ts', '.tsx'] 
  }
};
Artem Govorov
  • 903
  • 6
  • 10