Choices is not a constructor in TypeScript (Vue)

[grzegorztomasiak]

I am receiving this error Error in mounted hook: "TypeError: choices_js_1.default is not a constructor" when trying to instantiate Choices in TypeScript.

Here's how my component looks like:

<template>

</template>

<script lang="ts">
    import Vue from 'vue';
    import Choices from 'choices.js'
    import {Component, Prop} from 'vue-property-decorator';

    @Component
    export default class Select extends Vue
    {
        @Prop({'default': null})
        public name:string;

        @Prop({'default': () => []})
        public options:Array<any>;

        @Prop({'default': null})
        public selected:any;

        public mounted()
        {
            let choices = new Choices('div');
        }
    }
</script>

Do you have any idea why?

[jshjohnson]

Hey @grzegorztomasiak,

If you console log Choices, what does it output? Also, you should be passing a select element to the constructor rather than a div.

Thanks

[grzegorztomasiak]

The whole console log error below:

[Vue warn]: Error in mounted hook: "TypeError: choices_js_1.default is not a constructor"

found in

---> <Select> at /var/www/local.studio/app/Resources/public/app/Common/Components/Select/Select.Component.vue
       <Root>
(unknown) TypeError: choices_js_1.default is not a constructor
    at VueComponent.mounted (eval at <anonymous> (experimental_bundle.js:550), <anonymous>:16:23)
    at callHook (eval at <anonymous> (experimental_bundle.js:91), <anonymous>:2557:21)
    at Object.insert (eval at <anonymous> (experimental_bundle.js:91), <anonymous>:3384:7)
    at invokeInsertHook (eval at <anonymous> (experimental_bundle.js:91), <anonymous>:5212:28)
    at Vue$3.patch [as __patch__] (eval at <anonymous> (experimental_bundle.js:91), <anonymous>:5377:5)
    at Vue$3.Vue._update (eval at <anonymous> (experimental_bundle.js:91), <anonymous>:2317:19)
    at Vue$3.updateComponent (eval at <anonymous> (experimental_bundle.js:91), <anonymous>:2440:10)
    at Watcher.get (eval at <anonymous> (experimental_bundle.js:91), <anonymous>:2779:25)
    at new Watcher (eval at <anonymous> (experimental_bundle.js:91), <anonymous>:2762:12)
    at mountComponent (eval at <anonymous> (experimental_bundle.js:91), <anonymous>:2444:17)

Ok I know the solution:

I had to import Choices like this:

import * as Choices from 'choices.js'

This one fails in my project
import Choices from 'choices.js'

I am not sure why, anyway now it works.

[jshjohnson]

Looking online, this seems to be a TypeScript issue. According to StackOverflow, this should resolve your issue:

import {Choices} from 'choices.js'

Thanks!

[grzegorztomasiak]

I also tried it and the error was the same.

The only way it works for me is import * as Choices from 'choices.js'

Here's how my tsconfig looks like (if that matters):

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2016", "dom"],
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    "alwaysStrict": true
  }
}

I am still newbie in TypeScript, ES6 world so I don't understand some things yet.

However what I noticed, importing works as follows:
export const MyChoices = new Choices(...)

You can access it via
import {MyChoices} from './MyChoices'

If you make a class:
export default class MyChoices

You can access it via
import MyChoices from './MyChoices'

[jshjohnson]

So with ES6, if you provide a default export like this:
export default YourCode

You can then import it like:
import YourObject from 'YourFile'

However if there is no default export, you will need to import it like this:
import { YourObject } from 'YourFile'

In your config, try changing the following and see if this resolves your issue:

-"module": "commonjs"
+"module": "es6"

[grzegorztomasiak]

Oh yes!!! Changing module to es6 did the trick and I am able now to make imports like:

import Choices from 'choices.js'

I will google now the differences in module property to get know a bit more what's happening under the hood.

Thank you very much!

[jshjohnson]

No worries! :)