How to use npm package dependency

Question

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);
    }
  }
  ...
}

Aldarund · Accepted Answer · 2019-04-29T10:34:33.860

1

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

edited Apr 29 '19 at 10:34

answered Apr 23 '19 at 18:25

Aldarund

17,312
5
73
104

`to,path` is used. The part of the code where it is used is irrelevant to the question hence it is not in the code snippet – Simo Mafuxwana Apr 24 '19 at 09:54
*You dont need to import and pass moment into your function since you are importing it in your function file* - Like I said, when I use `sessionFn(this, to.path)` moment is undefined, I have to pass it `sessionFn(this, to.path, moment);` when calling the function for moment to be picked up – Simo Mafuxwana Apr 24 '19 at 09:59
@SimoD'loMafuxwana you are mixing cjs and es6 imports, there is bug in esm that break such usage, I guess it's your case. Change module.exports to es6 and try – Aldarund Apr 24 '19 at 10:34
It was that. I changed the import to `const moment = require("moment");` and it worked. Thanks – Simo Mafuxwana Apr 28 '19 at 18:35
@SimoD'loMafuxwana i have updated answer with reference to that esm bug :) – Aldarund Apr 29 '19 at 10:34

score 0 · Answer 2 · edited Apr 23 '19 at 12:59

0

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

edited Apr 23 '19 at 12:59

Ashad Nasim

2,511
21
37

answered Apr 23 '19 at 09:39

Patryk Szylin

72
7

How to use npm package dependency

2 Answers2