How to import date-fns module via Aurelia CLI

Help Requests
1

I have an Aurelia CLI project using TypeScript and I want to use date-fns npm package like below.

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

but I got error messages when I build code.

$ 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.

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

Thanks.

2

Can you try like this?

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

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.

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

4

Ho about the section A Very Stubborn Legacy Library in the same chapter?

1 Like
5

@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).

1 Like
6

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

1 Like
8

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

$ 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

9

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.

10

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.

1 Like
11

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.

12

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

13

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!

14

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

1 Like
15

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