Problem importing EventEmitter

I imported the npm package ‘d3-mitch-tree’. I am trying to use it inside a custom element.

When trying to use it, the import fail because this library ends up calling:

import EventEmitter from 'events'

But the framework is unable to find this “events” library. Indeed, I see the following error :

Cannot find module 'events' in 'public/custom-elements/wix-default-custom-element.js'

Does anyone know how I can resolve this? Maybe there’s an npm package that I need to install?

Hey!

Could you please share with me a link to the site with the issue?

Thanks.

1 Like

Hi mvveiga, thanks for the suggestion.

I tried that, but it still seems to fail. The web developer console from the browser still shows :

Cannot find module 'events' in 'public/pages/zpi11.js'

after I added the line you suggested.

@mvveiga : is there an npm package that you had to install for the line var events = require(“events”) to work for you?

I tried adding these 2 swiper lines. It works well in both context (in a simple javascript file that I import on my home page and in a custom element).

However, simply adding this line :

var events = require('events');

makes it crash in either context, with the following error :

Cannot find module 'events' in 'public/custom-elements/wix-default-custom-element.js'

Does this line work on your end?

@mvveiga So the npm package that I am trying to work with is ‘d3-mitch-tree’.

When I do:

import {CircleTree} from 'd3-mitch-tree'

It fails, because this library contains this line :

import EventEmitter from 'events'

and this line just does not work for me.

When you say “I found “event-emitter” and the import works fine.” what import exactly works for you?

Hi Doron, sure, here it is.
I post it in a strange way because I am not allowed to post link

www DOT harint DOT com / morpion ?lang=en

Thanks for your help.

I got.
When you import the npm d3-mitch-tree you got the event issue.
The d3-mitch-tree is trying to load the node module “events”.

So I guess that module needs to run on node env (server side)
You can try on jsw file (backend).

That seems to be working well indeed! Thanks a lot!

The only issue remaining is that this library acts on elements of the DOM.

So at some point, this library needs to call

tree.setElement(document.getElementById("myId"))

But it seems that I cannot call “document” from the jsw file on the backend? Is there a trick for a backend web module to get access to the DOM?

@mvveiga

That seems to be working well indeed! Thanks a lot! The only issue remaining is that this library acts on elements of the DOM.

So at some point, this library needs to call

tree.setElement(document.getElementById(“myId”))

But it seems that I cannot call “document” from the jsw file on the backend? Is there a trick for a backend web module to get access to the DOM?

Hey @sebastienmoutondev !

After looking into the package specifications I can see that it is plugin-based.
In Wix platform, there’s indeed a limitation on accessing the DOM which means that external components and elements can’t be added to your page.

Unfortunately, it means that this specific NPM module is not compatible with the platform and can not be used in order to add/move elements.

I’d suggest considering implementing the UI aspect of it using Custom Elements and Animation API .

Doron.

Hi @doron-alkalay thanks for your help. Can I use an npm package inside a custom element?