KUTE and webpack

[0181532686cf4a31163be0bf3e6bb6732bf]

Hi,

I've stuck with a weird issue with inability to perform a simple transform (probably it's the issue with my setup). I'm using webpack to make a build of my code.

The animation code itself is actually taken from this codepen: http://codepen.io/thednp/pen/YWbpJo

However, when I try to run it in my webpack environment (not minimized, but compiled bundle), after tween.start() console is flooded with 1.bundle.js:27189 Uncaught TypeError: Cannot read property 'length' of undefined.

I've found out that the code at line 27189 is https://github.com/thednp/kute.js/blob/master/kute-svg.js#L247

What can cause this issue? Are the any globals other than KUTE SVG plugin relies on? My webpack configuration:

var webpack = require("webpack");

module.exports = {
  entry: './src/main.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: require.resolve('zepto'), loader: 'imports?this=>window' },
      { test: require.resolve('kute.js'), loader: 'expose?KUTE' },
    ],
    plugins: [
       new webpack.ProvidePlugin({
            KUTE: "kute.js"
       })
    ]
  },
  resolve: {
    modulesDirectories: ['node_modules', 'bower_components', 'web_modules']
  }
};

kute.js is installed from npm. Fragment of package.json:

  "dependencies": {
    "zepto": "^1.2.0",
    "kute.js": "^1.5.0"
   }

Requiring of KUTE in main.js:

require(['zepto', 'kute.js', 'kute.js/kute-svg'], function(z, k, s) {   

[thednp]

npm doesn't have the latest version, my friend @IngwiePhoenix isn't available to push the new version.
Unfortunately I don't have a test environment for testing the npm, require, etc, I have no idea what webpack does, so I am open to any suggestion you might have.

Also I'm working on a new version of KUTE.js with a full review of the core and plugins, a version that should fix and improve many things, so there's your chance to bring that kick.

[0181532686cf4a31163be0bf3e6bb6732bf]

Thanks for quick reply! Can you suggest where should I pick the latest version from (not mentioning this repo, of course)?

New version is always cool, but I think that's going to be another major release which isn't going to happen soon :) And it's okay.

As for the issue itself, I think it's somehow related to missing window globals or smth. Also the mentioned function is getting called from within a loop or recursively — the number of errors increases very quickly:

[thednp]

This is the place to find the latest version and it's really OK.
https://github.com/thednp/kute.js/releases
also here
https://github.com/thednp/kute.js/tree/1.5.2

Now, I have a question for you: does your SVG actually exist in the DOM when you create the tween object?

[0181532686cf4a31163be0bf3e6bb6732bf]

Okay, I will pick up this version then. Yes, I fully copied that codepen and run my code Zepto(document).ready(function() { here });

[thednp]

Don't use zepto, try without it. And move the code to the footer.

[thednp]

Well, is it fixed?

[thednp]

If you remove Zepto(document).ready(function() { // KUTE code here }); and move your // KUTE code here in the footer, there is no need to do .ready(), IT IS READY in the footer. You save load time and performance as function nesting (jQuery sweet sizzle) is always payed in performance.

[0181532686cf4a31163be0bf3e6bb6732bf]

I have to use .ready for another code, I'm creating some elements on the fly and I download a big chunk of data, so .ready will finish a loading animation

[0181532686cf4a31163be0bf3e6bb6732bf]

I decided to try bower — I've seen bower releases are keeping the pace with this repo, latest version there is 1.5.2 — and ran into another issue:
http://stackoverflow.com/questions/39282973/webpacks-require-does-work-but-require-resolve-doesnt

[thednp]

I hope someone can contribute with a better UMD definition.

[thednp]

Doesn't this help in any way?
https://github.com/thednp/kute.js#commonjsamd-support

[0181532686cf4a31163be0bf3e6bb6732bf]

Well I actually use require function, I can test it with define approach, maybe it will help

[thednp]

Well ok try your best, I need to know a resolve on the issue as I'm preparing for a new release in the next days. Also please test the other plugins, some use slightly different UMD. Here is something I found interesting https://addyosmani.com/writing-modular-js/

[thednp]

Please download the latest master and do some checks, there's some overall improvements and fixes, but none of them are related to your problem unfortunately. I also want to know if you managed to solve the problem so I can look for a solution because I'm almost ready to draft a new release.

[thednp]

Hello again. I've talked with a friend of mine and he suggested you should create a repository with the exact thing you are up to so we can have a look and create PR with a fix, as he thinks you aren't using the webpack stuff correctly.

[thednp]

I had a few attempts to try to fix the issue (before none of my friends check it yet) and I have to say:

• use proper namespace: kute.js is the package name and the file name, then KUTE is the exported object you work with it's methods
• please check the webpack docs and post any issue regarding using it in their repository, it's very possible this isn't my package's issue (as one of my friends suggested at a first inspection some days ago)
• please post back any resolution you might find.

[0181532686cf4a31163be0bf3e6bb6732bf]

Hi @thednp,
File bundle.js will be created by webpack on successful compilation (concatenation on debug). I've tried using lowercase naming:

With loaders in webpack.config.js commented out:

ERROR in ./main.js
Module not found: Error: Cannot resolve module 'kute.js/kute-svg.js' in /storage/kutesvg-bower-webpack
 @ ./main.js 1:0-3:2

ERROR in ./main.js
Module not found: Error: Cannot resolve module 'kute.js' in /storage/kutesvg-bower-webpack
 @ ./main.js 1:0-3:2

Uncommented:

module.js:327
    throw err;
    ^

Error: Cannot find module 'kute.js'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.require.resolve (internal/module.js:16:19)
    at Object.<anonymous> (/storage/kutesvg-bower-webpack/webpack.config.js:22:23)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at module.exports (/usr/lib64/node_modules/webpack/bin/convert-argv.js:80:13)

[0181532686cf4a31163be0bf3e6bb6732bf]

Specification itself says that name should be lowercase: https://github.com/bower/spec/blob/master/json.md#name

Currently it's uppercase: https://github.com/thednp/kute.js/blob/master/bower.json#L2

Though bower finds it and installs as bower_components/KUTE.js without any problem.

[thednp]

I see, well nobody reported anything about npm or bower, this webpack stuff, IDK.

[0181532686cf4a31163be0bf3e6bb6732bf]

Well, it looks like there are two ways of loading a bower module from webpack (http://webpack.github.io/docs/usage-with-bower.html and https://github.com/lpiepiora/bower-webpack-plugin), but none of them seems to work properly, thus it's really a webpack problem. I think this issue can be closed now, I will try to find a workaround. Thanks much!

[0181532686cf4a31163be0bf3e6bb6732bf]

Hi again. I've seen you pushed new version to npm, so I successfully installed 1.5.3 + svg plugin. It seems that plugin got installed properly (I get no errors when requiring it), however, the problem from my first comment is still present — when executing a start() on Tween object (made by KUTE.fromTo(...)), I get an error: TypeError: Cannot read property 'length' of undefined. I've debugged the code which causes it and it's this line: https://github.com/thednp/kute.js/blob/master/kute-svg.js#L253. Does it mean that KUTE can not parse path or something?

[thednp]

@lyssdod I need to see an example, I cannot guess/feel what's going on.

[0181532686cf4a31163be0bf3e6bb6732bf]

@thednp https://github.com/lyssdod/kutesvg-webpack here it is. Code is from multi path svg morph example.

[thednp]

@lyssdod I don't know much about webpack and require stuff, please give me something I can click and see the console.

Let me ask you something else. Where is your script loaded?
Please make it that the KUTE.js scripting to be executed AFTER the content, at the end of the <body>.

[IngwiePhoenix]

@lyssdod Hi. I am going to investigate - after all I used to be a webpack support staff member before i had to go somewhere for a while. Ill post once i have it working!

[0181532686cf4a31163be0bf3e6bb6732bf]

@thednp Script is generated by webpack (all deps and main.js are concatenated to bundle.js) and loaded in index.html. I've tried various window.ready and other handlers/loaders/events to ensure code is executed only after DOM is built and got no differences, thus I think the problem is somewhere else.
@IngwiePhoenix Thank you!

[IngwiePhoenix]

So first off:
https://github.com/lyssdod/kutesvg-webpack/blob/master/main.js#L1 : Defines "...(kute)..."
https://github.com/lyssdod/kutesvg-webpack/blob/master/main.js#L2-L5 : Uses "KUTE"

Next,
https://github.com/lyssdod/kutesvg-webpack/blob/master/webpack.config.js#L14 : Not required. This might actually break KUTE.js instead! KUTE.js was modified by me with a proper, uniform JS "standard" called UMD (Universal Module Definition) to allow it to run in Webpack and anything that supports CommonJS or RequireJS - or plain old window.-style access.

Further, your example does not show an example HTML document. So I have to assume that your DIVs are static in the document. In this case, make sure that your code executes at the bottom.

<!DOCTYPE html>
<html>
<!-- ... snip ... -->
<body>
  <div id="w1"></div>
  <div id="w2"></div>
  <!-- ... -->
  <script src="path/to/webpack-output.js"></script>
</body>
</html>

For example, assuming that you need to use a JS library with a document-ready function, your code would look like so:

// Tell Webpack what to import:
var KUTE = require("kute.js");
var $ = require("<insert your lib here...>");

// Execute:
$.ready(function(){
  var multiMorph1 = KUTE.to('...', { path: '...' }).start();
});

And that's that. If you are inserting the DIVs dynamically, then make sure that you structure your async operations - use Promises or proper async workflows. I hope it helped, feel free to ask back - im available for a little bit of time!

[0181532686cf4a31163be0bf3e6bb6732bf]

@IngwiePhoenix
not mentioning 'kute/KUTE' namings,
I tried to remove https://github.com/lyssdod/kutesvg-webpack/blob/master/webpack.config.js#L14 and got Uncaught TypeError: Cannot read property 'dom' of undefined pointing to
https://github.com/thednp/kute.js/blob/master/kute-svg.js#L24

[0181532686cf4a31163be0bf3e6bb6732bf]

That's why I use expose plugin — to provide a virtual window object to SVG plugin

[thednp]

I think I will filter out the cases when the <svg> isn't there in the DOM when KUTE.js is looking for it. So everybody doing this kind of stuff to always use it right.

https://github.com/thednp/kute.js/blob/master/kute-svg.js#L43
This is going to be

if (!_svg && !_svg.ownerSVGElement) {return;} // if SVG API is not supported and **no SVG found**, return

[0181532686cf4a31163be0bf3e6bb6732bf]

@IngwiePhoenix as for 'kute/KUTE' in https://github.com/lyssdod/kutesvg-webpack/blob/master/main.js#L1-L5:

kute is the result of "requireing" kute.js module, which's only KUTE.js itself (core). KUTE is the object, exposed by core KUTE.js into fake window namespace (expose plugin of webpack does that). As SVG plugin is tied to window object (https://github.com/thednp/kute.js/blob/master/kute-svg.js#L24), it's the only possible way of using plugin now.

[thednp]

@lyssdod So you say we need to connect the SVG plugin to KUTE.js core in a different manner?

[0181532686cf4a31163be0bf3e6bb6732bf]

@thednp I don't know how difficult it is for you. I wonder why does it fail in such (artificial window) setup

[thednp]

@lyssdod this post by @IngwiePhoenix looks solid for me, why won't you work on that idea?

PS: I would love to have more people around this issue.

[0181532686cf4a31163be0bf3e6bb6732bf]

@thednp @IngwiePhoenix I've added missing index.html and updated code to use the result of require function, instead of relying onto global namespace. The problem still there

[thednp]

Where is the index.html and where should I look for the bundle.js file?

Please send over your skype via dnp.digital@gmail.com

[thednp]

https://github.com/thednp/kute.js/releases/tag/1.5.4

[0181532686cf4a31163be0bf3e6bb6732bf]

Thanks!

[thednp]

@lyssdod Please do me a favor and test all plugins and let me know if there's anything wrong.
Thank you.

[thednp]

@lyssdod Please test the new version and let me know if any problem.

[0181532686cf4a31163be0bf3e6bb6732bf]

@thednp Sure, I will report back shortly

[0181532686cf4a31163be0bf3e6bb6732bf]

It works! Thanks you very much!

[thednp]

Alright, you're welcome.