Fixed error when vue module exports a function

[karevn]

This code would rise an error:

<script>
module.exports = function (context) {
}
</script>

The deal is that module.options is not defined in this case, and there's module.options.template usage in vue-loader.

[yyx990803]

What's the use case of this? It's not a supported usage pattern.

[karevn]

Dependency injection, especially when the dependency object is created by external code and cant be require'd.

[karevn]

Just to make things clear - I mean the JS code inside .vue file. And the code that handles functions exported is already there, but does not work if module does not also export .options property, which is illogical.

[yyx990803]

By design the *.vue file expects the export to be either an options object or a component constructor function... does usage like this work with hot module replacement?

[karevn]

I suppose you mean something like:

Vue = require('vue')
module.exports = Vue.extend(...)

but regardless of what the intention was - it still does not allow dependency injection.

So what I am trying to do is to inject my dependencies when creating the component:

parent.vue

<script>
module.exports = {
  components: require('child.vue')(dependencyReceivedFromTheEnvironment)
}
</script>

child.vue:

<script>
module.exports = function (dependency) {
  return ....//component created using the dependency - like local jQuery, service object, etc.
}
</script>

Even though it was not designed to work like this, it's was dead easy to fix the problem with my approach.

[yyx990803]

What I am pointing out is - the toolchain around vue-loader, e.g. hot reload, is based upon the assumption that the main export from a *.vue file is always either an options object or a constructor. An arbitrary factory function may work in some cases with your fix, but not in all cases. If we want to officially support this pattern then it should work in all cases, but your proposed fix doesn't do that.

[karevn]

Well. How do I implemement dependency injection then?

[yyx990803]

I'd like to know what makes dependency injection necessary when there is a module system. If it's for testing you can use vue-loader's inject mode.

[karevn]

Most staightforward one - when you need to build a redistributable
"container" component that will wrap the dynamic content without ugly
workarounds. Or when you receive a backend communication service object
inherited from the legacy system. You name it....

On Fri, Jan 22, 2016 at 8:45 PM, Evan You [email protected] wrote:

I'd like to know what makes dependency injection necessary when there is a
module system. If it's for testing you can use vue-loader's inject mode.

—
Reply to this email directly or view it on GitHub
#137 (comment).

[karevn]

eee6bdd does not fix this issue, as it creates a new empty object and effectively ignores the template exported by .vue file.