Issue with adapter pouchdb-adapter-idb on dev vs production builds

[akmjenkins]

Case

Bug

Issue

Errors in production build of create-react-app using pouchdb-adapter-idb but NOT in development.

Info

• Environment: Browser
• Adapter: IndexedDB
• Stack: React

Code

N/A

When I run my create-react-app in development mode, everything works fine. But when I build it for production, I receive these errors:

Error: You are using a function which must be overwritten by a plugin.
        You should either prevent the usage of this function or add the plugin via:
            import { RxDBUpdatePlugin } from 'rxdb/plugins/update';
            addRxPlugin(RxDBUpdatePlugin);

So far I've received 3 different ones about various plugins because it was working in development but not in a production build. The errors are very helpful and I was able to fix it quickly, but the difference between a development and production build is concerning.

Not sure what the difference is between production and development, or what repository this PR needs to go on, but something funny is happening.

By the way, thanks for the amazing library!

[pubkey]

Can you paste the code where you import rxdb and the plugins?
I have some ideas why this could happen.

[akmjenkins]

@pubkey

So, reading the docs, I see it's related to https://rxdb.info/custom-build.html.

I am a little confused by the docs and think they could use some modification.

On the install page it says to use:

import {
  createRxDatabase,
  RxDatabase
  /* ... */
} from 'rxdb';

On the custom build page it says:

By default, if you import RxDB into your javascript, a full batteries-included build will be imported.

But I don't know what import RXDB into your javascript - is it import * as rxdb from 'rxdb'?

I am doing this:

import {
  addRxPlugin,
  createRxDatabase,
  RxDatabase,
  RxDocument,
  RxCollection,
} from 'rxdb';

These are the plugins I have to add:

import { RxDBQueryBuilderPlugin } from 'rxdb/plugins/query-builder';
import { RxDBValidatePlugin } from 'rxdb/plugins/validate';
import { RxDBUpdatePlugin } from 'rxdb/plugins/update';

addRxPlugin(require('pouchdb-adapter-idb'));
addRxPlugin(RxDBQueryBuilderPlugin);
addRxPlugin(RxDBValidatePlugin);
addRxPlugin(RxDBUpdatePlugin);

create-react-app obviously tree-shakes out the unnecessary stuff in production builds, but not development builds, which is good! - but stuff working in dev and not production in RxDB is bad.

Thank you so much for responding so quickly! ⚡

[pubkey]

Whenever you do a custom build, do not import anything from 'rxdb'.
Instead you should import from the core module.

import {
  addRxPlugin,
  createRxDatabase,
  RxDatabase,
  RxDocument,
  RxCollection,
} from 'rxdb/plugins/core';

Please help me by adjusting the documentation. It is very hard for me to understand what is needed because I know RxDB too much :)

[akmjenkins]

But I’m not trying to do a custom build. I’m just trying to use the library, as painlessly as possible, inside create-react-app, which is why I did import from rxdb. It’s also not clear to me why these plugins are tree-shaken out of the production build if they are obviously being used by something in the development build. I think there’s a bug in here somewhere, in addition to a documentation update.

…

On Sat, Jan 16, 2021 at 11:47 AM Daniel Meyer ***@***.***> wrote: Whenever you do a custom build, do not import anything from 'rxdb'. Instead you should import from the core module. import { addRxPlugin, createRxDatabase, RxDatabase, RxDocument, RxCollection,} from 'rxdb/plugins/core'; Please help me by adjusting the documentation. It is very hard for me to understand what is needed because I know RxDB too much :) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2798 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFIKAOMHJ2ELEAWP23VRA3S2GYIJANCNFSM4WECQ2PA> .

[pubkey]

Ah sorry. Now I understand.
So this is problem. Have you checked if it is reproduceable in the react example?
I think this heavily relies on the webpack config. Also it might have something todo with setting sideEffects: false here

[pubkey]

Can you remove this line in your node_modules/rxdb/package.json and check if this solves the problem?

[akmjenkins]

@pubkey - confirmed this changes the behaviour.

You can clearly see it in the bundle size:

// production build with the sideEffects: false
220.9 KB (-40.01 KB)  build/static/js/2.aa0bbd8f.chunk.js 

// production build with the line removed
260.9 KB (+40.01 KB)  build/static/js/2.aa0bbd8f.chunk.js

Not to put too fine a point on it, because I'm sure you understand what is happening, but just for full clarity:
When I have the sideEffects: false line removed, I don't need to add the plugins manually for it to work in production.

[pubkey]

Thank you.
As far as I understand, having sideEffects: false on the main module makes no sense. I set it to true now.
Having it set to false let webpack to not running the internal addRxPlugin calls.