Having trouble reaching PouchDB in my html WebApp

Question

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:

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.

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'.
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?

Answer 1

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.

Having trouble reaching PouchDB in my html WebApp

Question

1 answers

solution1
2 2022-02-09 09:38:26

Having trouble reaching PouchDB in my html WebApp

Question

1 answers

solution1 2 2022-02-09 09:38:26

solution1
2 2022-02-09 09:38:26