10

I am trying to reconfigure my Symfony 3 project to use webpack encore instead of normal asstets. I am a little stuck with this.

For one part of the application I developed some JS plugins which inherits from Kube (a CSS and JS Framework I am unsing). Here is an exmaple:

(function (Kube) {
Kube.Assignment = function (element, options) {

    this.namespace = 'assignment';
    this.defaults = {
        //...
    };

    Kube.apply(this, arguments);

    this.start();
};

Kube.Assignment.prototype = {

    start: function () {
        //...
    }
};

Kube.Assignment.inherits(Kube.Distribution);

Kube.Plugin.create('Assignment');
Kube.Plugin.autoload('Assignment');

}(Kube));

Unfortunatly Kube is not recognized.

The module 'imperavi-kube' is installed via yarn and is imported via 

let Kube = require('imperavi-kube');

I am getting the following error: TypeError: Kube.Assignment.inherits is not a function

Propably this is not a issue of the Kube Framework but somthing about handeling JS plugins with webpack.

Inside the Kube module there is a class 'Kube' defined with a prototype. The Prototype ends with window.Kube = Kube;

SpigAndromeda
  • 174
  • 1
  • 11

1 Answers1

2

Try to import Kube like this:

import * as Kube from <your path> or <alias> or <module name>

I may be wrong, but as far as I remember sometimes it works a bit differently.

Anton Pilyak
  • 1,050
  • 2
  • 15
  • 34
  • That worked! Is there a version of this line which uses the require method. As far as I can see I have to give the full relative path to the js file of kube (inside node_modules)? – SpigAndromeda Apr 10 '18 at 23:22
  • Yes, or either you can add node_modules path to resolve/modules section in your webpack config (like this: path.resolve(__dirname, '../node_modules') ), or use an alias. – Anton Pilyak Apr 11 '18 at 09:48
  • Use `index.js` files to define exports so you don't have to specify the path to the file inside `node_modules` https://stackoverflow.com/a/29722646/9083959 – lukas-reineke Apr 11 '18 at 12:44
  • Well, it is quite ambiguous to use such aproach when you're already using Webpack. Usually, if the module follows all naming conventions, it is enough to add path.resolve(__dirname, '../node_modules') to webpack config and add modules by name. If the module doesn't follow all conventions, it might be necessary to add an alias. And anyway, it is much better then using a special file for that. – Anton Pilyak Apr 11 '18 at 13:20