WhatSock / apex

Apex 4X: The Comprehensive ARIA Development Suite
MIT License
28 stars 10 forks source link

TypeError after import apex4x #60

Closed sal-stallberg closed 3 months ago

sal-stallberg commented 3 months ago

Hello, We are trying to integrate your package into one of our projects with npm install. However, when we include the import 'apex4x' command in our main.js, we run into a TypeError.

To rule out side effects, I set up a Simple Vite+JS project and was able to recreate the error here too:

Uncaught TypeError: e2.event.on is not a function
    at String.<anonymous> (4X.js:7:20633)
    at Function.loop (4X.js:7:10226)
    at Function.<anonymous> (4X.js:7:20404)
    at Function.loop (4X.js:7:10174)
    at HTMLDocument.<anonymous> (4X.js:7:20338)
    at Function.loop (4X.js:7:10226)
    at Function.on (4X.js:7:20243)
    at e (4X.js:7:68033)
    at 4X.js:7:68818
    at node_modules/apex4x/Bundle/4X.js (4X.js:87:13184)

My npm version is 10.8.1 and my node version is v20.11.1

Do you have any ideas what went wrong? I would be happy if somebody can help me.

Thank you!

See the attached project

vitevanilla.zip

accdc commented 3 months ago

Hi, thanks for bringing this up. I'll try to diagnose this within the next couple of days and get back when I know more. All the best, Bryan

accdc commented 3 months ago

From what I can tell there appears to be an issue in the bundle code compiled by Rollup. I got the same error when I tried importing that file directly. I'm going to have to do some research to find out why this is the case, but in the meantime you can manually import the core and module files so that this error won't occur.

E.G. Within main.js:

import "./node_modules/apex4x/4X/4X.js"
import "./node_modules/apex4x/4X/Standard/Min/Datepicker.js"

Using the ReadMe logic guidance within the "4X/Standard" folder you can see if there are any dependencies for other module types. The Datepicker has no required dependencies, but if you wish to use the built in animations, you will need to import these modules as well.

E.G.

import "./node_modules/apex4x/4X/4X.js"
import "./node_modules/apex4x/4X/Standard/Min/Velocity.js"
import "./node_modules/apex4x/4X/Standard/Min/VelocityUI.js"
import "./node_modules/apex4x/4X/Standard/Min/Datepicker.js"

Hopefully this will resolve your issue until I can figure out what is going on with the Rollup script.

sal-stallberg commented 3 months ago

Thank you very much. I'll try it and give you feedback

accdc commented 3 months ago

Hi, as a quick update, I published a new version of the package that works, though for some reason using the package name as the import won't work and I haven't figured out why as yet. However it is possible to use the bundle this way.

Attached is an example of your original upload that now works: vitevanilla.zip

To try this out, do the following:

Unzip into your Git folder.

Using Git Cmd navigate to the vitevanilla root folder. ("cd vitevanilla")

Install the latest Apex4X package: "npm install apex4x"

Install the local webserver for testing: ".\WebserverInstall.sh"

Run the local webserver and run index.htm for testing: "static-server --index index.htm --port 80 --open"

This should run the code where it opens the datepicker as expected. I needed to make some code edits in index.htm and main.js for this to work.

Please let me know if this works for you.

sal-stallberg commented 3 months ago

Hello Bryan,

thank you for your support and the detailed explanation. Things worked out fine 👍

accdc commented 3 months ago

Excellent, I've also added some new NPM support information within the ReadMe in the root, plus examples in the new index.js file also in the root for future reference. These were pushed this weekend. All the best, Bryan