Uploaded image for project: 'Node.js Driver'
  1. Node.js Driver
  2. NODE-1809

A Vue project using mongodb will not compile.

    • Type: Icon: Bug Bug
    • Resolution: Works as Designed
    • Priority: Icon: Major - P3 Major - P3
    • next
    • Affects Version/s: 3.1.10
    • Component/s: None

      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

      1. Check the vue version
        PS C:\Projects\Quasar> vue --version
        3.1.3
      2. 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
      1. 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
      1. 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. 
      1. 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. 
      2. 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>
      
      1. 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
      1. 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. 

       

            Assignee:
            daniel.aprahamian@mongodb.com Daniel Aprahamian (Inactive)
            Reporter:
            tdumitr@yahoo.com Tiberiu Dumitrescu
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved: