Sharing schemas with a common library used by both backend and frontend with Webpack 5

[eliw00d]

I have a monorepo like this:

backend/services
common/libraries
frontend/applications

In common/libraries I have a library that defines schema using new mongoose.Schema(). I have tried using both mongoose and mongoose/browser. Which one should I use here if it's being used in both backend and frontend?

In backend/services I use the schemas using something like mongoose.model('collection', schema).

In frontend/libraries I want to be able to use the schemas shared by common/libraries.

However, I get errors like this (for mongoose/browser in common/libraries):

Compiled with problems:

WARNING in ../../../node_modules/bson/dist/bson.browser.esm.js 2175:30-59

Module not found: Error: Can't resolve 'crypto' in '/monorepo/node_modules/bson/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }

and like this (for mongoose in common/libraries):

TypeError
n.emitWarning is not a function
Call Stack
 Object.e.warn
  application/../../../node_modules/mongoose/dist/browser.umd.js:240:29
 P.path
  application/../../../node_modules/mongoose/dist/browser.umd.js:642:956
 P.add
  application/../../../node_modules/mongoose/dist/browser.umd.js:628:2908
 P.add
  application/../../../node_modules/mongoose/dist/browser.umd.js:628:2838
 new P
  application/../../../node_modules/mongoose/dist/browser.umd.js:610:2277
 eval
  application/../../../common/libraries/schema-library/dist/ExampleSchema.js:54:33
 Object.../../../common/libraries/schema-library/dist/ExampleSchema.js
  main.js:4663:1
 Object.options.factory
  runtime~main.js:680:31
 __webpack_require__
  runtime~main.js:36:33
 fn
  runtime~main.js:351:21

The documentation is somewhat brief about setting this up and just says using target: 'web' should suffice. The default for Webpack is that, so I'm not sure what else I need to do to get this working other than to start adding polyfills.

Any thoughts?

[vkarpov15]

Our current docs are out of date for Webpack 5. Try adding the polyfills suggested in this PR: #11584 and let me know if you run into more issues 👍

[eliw00d]

Our current docs are out of date for Webpack 5. Try adding the polyfills suggested in this PR: #11584 and let me know if you run into more issues 👍

I updated the title to include 5 in case others have the same question.

I will give the polyfills a shot and let you know how it goes.

I did also notice that mongoose/browser does not have TypeScript types.