date-fns 安装 vue-airbnb-style-datepicker 组件时出错

Question

I try to add vue-airbnb-style-datepicker into my vue/cli 4/vuex / vue-resource project and installing it found that it depends on https://github.com/date-fns/date-fns I installed it but running server I got errors when I see a lot of

Repository not found

and

Please make sure you have the correct access rights

errors :

$ yarn run serve
yarn run v1.21.1
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 20 errors                                                                                                                                                                     7:50:45 AM

These dependencies were not found:

* date-fns/add_days in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/add_months in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/add_weeks in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/end_of_week in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/get_days_in_month in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/get_month in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/get_year in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/is_after in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/is_before in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/is_same_day in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/is_same_month in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/is_valid in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/last_day_of_month in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/set_month in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/set_year in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/start_of_month in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/start_of_week in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/sub_days in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/sub_months in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js
* date-fns/sub_weeks in ./node_modules/vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.es.js

To install them, you can run: npm install --save date-fns/add_days date-fns/add_months date-fns/add_weeks date-fns/end_of_week date-fns/get_days_in_month date-fns/get_month date-fns/get_year date-fns/is_after date-fns/is_before date-fns/is_same_day date-fns/is_same_month date-fns/is_valid date-fns/last_day_of_month date-fns/set_month date-fns/set_year date-fns/start_of_month date-fns/start_of_week date-fns/sub_days date-fns/sub_months date-fns/sub_weeks
^[c^C
serge@athoe:/mnt/_work_sdb8/wwwroot/lar/VApps/ads$ npm install --save date-fns/add_days date-fns/add_months date-fns/add_weeks date-fns/end_of_week date-fns/get_days_in_month date-fns/get_month date-fns/get_year date-fns/is_after date-fns/is_before date-fns/is_same_day date-fns/is_same_month date-fns/is_valid date-fns/last_day_of_month date-fns/set_month date-fns/set_year date-fns/start_of_month date-fns/start_of_week date-fns/sub_days date-fns/sub_months date-fns/sub_weeks
npm ERR! Error while executing:
npm ERR! /usr/bin/git ls-remote -h -t ssh://git@github.com/date-fns/get_year.git
npm ERR! 
npm ERR! ERROR: Repository not found.
npm ERR! fatal: Could not read from remote repository.
npm ERR! 
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR! 
npm ERR! exited with error code: 128

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/serge/.npm/_logs/2020-01-27T05_51_20_917Z-debug.log
serge@athoe:/mnt/_work_sdb8/wwwroot/lar/VApps/ads$ cat /home/serge/.npm/_logs/2020-01-27T05_51_20_917Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node',
1 verbose cli   '/usr/bin/npm',
1 verbose cli   'install',
1 verbose cli   '--save',
1 verbose cli   'date-fns/add_days',
1 verbose cli   'date-fns/add_months',
1 verbose cli   'date-fns/add_weeks',
1 verbose cli   'date-fns/end_of_week',
1 verbose cli   'date-fns/get_days_in_month',
1 verbose cli   'date-fns/get_month',
1 verbose cli   'date-fns/get_year',
1 verbose cli   'date-fns/is_after',
1 verbose cli   'date-fns/is_before',
1 verbose cli   'date-fns/is_same_day',
1 verbose cli   'date-fns/is_same_month',
1 verbose cli   'date-fns/is_valid',
1 verbose cli   'date-fns/last_day_of_month',
1 verbose cli   'date-fns/set_month',
1 verbose cli   'date-fns/set_year',
1 verbose cli   'date-fns/start_of_month',
1 verbose cli   'date-fns/start_of_week',
1 verbose cli   'date-fns/sub_days',
1 verbose cli   'date-fns/sub_months',
1 verbose cli   'date-fns/sub_weeks' ]
2 info using npm@6.13.4
3 info using node@v11.15.0
4 verbose npm-session 8ddd109a08c7db36
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 silly fetchPackageMetaData error for github:date-fns/get_year Error while executing:
7 silly fetchPackageMetaData /usr/bin/git ls-remote -h -t ssh://git@github.com/date-fns/get_year.git
7 silly fetchPackageMetaData
7 silly fetchPackageMetaData ERROR: Repository not found.
7 silly fetchPackageMetaData fatal: Could not read from remote repository.
7 silly fetchPackageMetaData
7 silly fetchPackageMetaData Please make sure you have the correct access rights
7 silly fetchPackageMetaData and the repository exists.
7 silly fetchPackageMetaData
7 silly fetchPackageMetaData exited with error code: 128
8 silly fetchPackageMetaData error for github:date-fns/add_days Error while executing:
8 silly fetchPackageMetaData /usr/bin/git ls-remote -h -t ssh://git@github.com/date-fns/add_days.git
8 silly fetchPackageMetaData
8 silly fetchPackageMetaData ERROR: Repository not found.
8 silly fetchPackageMetaData fatal: Could not read from remote repository.
8 silly fetchPackageMetaData
8 silly fetchPackageMetaData Please make sure you have the correct access rights
8 silly fetchPackageMetaData and the repository exists.
8 silly fetchPackageMetaData
8 silly fetchPackageMetaData exited with error code: 128
9 silly fetchPackageMetaData error for github:date-fns/get_month Error while executing:
9 silly fetchPackageMetaData /usr/bin/git ls-remote -h -t ssh://git@github.com/date-fns/get_month.git
9 silly fetchPackageMetaData
9 silly fetchPackageMetaData ERROR: Repository not found.
9 silly fetchPackageMetaData fatal: Could not read from remote repository.
9 silly fetchPackageMetaData
9 silly fetchPackageMetaData Please make sure you have the correct access rights
9 silly fetchPackageMetaData and the repository exists.
9 silly fetchPackageMetaData
9 silly fetchPackageMetaData exited with error code: 128
10 silly fetchPackageMetaData error for github:date-fns/end_of_week Error while executing:
10 silly fetchPackageMetaData /usr/bin/git ls-remote -h -t ssh://git@github.com/date-fns/end_of_week.git
10 silly fetchPackageMetaData
10 silly fetchPackageMetaData ERROR: Repository not found.
10 silly fetchPackageMetaData fatal: Could not read from remote repository.
...
26 silly fetchPackageMetaData
26 silly fetchPackageMetaData Please make sure you have the correct access rights
26 silly fetchPackageMetaData and the repository exists.
26 silly fetchPackageMetaData
26 silly fetchPackageMetaData exited with error code: 128
27 timing stage:rollbackFailedOptional Completed in 2ms
28 timing stage:runTopLevelLifecycles Completed in 6370ms
29 verbose stack Error: exited with error code: 128
29 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/pacote/lib/util/finished.js:12:19)
29 verbose stack     at ChildProcess.emit (events.js:193:13)
29 verbose stack     at maybeClose (internal/child_process.js:999:16)
29 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:266:5)
30 verbose cwd /mnt/_work_sdb8/wwwroot/lar/VApps/ads
31 verbose Linux 4.15.0-74-generic
32 verbose argv "/usr/bin/node" "/usr/bin/npm" "install" "--save" "date-fns/add_days" "date-fns/add_months" "date-fns/add_weeks" "date-fns/end_of_week" "date-fns/get_days_in_month" "date-fns/get_month" "date-fns/get_year" "date-fns/is_after" "date-fns/is_before" "date-fns/is_same_day" "date-fns/is_same_month" "date-fns/is_valid" "date-fns/last_day_of_month" "date-fns/set_month" "date-fns/set_year" "date-fns/start_of_month" "date-fns/start_of_week" "date-fns/sub_days" "date-fns/sub_months" "date-fns/sub_weeks"
33 verbose node v11.15.0
34 verbose npm  v6.13.4
35 error Error while executing:
35 error /usr/bin/git ls-remote -h -t ssh://git@github.com/date-fns/get_year.git
35 error
35 error ERROR: Repository not found.
35 error fatal: Could not read from remote repository.
35 error
35 error Please make sure you have the correct access rights
35 error and the repository exists.
35 error
35 error exited with error code: 128
36 verbose exit [ 1, true ]

My component have :

<script>

    import Vue from 'vue'
    // import moment from 'moment'

    // import {bus} from '@/main'
    import appMixin from '@/appMixin';


    import { compareAsc, format } from 'date-fns'

    // format(new Date(2014, 1, 11), 'yyyy-MM-dd')
    //=> '2014-02-11'

    const dates = [
        new Date(1995, 6, 2),
        new Date(1987, 1, 11),
        new Date(1989, 6, 10)
    ]
    dates.sort(compareAsc)
    //=> [
    //   Wed Feb 11 1987 00:00:00,
    //   Mon Jul 10 1989 00:00:00,
    //   Sun Jul 02 1995 00:00:00
    // ]

    // import component and stylesheet
    import AirbnbStyleDatepicker from 'vue-airbnb-style-datepicker'
    import 'vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.min.css'

    // import format from 'date-fns/format'
    // see docs for available options
    const datepickerOptions = {}

    // make sure we can use it in our components
    Vue.use(AirbnbStyleDatepicker, datepickerOptions)

    export default {
        data() {
            return {
                apiUrl: process.env.VUE_APP_API_URL,
                dateFormat: 'D MMM',
                dateOne: '',
                dateTwo: ''
            }
        }, // data() {

        name: 'testPage',
        mixins: [appMixin],

        components: {
        },

and in package.json :

{
  "name": "ads",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bootstrap-vue": "^2.1.0",
    "core-js": "^3.4.4",
    "date-fns": "^2.9.0",
    "font-awesome": "^4.7.0",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.27",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "store": "^2.0.12",
    "v-money": "^0.8.1",
    "vee-validate": "^3.2.1",
    "vue": "^2.6.10",
    "vue-airbnb-style-datepicker": "^2.7.1",
    "vue-js-modal": "^1.3.31",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.1.3",
    "vue-select": "^3.4.0",
    "vue-toasted": "^1.1.27",
    "vue-wysiwyg": "^1.7.2",
    "vue2-datepicker": "^3.3.0",
    "vue2-filters": "^0.9.1",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "sass": "^1.24.2",
    "vue-template-compiler": "^2.6.10"
  }
}

Why error and how to fix it ?

Answer 1

I was having the same problem. The reason we are having this problem is date-fns was upgraded to v2 and it broke as it's used in airbnb date picker

Instead install the stable version of date-fns

npm i date-fns@1.29.0

Here is the link for further clarification https://github.com/MikaelEdebro/vue-airbnb-style-datepicker/issues/57