16

I'm new to Reactjs, Nodejs and MongoDB. I'm currently trying to change Mediums snowflake tool to store users scores in a database. I have installed yarn, mongodb and mongodb-core through npm. It is a single page web application which is what I think is causing me trouble. I add 

var MongoClient = require('mongodb');

To SnowflakeApp.js and encounter the following error:

Module not found: Error: Can't resolve 'dns' in '/home/mlAHO174/snowflake/node_modules/mongodb-core/lib'

I've tried googling this error and have discovered it could be a range of things. I'm not sure if it is because React is front end and I'm trying to alter back end or because mongoDB is installed incorrectly. I'm new to this so would be grateful for help!

Improve this question
1
  • I have the same issue did you find a solution? Commented Oct 8, 2019 at 16:19

7 Answers 7

Reset to default
50

DNS is a core module of Node.JS. Telling people they need to install DNS via NPM will end up with them having a completely different module that does something else.

https://nodejs.org/api/dns.html vs https://www.npmjs.com/package/dns

This error most likely means you are trying to do something from the client-side that needs to be done on the server-side. If MongoDB module can't find the DNS component, it's running on the client-side.

MongoDB has to run on the server. In order to access data from React dynamically you'll need to set up an API using something like Express or Apollo.

Update: A great way to do this is with Azure Functions (TypeScript) or AWS (Lambda) functions

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

OMG I'm a senior developer and I did the same stupid thing. I thought you were nutz for a second. lol
18

For anyone who encounters this Error while importing the clientPromise (like in the with-mongodb template):

Make sure you're in the /pages/ directory!

It won't work in other directories like /components.

(and you should take a break or get some coffee...)

Improve this answer

2 Comments

Thank you so much for this callout. After moving my code to the pages directory, it worked flawlessly.
and I want to scream: "WHHHYYYY????" haha. so basically you have to repeat your logic importing your clientPromise, getting your collection...everytime you use getstaticProps ??
8

The problem is that you are trying to connect to the database from the front end. If this were possible that would open up a whole world of security issues. You need to set up your database connections on the backend and then have the front end make requests to the backend to handle the database.

Improve this answer

1 Comment

It's possible (and common) to connect to a DB from client-side code. Example - Firebase. Is it a good practice - mostly no.
3

I solved this by installing and using 'bson' instead of 'mongodb' for the client part of the code. 'bson' has a tiny bit of what 'mongodb' has and it might have what you are looking for. 'bson' is built for the browser.

In my case I needed the "ObjectId" in the browser and pulling it in from 'bson' did the trick as I didn't want to reference 'mongodb' because of the error described in the OP.

The other answers are also correct depending on why you're getting this error.

Improve this answer

Comments

1

I think - mongo package is meant to be run on servers only, not in the browser.

It does not work inside Next.js page components, but does work inside getStaticProps, getServerSideProps, getStaticPaths etc - because they run on the server, not the client.

Alternative - Firebase Realtime database, you can access it in client-side code too via the REST API. Example - a website (say a React app) that is hosted on GitHub pages or some other static server, but doesn't have a web app server (aka backend).

Improve this answer

Comments

0

For anyone that end up here from Google, my solution to this problem was to update the MongoDB package. By default, the NodeJS driver for MongoDB is at version 4.8, but the updated version as of writing those lines is 5.5 and is the recommended version in the official docs.

Improve this answer

Comments

-4

welcome to stack overflow.

You need to understand and learn few basics of web-applications. There's frontend, backend and a layer between them and a layer between backend and database. Frontend includes react.js, angular.js or anything else that is on browser. Backend is used to take request from frontend, providing API's to frontend and ask for data from other API's or database. Database includes sql, no-sql.

The error you are facing if of a NPM module mongodb-core.js. Either it's not installed properly, or installed using wrong version of module which is not comparable with your node version, or wrong version of NPM, or module using another NPM module which is not installed.

The issue in your case is mongodb-core uses a module dns which is not been installed. Try to install dns with npm i dns. or remove and install mongodb-core again.

Improve this answer

4 Comments

Thank you for your help. The issue was that I was trying to use it from the front end and the browser isn't aware of the DNS module. I added a back end which solved the issue!
I am using Next.js and I use an import to connect to MongoDB in my server-side-only getServerSideProps, but the imported file contains import { MongoClient } from 'mongodb'; which messes it all up. I'm wondering how I can make that import conditional to only be done server-side...
Update to myself: Next.js' getServerSideProps only works in pages, not in components outside of that directory. I knew that. I should not work past midnight.
Dns module as stated above is a core NodeJS module. Do not advise people installing random stuff

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.