Modules not importing correctly Vue Typescript

help
1

Hello,

I’m migrating my AngularJS application to VueJS with typescript. I’m also migrating from the old “load all the files” to the new way using the imports folder. I’m having a weird problem with imports from npm modules though, and I’m wondering if anyone could help. Basically instead of being able to do imports like this:

import Vuex from "vuex";
const store = new Vuex({...

I have to do

import * as Vuex from "vuex";

When I do the first, it transpiles to this:

const vuex_1 = require("vuex");                                                                                     // 1
const store = new vuex_1.default.Store

The problem is that vuex_1.default is undefined! vuex_1 is default object, not vuex_1.default. It should just be doing vuex_1.Store.

Any idea how to get it to work right?
I’m using

and this is my tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "sourceMap": true
    }
}

I don’t understand how commonjs works all that well, so I’m hoping this is something that someone who knows more about it could help me figure out.

Note, when I change “commonjs” to “es6”, it doesn’t transpile at all and just does

import * as VueRouter from "vue-router";                                                                            // 1

Which obviously doesn’t work.

Thanks for the help!

2

Well updating to the latest barbatus typescript v2.8 helped because it allowed new option in tsconfig:

	"esModuleInterop": true,
1 Like