0

Good Day. Banging my head here and need a pair of fresh eyes...

I have a NextJS (10.0.6) app (React 17.0.1). I'm trying to incorporate Bouncer.js validation code.

Both the bouncer.min.js file and my init() file are being pulled into the correct page,

<script src="/static/bouncer.min.js" async=""></script>
<script src="/static/bouncerLoad.js" async=""></script>
</body>

which I believe is evident because I'm getting an Undefined error.

Unhandled Runtime Error

ReferenceError: Bouncer is not defined

This is the content of my bouncerLoad.js file:

var validate = new Bouncer('contactform');
console.log("bouncer loaded");

Any suggestions?

dmayo
  • 640
  • 6
  • 16
  • Is there a reason you can't use npm to install and import it? – IndevSmiles Oct 31 '22 at 15:54
  • tried that too to no avail. Should work the way I have it too. When I import it I get `ReferenceError: self is not defined`. I'm still having to add the bouncerLoad.js to get the init to fire. `module.exports = require("formbouncerjs");` – dmayo Oct 31 '22 at 20:52
  • Why are you using a script to load your custom code? Next.js is a React framework, use React code instead (call `new Bouncer()` inside a `useEffect`). – juliomalves Nov 02 '22 at 22:48
  • Same issue @juliomalves -- `import formbouncerjs from "formbouncerjs";` `useEffect(() => {` ` new Bouncer()` Still results in "ReferenceError: self is not defined" `module.exports = require("formbouncerjs");` – dmayo Nov 03 '22 at 01:46
  • If you're using npm to import `formbouncerjs` then you have to dynamically import it inside the `useEffect`. See [Why am I getting ReferenceError: self is not defined when I import a client-side library?](https://stackoverflow.com/questions/66096260/why-am-i-getting-referenceerror-self-is-not-defined-when-i-import-a-client-side). – juliomalves Nov 03 '22 at 08:10

0 Answers0