Webpack Failed to compile (create-react-app)

[ksloan]

Redacted -- see https://mongoosejs.com/docs/browser.html

[vkarpov15]

@ksloan I wouldn't recommend using Mongoose 4.x on the client but Mongoose 5.x on the server if that's what you're planning on doing.

[arnaudriegert]

I'm not sure why this issue is closed (and redacted): the link you posted in your last edit doesn't quite answer the issue. On the contrary, it gives the impression that a partial version Mongoose can be used in the browser, which is true, but using this version doesn't solve the bug you encountered and that till seems valid to me.

I imagine I am not the only one in this case: I like the idea of having Mongoose schemas accessible in my React app so I can pre-validate the models on the client side before making a request to the server.
But when I try to bundle it using create-react-app's npm run build, I have the error you originally posted: Mongoose (or at least, lib/utils.js) couldn't be minified. It works fine if I downgrade to v4.13.14 but not on v5. It also works fine with v5 in the development build (unminified) using just npm start.

I'm not an expert in Webpack, Babel and the differences between ES5 and ES6 so I'm not sure if this applies, but in this comment @gaearon indicates that it is the library authors who should take care of the compilation to make sure that the libraries work in the environments they want to support. This seemed like a valid point to me.

Would it make sense to make it so that the v5's mongoose/browser could be minified in create-react-app's build step?

[vkarpov15]

@arnaudriegert OPs comment points to the legacy browser docs, and OP was the one who redacted it, so that was the reason for my response. Can you post what error you're seeing?

[arnaudriegert]

I have the exact same message as OP's original message before it was redacted (as can be seen when clicking on "edited" next to the date).

In order to reproduce, you just need to create-react-app (v1.1) and then import mongoose from 'mongoose/browser.js'; somewhere.

[ksloan]

Sorry I linked to wrong docs -- here is the updated docs that basically say "compile it yourself" https://mongoosejs.com/docs/browser.html

[vkarpov15]

Looking more closely at this, it looks like I can compile Mongoose 5.1.8, 5.2.18, and 5.3.3 with npm run build and npm start with just adding import mongoose from 'mongoose/browser'; to the output of create-react-app v1.1.0.

Can you please clarify what version of Mongoose you're using and double check that you're getting this error from just the normal output of create-react-app, without any changes to the webpack config?

[saiichihashimoto]

Using create-react-app, mongoose 5.3.4 builds in the browser whether importing mongoose or mongoose/browser.

Also, using create-react-app, mongoose 5.3.5 does NOT build in the browser whether importing mongoose or mongoose/browser. The error seems related to NodeBuffer, possibly because of #7102.

Unless ejecting from create-react-app, you don't have access to change the webpack & babel configs, so changing the webpack settings for buffer isn't really a solution.

[lineus]

@saiichihashimoto you can follow #7173 for the browser buffer issue. This issue is related to older versions of mongoose. The problem you are describing was introduced in 5.3.5.

@vkarpov15
With regard to the issue with react/Buffer pointed out by @saiichihashimoto , It's worth noting that npm run build passes without error on 5.3.{5,6}, but npm run start shows the problem in the browser: TypeError: NodeBuffer is undefined; can't access its "prototype" property.

[vkarpov15]

That's a good point, we'll look into this.

[saiichihashimoto]

I think there's a larger question of whether mongoose truly wants to support using it in the browser. "You need to compile the browser library yourself" is not going to support most use cases of using this in the browser. It should be compiled as part of the release along with a package.json browser field. That way, you're isolated from how users compile their code, you can control your tests, and you can be more assured that mongoose works in any browser context.

[vkarpov15]

@saiichihashimoto that's a good point. Moving to telling users to compile it themselves was not a great idea in hindsight. We really only wanted to move away from hosting a compiled version on cloudfront. Something to add for the future

[saiichihashimoto]

I find that, while there's a lot of code reuse, you need to consciously think about how you want users to consume your library in the browser. I think this is mostly there! Do you know how mongoose was compiled for the browser in the past? webpack? babel? I might put in a PR to have deployments include a compiled version and have tests validate that the browser build is valid.

[vkarpov15]

@saiichihashimoto we used plain old browserify: https://github.com/Automattic/mongoose/blob/4.x/Makefile#L64-L67 . Keep in mind this code was from 2014, so it predates the widespread adoption of babel and webpack.

My only concern is that people may have different concerns re: browser compatibility. Mongoose will never work on ES4, and if I recall correctly there's some issue that prevents us from supporting IE8. Running tests on sauce was pretty flakey in the past, so I'm wary of running real browser tests. Are there better options out there now?

[saiichihashimoto]

Oh, I wasn't thinking of running browser tests. We could use whatever testing framework purely to see if we could make a schema, make a document, and run validateSync using the build. So webpack/babel is mostly likely the best options here.

[vkarpov15]

Yeah exactly. I suppose we can just rely on babel to do the right thing :)