Failed with npm install on OS X about vue.draggable

[David-Desmaisons]

Perfect!! It is time to go to bed for me now. Tomorrow I will commit the change and publish the fix.

[David-Desmaisons]

Hi @Rachelin, could you try to use replace the vuedragablefor.js on your project by the master vuedragablefor.js of this repo. I made some changes recently that may correct this problem. If this work, I will publish a new version.

[David-Desmaisons]

@Rachelin, try code from commit 1178d87.

[Rachelin]

@David-Desmaisons I tried like you said that replaced the code, but i still can not build successfully.

[David-Desmaisons]

Hi @Rachelin , please try new npm package version (1.0.5), I made tests with Webpack and Browserify, and both worked. If the problems persist, please give me more details on your set-up and the error message. Thanks

[Rachelin]

Hi, @David-Desmaisons , thanks for your help. I tried the new npm package version at 1.0.5, still failed again. Here is my details on set-up my project.

1. install project by vue-cli

$ npm install -g vue-cli
$ vue init browserify my-project
$ cd my-project
$ npm install
$ npm run dev 

1. install new package(cd my project)
   npm install [email protected] --save
2. Use the package, copy this code to main.js

import Vue from 'vue'
import VueDragableFor from 'vuedragablefor'
Vue.use(VueDragableFor)

1. When I run the project it tell me got error in http-sever then I changed the package.json (line 8)
   "serve": "http-server -c 1 -a localhost -p 3003",
2. Do the script npm run build

Here is my error message:

Error: Cannot find module 'vuedragablefor' from '/Users/wuxiaolian/vue-project/src'
    at /Users/wuxiaolian/vue-project/node_modules/resolve/lib/async.js:46:17
    at process (/Users/wuxiaolian/vue-project/node_modules/resolve/lib/async.js:173:43)
    at ondir (/Users/wuxiaolian/vue-project/node_modules/resolve/lib/async.js:188:17)
    at load (/Users/wuxiaolian/vue-project/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/wuxiaolian/vue-project/node_modules/resolve/lib/async.js:92:31)
    at /Users/wuxiaolian/vue-project/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:82:15)

Here is my package.json

{
  "name": "vue-project",
  "description": "A Vue.js project",
  "author": "Rachelin <[email protected]>",
  "private": true,
  "scripts": {
    "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
    "serve": "http-server -c 1 -a localhost -p 3003",
    "dev": "npm-run-all --parallel watchify serve",
    "build": "cross-env NODE_ENV=production browserify -e src/main.js | uglifyjs -c warnings=false -m > dist/build.js",
    "lint": "eslint --ext .js,.vue src test/unit",
    "test": "karma start karma.conf.js"
  },
  "browserify": {
    "transform": [
      "vueify",
      "babelify"
    ]
  },
  "dependencies": {
    "vue": "^1.0.0",
    "vue-resource": "^0.9.3",
    "vue-router": "^0.7.13",
    "vuedragablefor": "^1.0.5"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-runtime": "^6.0.0",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "browserify-hmr": "^0.3.1",
    "cross-env": "^1.0.5",
    "eslint": "^1.10.3",
    "eslint-plugin-html": "^1.1.0",
    "http-server": "^0.9.0",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.15",
    "karma-browserify": "^4.4.2",
    "karma-jasmine": "^0.3.6",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-spec-reporter": "0.0.23",
    "npm-run-all": "^1.6.0",
    "phantomjs-prebuilt": "^2.1.3",
    "proxyquireify": "^3.0.1",
    "uglify-js": "^2.5.0",
    "vueify": "^8.5.2",
    "watchify": "^3.4.0"
  }
}

[David-Desmaisons]

@Rachelin

I was not abble to reproduce your issue. I follow the same steps and it worked fine:

Console:

$ npm install -g vue-cli
$ vue init browserify my-project
$ cd my-project
$ npm install
$ npm run dev 

Alteration on main.js:

Include of vuadragable for and build:

Did you try recrating your environment from scratch? If not, please try.

[Rachelin]

@David-Desmaisons

I changed the vuedragablefor package.json, like this:

(Line-83)
"files": [
    "vuedragablefor.js"
  ],

(Line-95)
 "main": "vuedragablefor.js",

Removed the "//src" and move the vuedragablefor.js to vuedragablefor folder.
So it can find now.

But when i use the package, it told me another issue:
vuedragablefor.js:42 Uncaught TypeError: Cannot set property '__directive' of null

[David-Desmaisons]

@Rachelin Which OS are you using? I think the correct value should be src/fvuedragablefor.js,

[Rachelin]

@David-Desmaisons
I using OS 10.10.5, and i got the value is src//vuedragablefor.js

[David-Desmaisons]

@Rachelin I am using a PC, this may explain the difference. Could you try src/vuedragablefor.js to see if it fixes the problem?

[Rachelin]

This is the original value

[David-Desmaisons]

Could you please try to manually change these values to: src/vuedragablefor.js? If this will solve the problem, I will update the package with the correct value.

[Rachelin]

Yes , you are right , it works now!!!

[Rachelin]

Thanks a lot , cheers

[David-Desmaisons]

Corrected in version 1.0.6