Vue: Can't import Vue using TypeScript and Node

[marpstar]

Version

2.5.13

Reproduction link

https://github.com/marpstar/vue-typescript-import-problems

Steps to reproduce

# Clone this repo
git clone https://github.com/marpstar/vue-typescript-import-problems.git

# Install dependencies
npm install

# Compile TS
tsc

# Launch app. You'll see an error "vue_1.default is not a constructor"
node build/main.js

What is expected?

I can create a new Vue instance using the constructor.

What is actually happening?

I get an error "TypeError: vue_1.default is not a constructor"

---

I believe this is related to the issue https://github.com/vuejs/vue/issues/7374, which I've included my comments below:

I'm using commonjs output from TypeScript (no webpack). One similarity between OP and I is that we're both using the TypeScript baseUrl option. Something is definitely wrong with the standard import in TypeScript.

I too am using Vue 2.5.13. I'm setting up SSR on Node 8.9.3 and TypeScript 2.6. My tsconfig.json looks like this:

{
  "compilerOptions": {
    "outDir": "build",
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "rootDir": "./src",
    "baseUrl": "./src",
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "typings"
  ]
}

I tried a number of other workaround, including trying to load the vue.esm.js file via the compilerOptions.paths property, without success. I was getting the exact same vue_1.default is not a constructor error as OP.

[marpstar]

Worth mentioning that this doesn't work if I use Vue.extend, Vue.component, or with vue-class-decorators and using ES6 class syntax.

[HerringtonDarkholme]

This is a well known issue in TypeScript community. You have to use webpack/rollup now to workaround ESM/commonjs interop issue. Sadly, we cannot fix it in Vue community.

Alternatively, please patiently await https://github.com/Microsoft/TypeScript/pull/19675 for proper interop.

[toolness]

For what it's worth, the aforementioned TypeScript issue has been fixed, but requires one to add "esModuleInterop": true to their tsconfig.json to make things work.

Once that's done, however, I've run into another roadblock, which is that an error with the message You are using the runtime-only build of Vue ... is raised, and I have no idea if it's possible to use the build that contains the compiler with TypeScript.

For now I am tired of trying to get this to work and will just go back to React.

[mbrookson]

I am having this issue. I've got a gulpfile to transpile Typescript, then bundle with Browserify into app bundles and one vendor bundle. I have got it working mostly however
import Vue from "vue" followed by var vm = new Vue({ data: viewModel })
in my code results in vue_1.default is not a constructor

I have tried setting the "esModuleInterop": true flag in my tsconfig.json but that doesn't work for me.

These are my dependencies in package.json

"browserify": "^16.1.0", "glob": "^7.1.2", "gulp": "^3.9.1", "gulp-sourcemaps": "^2.6.4", "gulp-typescript": "^4.0.1", "gulp-uglify": "^3.0.0", "typescript": "^2.7.2", "vinyl-buffer": "^1.0.1", "vinyl-source-stream": "^2.0.0", "vue": "^2.5.13"

Any ideas how to resolve this?

[mbrookson]

I just managed to get this working by using the tsify plugin for browserify with the esModuleInterop flag and the babelify transform, rather than using gulp-typescript and passing the result to browserify.