0

I have trouble importing an external class into a single file Vue component.

The component looks like this:

<style>
</style>
<template>
  <div>
    A page
  </div>
</template>
<script>
import AClass from './js/aclass.js';

// -----------------------------------------
// I have also tried all the below options
// -----------------------------------------

// import default from '/js/aclass.js';
// import * from '/js/aclass.js';
// import '/js/aclass.js';

// import default from '/js/aclass';
// import AClass from '/js/aclass';
// import * from '/js/aclass';

// import { AClass } from '/js/aclass.js';

// const AClass = require('/js/aclass.js');

module.exports = {
    data: function () {
        return {
        }
    },
    mounted: function(){
        // console.log('ACLass', AClass);
    },
    destroyed: function(){
    },
    methods: {
    },
}
</script>

and the class file looks like this:

class AClass {
    constructor() {
        return this
    }
}

export AClass

or

export default class AClass {
    constructor() {
        return this
    }
}

None of the options seem to work: all the options based on import generate an error that says ReferenceError: "responseText is not defined" and the ones based on require one that says ÀClass is not defined` (when the console.log line is uncommented).

I have resorted to loading the class in the window global in the Vue.js base app - but everyone says that's barbaric, and I would like to be able to delay the loading of the library (the real one is heavier, and somewhat rarely used).

I have checked the various answers such as this and this and this but it looks like the mere use of import in the component makes things go wrong.

The component itself is loaded like this

var app = new Vue({
    el: '#app',
    router: (new VueRouter({
        routes: [
            { path: '/view/grid/:md5', component: httpVueLoader('components/view/grid.vue'), name: 'grid_md5' },  
        ] 
    })),
});

I am sure the solution must be there somewhere, but after about three hours of banging my head against this, I will throw myself at the mercy of the StackOverflow crowd.

simone
  • 4,667
  • 4
  • 25
  • 47
  • Just to be sure of my understanding.... you problem is related to import an external script into your main html page, is it right? I'm confused because I saw `module.exports` and at same time `import ...` and not `require...`. Check it out this: [link](https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file) – Felipe Jacob Apr 22 '20 at 16:06
  • @FelipeJacob - my problem is importing a script in a Vue.js __component__ - exports and require are things I tried in desperation. However, the link you provide set me on the right path. Now I just gotta iron out a couple of details: (1) vue.js namespaces and (2) async vs sync loading (mostly an aesthetical issue). Thanks a lot. Would you want to provide an answer I can accept? Should I provide you with code on how I did it so that's easire? – simone Apr 23 '20 at 10:32

0 Answers0