-
Type: Bug
-
Resolution: Works as Designed
-
Priority: Major - P3
-
Affects Version/s: 3.1.10
-
Component/s: None
-
Empty show more show less
A Vue project using mongodb will not compile. The error reported is
ERROR Failed to compile with 3 errors 2:31:23 PM
These dependencies were not found:
- dns in ./node_modules/mongodb-core/lib/uri_parser.js, ./node_modules/mongodb/lib/url_parser.js
- module in ./node_modules/require_optional/node_modules/resolve-from/index.js
To install them, you can run: npm install --save dns module
Following the instruction (running npm to install the 'dns' and 'module' module) will result in additional errors.
Steps to reproduce
- Check the vue version
PS C:\Projects\Quasar> vue --version
3.1.3 - Create the vue project
PS C:\Projects\Quasar> vue create project Vue CLI v3.1.3 ┌───────────────────────────┐ │ Update available: 3.2.1 │ └───────────────────────────┘ > Please pick a preset: Manually select features > Check the features needed for your project: Babel, PWA, Router, Linter > Use history mode for router? (Requires proper server setup for index fallback in production) Yes > Pick a linter / formatter config: Airbnb > Pick additional lint features: Lint on save > Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files > Save this as a preset for future projects? No Vue CLI v3.1.3 Creating project in C:\Users\Tibi\Projects\Quasar\project-manager. Initializing git repository... Installing CLI plugins. This might take a while... > yorkie@2.0.0 install C:\Users\Tibi\Projects\Quasar\project-manager\node_modules\yorkie > node bin/install.js setting up Git hooks done added 1146 packages from 755 contributors and audited 15117 packages in 40.396s found 0 vulnerabilities Invoking generators... Installing additional dependencies... added 63 packages from 38 contributors, updated 2 packages, moved 5 packages and audited 16138 packages in 16.038s found 0 vulnerabilities Running completion hooks... Generating README.md... Successfully created project project-manager. Get started with the following commands: $ cd project-manager $ npm run serve
- Add mongodb
PS C:\Projects\Quasar> cd .\project\ PS C:\Projects\Quasar\project> npm install mongodb --save npm WARN rollback Rolling back node-pre-gyp@0.10.0 failed (this is probably harmless): EPERM: operation not permitted, rmdir 'C:\Projects\Quasar\project\node_modules\fsevents\node_modules' npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + mongodb@3.1.10 added 8 packages from 6 contributors and audited 16149 packages in 12.86s found 0 vulnerabilities
- Start the development server
PS C:\Projects\Quasar\project> npm run serve > project@0.1.0 serve C:\Projects\Quasar\project > vue-cli-service serve INFO Starting development server... 98% after emitting CopyPlugin DONE Compiled successfully in 5562ms 2:24:31 PM App running at: - Local: http://localhost:8080/ - Network: http://10.0.75.1:8080/ Note that the development build is not optimized. To create a production build, run npm run build.
- At this point the vue application is running without any problems. The mongodb is added as a dependency, but no code is actually using it.
- With the development server running, modify Home.vue to add code to connect to a database on Atlas.
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue'; export default { name: 'home', components: { HelloWorld, }, data() { return { db: null, }; }, created() { const MongoClient = require('mongodb').MongoClient; const url = 'mongodb+srv://user:password@dev-n2mbt.azure.mongodb.net/database?retryWrites=true'; const _this = this; return new Promise(function(resolve, reject) { if (_this.db) { resolve(); } else { console.log('calling the connect method'); var __this = _this; MongoClient.connect(url) .then( function(database) { __this.db = database; resolve(); }, function(err) { console.log("Error connecting: " + err.message); reject(err.message); } ) } }) }, }; </script>
- Save the modified Home.vue and check the result of the compilation that is automatically performed. It will report 3 errors.
WAIT Compiling... 2:31:21 PM 94% after seal ERROR Failed to compile with 3 errors 2:31:23 PM These dependencies were not found: * dns in ./node_modules/mongodb-core/lib/uri_parser.js, ./node_modules/mongodb/lib/url_parser.js * module in ./node_modules/require_optional/node_modules/resolve-from/index.js To install them, you can run: npm install --save dns module
- Running the 'npm install --save dns module' command will result in the 'dns' and 'module' modules being installed, with 72 'vulnerabilities' (read errors). The result is to long to be included here.