Error importing mongoose on clientside using es6 import, webpack, and create-react-app

[seasoup]

4.11.9

Do you want to request a feature or report a bug?
Report a Bug

What is the current behavior?

Error when loading page that imports mongoose on the client side when using webpack through create-react-app.

This line of code:

new webpack.DefinePlugin({ 'typeof window': '"object"' })

from
http://mongoosejs.com/docs/browser.html

does not appear to fix it.

The error:
× TypeError: Object prototype may only be an Object or null: undefined
(anonymous function)
node_modules/mongoose/lib/browserDocument.js:99

If the current behavior is a bug, please provide the steps to reproduce.
npm install -g create-react-app
create-react-app foo
cd foo
npm install --save mongoose

edit App.js to add to the first line:
import mongoose from "mongoose";

npm start // or yarn start if using yarn

What is the expected behavior?

App loads without error.

Please mention your node.js, mongoose and MongoDB version.
node.js 7.2.0
mongoose 4.11.9
MongoDB ... irrelevant, this is client side

[seasoup]

Also filed with create-react-app

facebook/create-react-app#3050 (comment)

comment by gaearon on that site:
"Please file an issue with mongoose. The requirement to add a plugin to webpack configuration to consume a library is not great and puts a complexity tax on the ecosystem. I believe it is completely avoidable on the mongoose side if they prioritize fixing it.

As a temporary fix, you can always use mongoose as a <script> tag by putting its JS file into the public/ folder, adding a <script> to index.html, and then using it via window.mongoose."

[sobafuchs]

This seems like a weird bug. If you put a console.log above the offending line in browserDocument.js, NodeJSDocument.prototype is undefined, but that seems weird since if you look at what all document.js is doing, its defining a bunch of methods on the NodeJSDocument prototype, which gets imported in browserDocument.js and set as the prototype

on line 98:

/*!
 * Inherit from the NodeJS document
 */
console.log(NodeJSDocument.prototype); // undefined
Document.prototype = Object.create(NodeJSDocument.prototype);
Document.prototype.constructor = Document;

[seasoup]

Thanks for taking a look at this today. Since this is in the browser, there should be no nodeJSDocument, right?

[sobafuchs]

maybe its a bit of a misnomer but if you look at line 5 of lib/browserDocument in mongoose, it imports the regular document "class" and calls it NodeJSDocument just so it can use the prototype:

var NodeJSDocument = require('./document');

[sobafuchs]

So I've been doing some research and I think I'm onto something. I think something recently in the way mongoose is imported on the client has broken the way webpack resolves dependencies bc the native bson module is now getting imported in mongoose somehow.

I'll report back when I've confirmed, just using this more as a way to document my investigation

[vkarpov15]

@varunjayaraman yeah that's expected behavior AFAIK. We include bson to get ObjectIds without having to go through the driver, because importing the driver itself made browserify blow up.

[sobafuchs]

what's confusing to me is that it only fails with create-react-app

[vkarpov15]

Yeah I honestly have no idea and don't want to spend more time trying to support create-react-app. Its a very niche edge case for mongoose.

[darinboesch]

Same error here when including a second reference to a Mongoose schema. Any news on a fix?

browserDocument.js:99 Uncaught TypeError: Object prototype may only be an Object or null: undefined
at Function.create ()
at Object. (browserDocument.js:99)
at Object. (browserDocument.js:294)
at webpack_require (bootstrap 016093d5014cbaec899c:555)
at fn (bootstrap 016093d5014cbaec899c:86)
at Object. (document_provider.web.js:8)
at webpack_require (bootstrap 016093d5014cbaec899c:555)
at fn (bootstrap 016093d5014cbaec899c:86)
at Object. (embedded.js:7)
at webpack_require (bootstrap 016093d5014cbaec899c:555)

[vkarpov15]

Nope no progress.

[hlee47]

Please let us know for any updates...

[saiichihashimoto]

Happens for me without using create-react-app