# How to import date-fns module via Aurelia CLI

**URL:** <https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816>\
**Category:** Help Requests\
**Created:** [February 22, 2018, 11:43am UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816 "2018-02-22T11:43:05Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![panchan9](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/panchan9/32/590_2.png) [@panchan9](https://discourse.aurelia.io/u/panchan9)\
**Post date:** [February 22, 2018, 11:43am UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816/1 "2018-02-22T11:43:05Z")

</div>

I have an Aurelia CLI project using TypeScript and I want to use [date-fns](https://date-fns.org/) npm package like below.

```auto
import { addHours, subDays } from 'date-fns';

```

but I got error messages when I build code.

```auto
$ au build
.
.
.
 ------- File not found or not accessible ------
| Location: /Users/pampers/dev/src/github.com/user/repo/add_days/index.js
| Requested by: /Users/pampers/dev/src/github.com/user/repo/src/feature/components/creation.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
 -----------------------------------------------
 ------- File not found or not accessible ------
| Location: /Users/pampers/dev/src/github.com/user/repo/add_hours/index.js
| Requested by: /Users/pampers/dev/src/github.com/user/repo/src/feature/components/creation.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
 -----------------------------------------------
 ------- File not found or not accessible ------
| Location: /Users/pampers/dev/src/github.com/user/repo/add_iso_years/index.js
| Requested by: /Users/pampers/dev/src/github.com/user/repo/src/feature/components/creation.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
 -----------------------------------------------
 ------- File not found or not accessible ------
| Location: /Users/pampers/dev/src/github.com/user/repo/add_milliseconds/index.js
| Requested by: /Users/pampers/dev/src/github.com/user/repo/src/feature/components/creation.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
 -----------------------------------------------
 ------- File not found or not accessible ------
| Location: /Users/pampers/dev/src/github.com/user/repo/add_minutes/index.js
| Requested by: /Users/pampers/dev/src/github.com/user/repo/src/feature/components/creation.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
 -----------------------------------------------
.
.
.
(more import errors)

```

Is there any workaround?  
My aurelia.json is here.

```auto
        "dependencies": [
          {
            "name": "date-fns",
            "path": "../node_modules/date-fns",
            "main": "index"
          },

```

Thanks.

---

<div class="post-metadata">

**Author:** ![ViktorDimitrievski](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/viktordimitrievski/32/134_2.png) [@ViktorDimitrievski](https://discourse.aurelia.io/u/ViktorDimitrievski)\
**Post date:** [February 22, 2018, 3:01pm UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816/2 "2018-02-22T15:01:39Z")

</div>

> [@panchan9](#):
>
> “dependencies”: [  
> {  
> “name”: “date-fns”,  
> “path”: “…/node\_modules/date-fns”,  
> “main”: “index”  
> }

Can you try like this?

```
"dependencies": [
          {
            "name": "date-fns",
            "path": "../node_modules/date-fns/dist",
            "main": "date_fns"
          }

```

---

<div class="post-metadata">

**Author:** ![panchan9](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/panchan9/32/590_2.png) [@panchan9](https://discourse.aurelia.io/u/panchan9)\
**Post date:** [February 23, 2018, 2:50am UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816/3 "2018-02-23T02:50:17Z")

</div>

Hi, @ViktorDimitrievski.  
Thank you for your prompt reply.  
I tried it, but date-fns package has no dist directory.  
The structure of directories is like below.

```auto
node_modules/date-fns/
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── index.js
├── package.json
├── add_days
│ ├── index.js
│ ├── index.js.flow
│ └── package.json
├── add_hours
│ ├── index.js
│ ├── index.js.flow
│ └── package.json
    .
    .
    .
├── last_day_of_year
│ ├── index.js
│ ├── index.js.flow
│ └── package.json
├── locale
│ ├── _lib
│ │ ├── build_formatting_tokens_reg_exp
│ │ └── package.json
│ ├── package.json
│ └── zh_tw
│ ├── build_distance_in_words_locale
│ ├── build_format_locale
│ ├── index.js
│ └── package.json
├── max
│ ├── index.js
│ ├── index.js.flow
│ └── package.json
├── sub_years
│ ├── index.js
│ ├── index.js.flow
│ └── package.json
└── typings.d.ts

259 directories, 539 files

```

I’ve looked over the following official docs, but I couldn’t find any solutions…  
[http://aurelia.io/docs/build-systems/aurelia-cli#adding-client-libraries-to-your-project](http://aurelia.io/docs/build-systems/aurelia-cli#adding-client-libraries-to-your-project)

---

<div class="post-metadata">

**Author:** ![adriatic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/adriatic/32/96_2.png) [@adriatic](https://discourse.aurelia.io/u/adriatic)\
**Post date:** [February 23, 2018, 4:06am UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816/4 "2018-02-23T04:06:52Z")

</div>

Ho about the section **`A Very Stubborn Legacy Library`** in the **[same chapter](http://aurelia.io/docs/build-systems/aurelia-cli#adding-client-libraries-to-your-project)**?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [February 23, 2018, 4:38am UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816/5 "2018-02-23T04:38:10Z")

</div>

@panchan9 the date-fns is currently not supported by cli’s default requirejs setup.  
I could not figure out how to config date-fns to work. I worked on cli tracing code before, so you can take the answer as (almost) negative. But @JeroenVinke might help.

Anyway there is a way out. If you use **cli + webpack** , it definitely works. (au new proj, choose 3.Custom -\> 3.Webpack).

---

<div class="post-metadata">

**Author:** ![ViktorDimitrievski](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/viktordimitrievski/32/134_2.png) [@ViktorDimitrievski](https://discourse.aurelia.io/u/ViktorDimitrievski)\
**Post date:** [February 23, 2018, 6:44am UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816/6 "2018-02-23T06:44:29Z")

</div>

Which version of date-fns you’re using?  
Because I see in the git repo of date-fns there is _dist_ folder.

---

<div class="post-metadata">

**Author:** ![panchan9](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/panchan9/32/590_2.png) [@panchan9](https://discourse.aurelia.io/u/panchan9)\
**Post date:** [February 23, 2018, 11:10am UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816/8 "2018-02-23T11:10:34Z")

</div>

Oh… That’s strange.  
The version of date-fns is 1.29.0.

```auto
$ npm list -l date-fns

└── date-fns@1.29.0
    Modern JavaScript date utility library
    git+https://github.com/date-fns/date-fns.git
    https://github.com/date-fns/date-fns#readme

```

Would you mind installing the package locally with the following command?  
`npm i date-fns`

---

<div class="post-metadata">

**Author:** ![panchan9](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/panchan9/32/590_2.png) [@panchan9](https://discourse.aurelia.io/u/panchan9)\
**Post date:** [February 23, 2018, 11:36am UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816/9 "2018-02-23T11:36:09Z")

</div>

Thank you for your valueable information!  
I’m using requirejs as module loader, so… I hope that CLI supports libraries like date-fns.  
One more thing. Could you tell me if a pattern of **cli + systemjs** works well?  
Thanks.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [February 23, 2018, 12:19pm UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816/10 "2018-02-23T12:19:20Z")

</div>

Unfortunately, cli only uses systemjs’s AMD support. It means cli only uses systemjs as a requirejs implementation, it still uses exactly same tracing code to bundle all the js files.

I just ran through a setup with cli + systemjs + date-fns, I can confirm the behaviour is same as cli + requirejs.

This left you no choice but to use cli + webpack, unless you consider to switch to `momentjs` which is more popular than `date-fns`.

I am using `momentjs` and I have no complain. Anyway, I cannot judge `date-fns` since I have zero exp on it.

I have sent some details on gitter to cli maintainer @JeroenVinke for review. But he is a busy man, might need some days to respond.

---

<div class="post-metadata">

**Author:** ![ViktorDimitrievski](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/viktordimitrievski/32/134_2.png) [@ViktorDimitrievski](https://discourse.aurelia.io/u/ViktorDimitrievski)\
**Post date:** [February 23, 2018, 12:24pm UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816/11 "2018-02-23T12:24:41Z")

</div>

Oh relly???  
I don’t know that we all need to know everything, and also that we can’t make mistakes. With your reaction, you just discourage people to write posts on discourse.

Sorry for off topic.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [February 23, 2018, 12:25pm UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816/12 "2018-02-23T12:25:58Z")

</div>

Sorry to let you feel like that. I apologize again, I should contact you privately.  
Thx discourse for function to delete.

---

<div class="post-metadata">

**Author:** ![panchan9](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/panchan9/32/590_2.png) [@panchan9](https://discourse.aurelia.io/u/panchan9)\
**Post date:** [February 25, 2018, 9:16am UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816/13 "2018-02-25T09:16:45Z")

</div>

Thanks for a such detailed explanation.  
Okay, then I’ll use `momentjs`, because I just wanted to try using `date-fns` with Aurelia.  
And thank you very much for sharing this issue with @JeroenVinke!

---

<div class="post-metadata">

**Author:** ![mttmccb](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mttmccb/32/38_2.png) [@mttmccb](https://discourse.aurelia.io/u/mttmccb)\
**Post date:** [February 25, 2018, 9:26am UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816/14 "2018-02-25T09:26:19Z")

</div>

Me too, I tried and failed, but at least I know there was a good reason.

My new project uses webpack so it should work there

---

<div class="post-metadata">

**Author:** ![RomkeVdMeulen](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/romkevdmeulen/32/28_2.png) [@RomkeVdMeulen](https://discourse.aurelia.io/u/RomkeVdMeulen)\
**Post date:** [March 1, 2018, 10:04am UTC](https://discourse.aurelia.io/t/how-to-import-date-fns-module-via-aurelia-cli/816/15 "2018-03-01T10:04:09Z")

</div>

I’ve just gotten it to work in a non-CLI project by installing and bundling it with JSPM.