Module doesn't export init function

Question

Module doesn't export init function

Closed this issue 8 years ago · 11 comments

I tried to implement vanilla-tilt using require("vanilla-tilt"); but failed, because the init function isn't exported. It could be completely my fault and if I'm wrong, we should update the README.md instructions with a working example.
Basically, I tried the following:

var tiltjs = require("vanilla-tilt");
tiltjs.init(document.querySelector(".postImgContainer"), {
	max: 25,
	speed: 400
});

Which results in an tiltjs.init is not a function error. When i try this:

var tiltjs = require("vanilla-tilt");
VanillaTilt.init(document.querySelector(".postImgContainer"), {
	max: 25,
	speed: 400
});

It works, but just because VanillaTilt is globally available.

Answer 1 · 2017-02-24T11:50:15.000Z

Can you please run console.log(tiltjs) to see what is the actual return of that require?

I did try npm install vanilla-tilt and then in NodeJS i tried to

let vanillaTilt = require('vanilla-tilt'); console.log(vanillaTilt.init);

and the output is:

[Function: init]

Try to console.log the tiltjs object returned from require 😄

Answer 2 · 2017-02-24T11:50:33.000Z

Or tell me how to reproduce your problem, some simple way

Answer 3 · 2017-02-24T11:55:07.000Z

Mh, this is pretty wired. I get the output undefined but when I use tiltjs.default.init(....) it works.

Answer 4 · 2017-02-24T11:57:13.000Z

I did a fresh install of vanilla-tilt and copied your example. Still get undefined.

Answer 5 · 2017-02-24T11:59:19.000Z

I think this happens because I'm not using ES5. ES5 puts the .default. automatically between these functions. Could this be possible?

Answer 6 · 2017-02-24T12:08:49.000Z

I really don't know how all this imports works. But you can read here http://www.2ality.com/2014/09/es6-modules-final.html

I think you need to read at 3.2 Default exports (one per module)

Answer 7 · 2017-02-24T20:06:11.000Z

@micku7zu I think I found the issue. Module bundlers are using the module variable, which points to the ES5 script. Check out the PR.

Answer 8 · 2017-03-05T19:14:55.000Z

I think I have same issue, I tried to use this in IE11 (no classes) then I tried to import the babel version.
import VanillaTilt from 'vanilla-tilt/dist/vanilla-tilt.babel';

But i got similar error:
_vanillaTilt2.default.init is not a function

Any solution or workaround is appreciated !!

Answer 9 · 2017-03-05T19:22:30.000Z

@MarcoMedrano you can use my fork for now. Just run npm install bastilimbach/vanilla-tilt.js#fix/issue-15

But for the future, I think we need to rethink the directory structure and build process of vanilla-tilt.

Answer 10 · 2017-03-05T19:36:04.000Z

Yeah that worked even I did not had to specify babel version:
import VanillaTilt from 'vanilla-tilt';

Thank you!

Answer 11 · 2017-03-05T19:41:27.000Z

I merged the pull request. Thanks 👍