0

I want to be able to load a library called popmotion into my main page which is in an .ejs file being passed to node/express, currently the code in my file popmotion.js doesnt run, i want to be able to control dom elements mentioned in ejs file through popmotion.js, i get console errors of reference errors which indicate the the module popmotion installed in node modules isnt being recognized, i dont know if its to do with my list.ejs, app.js or my file structure or something else

my node file has these dependencies

const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const _ = require("lodash");
const popmotion = require("popmotion");

const app = express();

app.set('view engine', 'ejs');

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

mongoose.set('useNewUrlParser', true);
mongoose.set('useFindAndModify', false);
mongoose.set('useCreateIndex', true);
mongoose.set('useUnifiedTopology', true);
mongoose.connect("mongodb://localhost:27017/todolistDB");

and my list.ejs looks like this

<%- include("header") -%>

  <div class="box" id="heading">
    <h1> <%= listTitle %> </h1>
  </div>

  <div id="b"class="box ball">

    <% newListItems.forEach(function(item){ %>
      <form action="/delete" method="post">
       <div class="item">
        <input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form.submit()">
        <p><%=item.name%></p>
       </div>
       <input type="hidden" name="listName" value="<%= listTitle %>"></input>
      </form>
    <% }) %>

      <form class="item" action="/" method="post">
        <input type="text" name="newItem" placeholder="New Item" autocomplete="off">
        <button type="submit" name="list" value="<%= listTitle %>">+</button>
      </form>
  </div>

<%- include("footer") -%>

i also included a static public folder in express to run run styles.css and popmotion.js(the file im trying to render on main page), my file structure looks like this file structure

Legionnaire
  • 60
  • 1
  • 8

1 Answers1

0

You need to load your popmotion script from your frontend code. So within one of your EJS templates, eg:

<script src="javascripts/popmotion.js"></script>

At the moment you are loading it as a node module, which is not available to the browser when they are viewing your rendered template.

Russopotomus
  • 595
  • 3
  • 8