Modules not importing correctly Vue Typescript


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!

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

	"esModuleInterop": true,
1 Like