CODEWITHSUNDEEP
vue.jsnpmnuxt.jsnpm-scripts
Simo Mafuxwana
Simo Mafuxwana

Reputation: 3772

How to use npm package dependency

I am learning to create npm packages by creating a session check function sessionFn that will popup a modal 1 minute before the session expires.

The function works as expected on the main app (a nuxtJS app) but when I make use it as an npm module I have to pass moment as an argument even though moment is listed as a dependency and is imported on the module.

I am missing something, why is my module not picking up moment? I want to use the module like sessionFn(this, to.path); instead of sessionFn(this, to.path, moment); moment is undefined when I don't pass it

Package files

package.json

{
  "name": "hello-stratech",
  "version": "1.0.17",
  "description": "Hello Stratech",
  "main": "index.js",
  "keywords": [
    "npm",
    "hello",
    "stratech"
  ],
  "author": "Simo Mafuxwana",
  "license": "ISC",
  "dependencies": {
    "moment": "^2.22.2"
  }
}

index.js (main js file)

import moment from "moment";

module.exports = {
  greeting(name) {
    alert("Hello.. " + name);
  },
  department(dev) {
    ...
  },
  sessionFn(context) {
    const exp = context.$store.state.session.exp;
    let userSystemTime = new Date();
        userSystemTime = moment.utc(userSystemTime)

    const diff = moment(userSystemTime).diff(moment(exp), 'minutes');
    if (diff = 1) {
      // open modal
    }
  }
}

Usage

This is how I use the package in the main app

import moment from 'moment';
import { sessionFn } from "hello-stratech";

export default {
  ...
  watch: {
    $route(to) {
      sessionFn(this, to.path, moment);
    }
  }
  ...
}

Upvotes: 0

Views: 210

Answers (2)

Aldarund
Aldarund

Reputation: 17621

You dont need to import and pass moment into your function since you are importing it in your function file. You are not even using the passed argument in your function. So you can just safely dont pass it. You are also not using second argument that u pass to.path, so u can omit it too.

As a suggestion you should install and use eslint, which will catch such things. You can setup a nuxt project with eslint using create nuxt app for example.

There is also a bug in esm 3.21-3.22 that prevent commonjs and es6 imports work together https://github.com/standard-things/esm/issues/773 . That should be fixed when a new esm will be released

Upvotes: 1

Patryk Szylin
Patryk Szylin

Reputation: 72

Try making moment as devDependancy through npm i moment --save-dev instead of dependency.

That way moment will only be needed when the package is development (means when you are developing the project) but not when it is used.

Hope it fixes your issue

for more depth knowledge

Upvotes: 0

Related Questions