Vue is not a constructor error, using Typescript & webpack

Question

I'm using Typescript & Webpack. My code is below. I'm running it in chrome and it gives the error:

Uncaught TypeError: vue_1.default is not a constructor
    at Object.defineProperty.value (Index.ts:3)
    at __webpack_require__ (bootstrap f29fbbb047d131556dcf:19)
    at Object.defineProperty.value (bootstrap f29fbbb047d131556dcf:62)
    at bootstrap f29fbbb047d131556dcf:62

I have added the import, also did the resolve -> alias -> vue part. And tried a whole bunch of other stuff but it didn't work. I also played around with the tsconfig file but no luck.

How do I solve this?

webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
    context: __dirname,//another dir +"/app"
    // devtool: debug ? "inline-sourcemap" : null,

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    entry: "./code/client/scripts/Index.ts",
    output: {
        path: __dirname + "/code/client/views",
        filename: "scripts.min.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({mangle: false, sourcemap: false}),
        new webpack.IgnorePlugin(/fs/),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        })
    ],
    node: {
        fs: 'empty',
        child_process: 'empty',
    },

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        alias: {
            vue: 'vue/dist/vue.js'
        },
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
};

tsconfig.js

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015",
    "noImplicitThis": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "removeComments": false,
    "moduleResolution": "node",
    "types": [
      "node",
      "mocha",
      "chai"
    ],
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

index.ts

import Vue from "vue"

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
    }
})
console.log(app)

html

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

Michael Jungo · Accepted Answer · 2017-11-17 19:46:40Z

7

The vue/dist/vue.js file does not have a default export, but Vue also provides an ES module version: vue/dist/vue.esm.js. You want to use this one, since you are using it as an ES module with the import statement.

Your alias should be:

alias: {
    'vue': 'vue/dist/vue.esm.js'
},

answered Nov 17, 2017 at 19:46

Michael Jungo

33.2k4 gold badges97 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue is not a constructor error, using Typescript & webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related