Unable to use anime.js with node and express

[amanopia]

a.hasOwnProperty is not a function
after importing animejs js into my node environment using import anime from 'animejs' and registering it as a middleware with express using app.use(anime) as soon as I start the server, I am getting the following error

To Reproduce
Steps to reproduce the behavior:

1. npm install animejs --save
2. Set up the node server using

import express from 'express';
import anime from 'animejs';
const app = express();

const port = 3000;
app.listen(port, () => {
    console.log("server started on port 3000");
})

3. Configure a route inside the server file using

import express from 'express';
import anime from 'animejs';
const app = express();

// Added code
app.get('', (req, res)=>{
    res.render('index');
})

const port = 3000;
app.listen(port, () => {
    console.log("server started on port 3000");
})

4. Create a folder to serve static assets and include the javascript file that will be loaded by the HTML page. Also register the static directory in the server using

// configuring path
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// registering middleware to render static assets
app.use(express.static(path.join(__dirname, "../public")))

5. Create the script for manipulating DOM and reference the script in the HTML file, like so:

    <script defer src="./js/home.js"></script>

6. The script code:

// There is an element with the class of .toggle-dot, in the header I am using in as a partial. Partials get converted to HTML elements in the end when being rendered by the browser
anime({
    targets: '.toggle-dot',
    translateX: 250
})

Expected behavior
The element should be animated. The reason might be a being expected to be an object which might be actually not. And calling hasOwnProperty on a non-object might be causing the issue. I tried debugging the codebase but this is only what I could understand

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser : chrome

[juliangarnier]

Hmm, yeah I think the target type detection is confused by the environment.
Would you mind sharing the code somewhere so I can have a better look?
Thanks

[amanopia]

Here is the link to the code:
https://github.com/amanopia/dribbble-pages/tree/main/NodeApplication
Thanks!

[juliangarnier]

Can you try console.log(document.querySelectorAll('.toggle-dot')); in home.js and tell me what it returns?

[amanopia]

I am still getting the 500 internal server error (a.hasOwnProperty is not a function), with the same call stack being displayed along with it. The script isn't even loading. I tried using an alert message, but nothing came on the screen

[juliangarnier]

Sorry, by removing the anime call to prevent the error, so you can read the console.log(document.querySelectorAll('.toggle-dot'));

[amanopia]

Still, even after removing the anime call, I am getting the same thing

I did try removing the app.use() call for the anime library in the server file, and adding a script tag to the index.hbs file along with putting back the anime call, but now it says that `anime is not defined...

[juliangarnier]

It's really hard for me to see why this error occurs even if you don't call anime.js?.
Might also be related to #345
V4 might fix that

[amanopia]

I found a work-around. Went to

1. https://github.com/juliangarnier/anime/blob/master/lib/anime.min.js
2. Copied the whole code
3. un-minified it, because there were some errors being thrown around
4. created another file anime.js alongside home.js, and put the un-minified code there
5. used two script tags like so:

6. Put the anime code there, and it's working for now

Is it a good practice and is it unethical if I do it this way while pushing the software in production? Not that I am pushing it in production or anything, it's just a UI project for my portfolio, and I just wanted to use the library because it seemed great. Is it okay if I go with this, and are there any cons associated with doing it this way? Thanks!

[juliangarnier]

Well now I'm even more confused...

is it a good practice and is it unethical if I do it this way while pushing the software in production?

It should be fine!

[amanopia]

I am sorry for causing any confusion 😅. Here is the link to the repo, in case you want to have a look
https://github.com/amanopia/dribbble-pages/tree/main/NodeApplication/public/js
And checked out a glimpse of v4 on your Twitter handle, looks great! Gonna wait for that!
Thank you so much for the help!

[juliangarnier]

I'm glad it's working!