0

I want to use pouchDB in my WebApp so that when I click on a button, the data from a JSON file would be saved to pouchDB. In my index.html I imported these at first:

<script type="module" src="pouchdb/packages/node_modules/pouchdb/src/pouchdb.js"></script>
<script type="module" src="pouchdb-load/dist/pouchdb.load.js"></script>
<script src="js/pdb.js"></script>

I cloned pouchDB to my working html folder so the path should be fine. But in my js file it started to throw error from this line var PouchDB = require('pouchdb'); stating 'Uncaught ReferenceError: require is not defined', which I think it means that my WebApp failed to reach pouchDB from the src.

What I've tried:

  1. Use <script src="//cdn.jsdelivr.net/npm/pouchdb@7.2.1/dist/pouchdb.min.js"></script> in the html file instead of using pouchdb.js in the js folder as the source.

This is also the only source this PouchDB official guide uses in its todo demo. This demo worked perfectly on my laptop, but when it comes to my own WebApp it no longer works and still throws the same error.

Another problem for this method is that even if the cdn link worked and I could reach pouchdb.min.js, I still need the pouchdb.load.js to be able to work since I want data in the JSON file to be saved to pouch.

  1. In the PouchDB official guide, it doesn't even included this line var PouchDB = require('pouchdb'); in its app.js, but directly says var db = new PouchDB('todos');. But when I attempted to do it this way, a new error occurred: 'ReferenceError: PouchDB is not defined'.

  2. I also tried npm install pouchdb-browser and then in the js file I wrote:

var PouchDB = require('pouchdb-browser');
var pouchdb = PouchDB.default.defaults();

but it throws the same error associated with require.

I think the problem is still that the sources in the html failed to created this connection between pouchdb.js with my WebApp. Meanwhile everything seems fine when I followed the official guide to make the todo Demo. Any idea what might have caused this problem and how to solve it?

happylilem
  • 21
  • 2
  • Require is defined in Node.js. Browsers don't have definition for require. Look into using webpack or rollupjs to translate/bundle your code. – RamblinRose Feb 08 '22 at 17:08
  • Does this answer your question? [Javascript error : Uncaught ReferenceError: require is not defined](https://stackoverflow.com/questions/45723462/javascript-error-uncaught-referenceerror-require-is-not-defined) – RamblinRose Feb 08 '22 at 17:09
  • @RamblinRose Thanks! That question you linked partially answers my Q because even if I completely followed the pouchDB demo and took the require part away, it still wouldn't work, so I believe there're other embedded issues – happylilem Feb 10 '22 at 09:30

1 Answers1

2

I think you're mixing up client side and server side programming. You can't do "require" natively in client-side JavaScript code. Here's a very simple example of taking data from a form and writing it to local PouchDB:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/pouchdb@7.2.1/dist/pouchdb.min.js"></script>
  </head>
  <body>

     <textarea id="doc" rows="10">
{
  "a": 1
}
     </textarea>
     <br>
     <button onclick="save()">Save</button>
     <div id="response"></div>
     <script>

       const db = new PouchDB('todos')

       const save = async function() {
         const el = document.getElementById('doc')
         const doc = JSON.parse(el.value)
         const response = await db.post(doc)
         document.getElementById('response').innerHTML = JSON.stringify(response)
       }
     </script>
  </body>
</html>

It gets PouchDB from the CDN - notice that I'm using https:// instead of // as the protocol because we always want to fetch PouchDB using https even if the hosted page is served out on http.

Once PouchDB is loaded, we write the document to PouchDB database using the post function and write the response back to the page.

Glynn Bird
  • 5,507
  • 2
  • 12
  • 21
  • Thank you, this helps a lot. I'm curious why the `new PouchDB()` script works only if I put them in the html but not when they're in a js file... (I did remember to link to the js in my index.html). – happylilem Feb 10 '22 at 09:34
  • And one more question, since I'm a newbie, after reading your code on reading data in a file and save to pouchDB, I'm not sure where I should place the directory of the file. E.g. my file's directory is `data/test.json`, where in the code should I put this? – happylilem Feb 10 '22 at 09:39