PouchDB.plugin("xyz") not attatching the plugin to the PouchDB

[himalay34]

Im trying to use pouchdb with electron-forge webpack template.

Pouchdb (leveldown adapter i.e native modules) works perfectly[Main process or renderer process]. But i cant use other plugins such as pouchdb-find, pouchdb-quick-search etc. even i try custom plugin i.e

 import PouchDB from "pouchdb"
 // import PouchDB from "pouchdb-core"
 // import PouchDB from "pouchdb-node"
 import PouchFind from "pouchdb-find"
 PouchDB.default.plugin(PouchFind.default)
 // PouchDB.default.plugin(PouchFind)
 // PouchDB.default.plugin(require("pouchdb-find").default)    
 PouchDB.default.plugin({
    foo: function(cb) {
       console.log("working")
       cb("done")
    }
 })

 const db = new PouchDB("kittens")
 db.foo().then(console.log).catch(console.error)  // returns db.foo is not a function
 db.find({
    selector: {name: 'Mario'}
 }).then(console.log).catch(console.error)  // returns db.foo is not a function

Info

• Environment: Windows 10,64bit (Electron Forge webpack)[https://www.electronforge.io/config/plugins/webpack] npx create-electron-app my-new-app --template=webpack
• Node.js: v16.15.0
• electronjs: 19.0.4
• Platform: Windows 10
• Adapter: leveldb
• Vuejs: ^3.2.37

Reproduce

Create an app with electron-forge webpack template i.e

npx create-electron-app my-new-app --template=webpack

then install pouchdb,pouchdb-find, any other pouchdb plugins, try using the plugins

webpack.rules.js

module.exports = [
  // Add support for native node modules
  {
    // We're specifying native_modules in the test because the asset relocator loader generates a
    // "fake" .node file which is really a cjs file.
    test: /native_modules\/.+\.node$/,
    use: 'node-loader',
  },
  {
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@vercel/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
  // Put your webpack loader rules in this array.  This is where you would put
  // your ts-loader configuration for instance:
  /**
   * Typescript Example:
   *
   * {
   *   test: /\.tsx?$/,
   *   exclude: /(node_modules|.webpack)/,
   *   loaders: [{
   *     loader: 'ts-loader',
   *     options: {
   *       transpileOnly: true
   *     }
   *   }]
   * }
   */
];

webpack.plugin.js

const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
module.exports = [
  new VueLoaderPlugin(),
  new webpack.DefinePlugin({
    __VUE_OPTIONS_API__: true,
    __VUE_PROD_DEVTOOLS__: false,
  }),
  new MiniCssExtractPlugin({
    filename: "style.css",
  }),
];

webpack.renderer.config.js

const rules = require('./webpack.rules');
const plugins = require("./webpack.plugins");
const { loader } = require("mini-css-extract-plugin");
const path = require("path");

rules.push({
    test: /\.vue$/,
    loader: "vue-loader",
},
  {
    test: /\.css$/,
    exclude: /node_modules/,
    use: [
      process.env.NODE_ENV !== "production" ? "vue-style-loader" : loader,
      //{ loader: "style-loader" },
      { loader: "css-loader", options: { importLoaders: 1 } },
      "postcss-loader",
    ],
  },
  // Images: Copy image files to build folder
  { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: "asset/resource" },

  // Fonts and SVGs: Inline files
  { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: "asset/inline" },
  //{test: /\.js$/, exclude: /node_modules/, use: ['babel-loader']},
  { test: /\.html$/, use: "vue-html-loader" });

module.exports = {
  // Put your normal webpack config below here
  module: {
    noParse: /^(vue|vue-router|pinia)$/,
    rules,
  },
  plugins: plugins,
  resolve: {
    extensions: [".js",".jsx", ".css", ".vue", ".json"],
    alias: {
      //vue: "vue/dist/vue.esm-bundler.js",
      vue: "@vue/runtime-dom",
      "@": path.resolve("src"),
    },
  },
};

[himalay34]

[ramblin-rose]

I may be missing something, but I've never seen a property on PouchDB named 'default', only defaults(). Where is that coming from?

It should be the following?

import PouchDB from "pouchdb"
import PouchFind from "pouchdb-find"

PouchDB.plugin(PouchFind)

[himalay34]

I may be missing something, but I've never seen a property on PouchDB named 'default', only defaults(). Where is that coming from?

It should be the following?

import PouchDB from "pouchdb"
import PouchFind from "pouchdb-find"

PouchDB.plugin(PouchFind)

without PouchDB.default return error. Uncaught TypeError: PouchDB is not a constructor

[himalay34]

I may be missing something, but I've never seen a property on PouchDB named 'default', only defaults(). Where is that coming from?

It should be the following?

import PouchDB from "pouchdb"
import PouchFind from "pouchdb-find"

PouchDB.plugin(PouchFind)

without PouchDB.default return error. Uncaught TypeError: PouchDB is not a constructor

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days