1

I am trying to use the scrollreveal javascript. Installed it via npm and use it in my NodeJS code (see below). Also, I'm including it in my HTML as well.

Now when I run nodemon app.js in hyper terminal I get this error:

C:\Users\Admin\Desktop\My Projects\test\node_modules\scrollreveal\dist\scrollreveal.js:33 container: document.documentElement, ^

ReferenceError: document is not defined

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello</h1>
    <script src="https://unpkg.com/scrollreveal@4.0.9/dist/scrollreveal.min.js"></script>
  </body>
</html>

app.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const ScrollReveal = require('scrollreveal');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(3000, function () {
  console.log('server start on port 3000');
});
Joshua
  • 3,055
  • 3
  • 22
  • 37
Spicy Sauce
  • 115
  • 1
  • 1
  • 9

1 Answers1

0

I think you misunderstood the way to use dependencies

First, NodeJS and the JavaScript that runs in the browser are completely different.

The problem you're facing here is that you're including a package that only works in the browser environment in NodeJS file. And since NodeJS doesn't have the concept of "document", therefore the error.

To fix this, you can simply remove the require statement from your NodeJS and just use "scrollreveal" in your HTML file. And since you're using a CDN link in your HTML, you don't need to install the dependency via npm. (You can use npm to manage your dependencies but that would require a modern Frontend setup, I would recommend you start with something like: Modern JavaScript Explained For Dinosaurs

Joshua
  • 3,055
  • 3
  • 22
  • 37
  • Where is your animation logic? You can use another JS file for your own app logic. If you think this answer does answer your question, you can mark this as accepted answer. – Joshua Apr 01 '21 at 08:59
  • I have a main.js where I placed ScrollReveal().reveal('.hello',{delay: 200}); . I already added . However it does not work. – Spicy Sauce Apr 01 '21 at 11:00
  • Sorry for the late reply. But that's another question so you should probably just ask this in a new question. A few things you can check though: 1. See if any errors are shown in your brower's dev console. 2. Same in the browser's console, see if all JS files are properly loaded. 3. Check that lib's docs and see if they have runnable examples, download them and replace their code with your own code and see if it works or not. Good luck! – Joshua Apr 07 '21 at 05:27