Taggd is not a constructor

[ifalldev]

Hi, I'm trying to use the package through NPM on MeteorJS but I'm facing a strange issue.

My implementation:

npm install --save taggd

and so

import Taggd from 'taggd';

const img = document.querySelector('#myImage');
const taggd = new Taggd(img);

But when I run the application this error appears on my console: Uncaught TypeError: Taggd is not a constructor.

And if i print a log on my console before the new Taggd (like this console.log(Taggd)) the result is a empty object!

But if I try to access the Taggd constructor on the console (just after the error has appeared) the return is the constructor function! And I can do all of my implementation there!

I would appreciate some help!

Thank you!

[timseverien]

Huh, interesting. This will be fun to debug! I’m assuming that the error occurs in a scoped context. By logging Taggd in the console manually, you refer to the global Taggd constructor. So I think the module isn’t exported correctly, but Taggd is defined globally. Could you please provide some additional information? - What version of what ES6 transpiler do you use? - Can you provide a script, just so I’m sure I’m reproducing it correctly? You should be able to resume work if you import it like so: ``` import 'taggd'; ``` Note this is a temporary fix until I find and solve the bug :) Thanks! Op do 19 jan. 2017 04:23 schreef Caio Batista <notifications@github.com>:

…

Hi, I'm trying to use the package through *NPM* on *MeteorJS* but I'm facing a strange issue. My implementation: npm install --save taggd and so import Taggd from 'taggd'; const img = document.querySelector('#myImage'); const taggd = new Taggd(img); But when I run the application this error appears on my console: Uncaught TypeError: Taggd is not a constructor. And if i print a log on my console before the new Taggd (like this console.log(Taggd)) the result is a empty object! But if I try to access the Taggd constructor on console (just after the error shown) the return is the constructor function! *And I can do all of my implementation on there!* I would appreciate any help! Thank you! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#52>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACyPa7I_jIpNF2nwysaNayxwS_u3Zyfeks5rTtdMgaJpZM4Lnqdb> .

[ifalldev]

Yeah! It works with import 'taggd'.
I'm using babel-compiler@6.13.0.

My script is just that which I passed before.

I installed it with node, imported the package and tried to use it on MeteorJS 1.4.2.
(If I'm not seeing what you need about my script, show me please)

Thank you!

[timseverien]

Ugh, having issues fixing this. Apparently, ES2015-style imports expects a format that is achieved by exporting ES2015-style. Unfortunately this affects AMD imports and the global “export” as well. Moment.js used to have similar issues.

Apparently, a module field in package.json is semi-standardised across different bundlers, allowing you to specify a path to a ES2015 file.

Would you please be so kind to test this change?

npm install timseverien/taggd#es2015-import

[sharpner]

I am running into the same issue. So maybe some feedback helps:
I am currently testing with the es2015-import branch and it helps a bit.

This works:

import Taggd from 'Taggd';
import {Tag} from 'Taggd';

but what I would need:

import {Tag, Taggd} from 'Taggd';

does not work.

Hope it helps and thx for fixing this :-)

[timseverien]

Good point. I might have an idea to solve it, but I'll have to look into it. Thanks for trying it out :)

[timseverien]

I’ve made two files, each exporting the library differently.

• umd.js exports Taggd, and the Tag class can be found as a static field in Taggd.
• modern.js export exports Taggd and Tag as named exports.

This means that those who import Taggd via ES2015 imports get access to both Taggd and Tag separately, whereas those who use the UMD bundle get access to the Taggd class and will have to use Taggd.Tag to create tags. This is slightly inconvenient, but I’m hoping this makes Taggd compatible for both import strategies.

To clarify this, I have added a section on the README.

Can either @ifalldev or @sharpner check whether Taggd imports as expected for an ES2015+ codebase? Again, you can fetch the branch using npm install timseverien/taggd#es2015-import. Make sure it installs the latest version of that branch instead of fetching it from cache or anything.

If all looks well, I’m going to merge the branch, release a new major and close this issue :)

[sharpner]

hey thanks for the fast updates.

I just did a quick check with webpack and import Taggd, {Tag} from 'taggd'; works for me now!

[sharpner]

are you going to merge this anytime soon? :)

[timseverien]

I might do it this weekend. I have had like 0 spare time past two weeks 😑

[sharpner]

yeah no worries :-) thanks for the update

[timseverien]

I forgot to say: it’s merged in 4.0.0 now :)

[sharpner]

thx :)

[ifalldev]

Hey! Sorry for my late feedback!

Everything went fine for me using import syntax in 4.0.0. Thanks for this!