webpack error

[lzxb]

ERROR in ./~/vuedraggable/dist/vuedraggable.js
Module not found: Error: Cannot resolve module 'Sortable' in /Users/lzxb/Documents/zhima-admin-webapp/node_modules/vuedraggable/dist
 @ ./~/vuedraggable/dist/vuedraggable.js 202:4-204:6

[David-Desmaisons]

Hello @lzxb , could you provide more info? Which version of vue draggable, which OS?
It seems to me that you are trying to install an old version.
I just tested version 2.3.1 here, and it works fine with webpack.

[lzxb]

mac

{
  "name": "app-weixin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "node server",
    "dev:dist": "cross-env NODE_ENV=production gulp devDist",
    "dev:test": "gulp devTest"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.17.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.1",
    "babel-loader": "^6.2.5",
    "babel-plugin-syntax-jsx": "^6.13.0",
    "babel-plugin-transform-object-assign": "^6.8.0",
    "babel-plugin-transform-vue-jsx": "^3.1.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "cross-env": "^3.1.1",
    "css-loader": "^0.25.0",
    "del": "^2.2.2",
    "file-loader": "^0.9.0",
    "gulp": "^3.9.1",
    "gulp-sftp": "^0.1.5",
    "html-webpack-plugin": "^2.22.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue-loader": "^9.5.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  },
  "dependencies": {
    "flex.css": "^1.1.4",
    "is": "^3.1.0",
    "jquery": "^3.1.1",
    "vue": "^2.0.1",
    "vue-router": "^2.0.0",
    "vuex": "^2.0.0"
  }
}

[David-Desmaisons]

you should be install vue,draggable using npm: npm install vuedraggable --save-dev .
After instalation, your package file will look like:

"dependencies": { "vue": "^2.0.1", "vuedraggable": "^2.3.1" },

[lzxb]

ok

[David-Desmaisons]

Did it solve your problem?

[lzxb]

No, found a very strange bug

[lzxb]

I write an example for you to see, wait a minute.

[lzxb]

[David-Desmaisons]

1. You should as in the example export like this:

import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },

2. Could you show me the corresponding package.json?

3. Dis you modify vuedraggable. I see some comented lines in your p´rint screen.

[David-Desmaisons]

Did you check that as webpack configuration you have:
resolve: { fallback: [path.join(__dirname, '../node_modules')],

You should try using vue-cli template as a reference,

[lzxb]

Invalid configuration

[lzxb]

This can be

  if (typeof exports == "object") {
    var Sortable = require("sortablejs");
    module.exports = buildDraggable(Sortable);
  } else if (typeof define == "function" && define.amd) {
    define(['sortablejs'], function (Sortable) {
      return buildDraggable(Sortable);
    });
  } else if (window && window.Vue && window.Sortable) {
    var draggable = buildDraggable(window.Sortable);
    Vue.component('draggable', draggable);
  }

[David-Desmaisons]

I guess you have a problem in your environment/webpack configuration. Please use official vue-cli to set-up your webpack environment and install vuedraggbale after.

[lzxb]

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = require('./config/')
const IS_ENV = process.env.NODE_ENV == 'production'

var plugins = []
if (IS_ENV) { //生产环境
    plugins.push(new webpack.DefinePlugin({ //编译成生产版本
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    }))
    plugins.push(new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }))
}

plugins.push(
    new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
        filename: './index.html', //生成的html存放路径，相对于 path
        template: './src/template/index.html', //html模板路径
        hash: process.env.NODE_ENV != 'production'    //生产版本时，会打包成离线应用程序，不需要添加hash，否则会造成无法离线缓存的bug
    })
)


module.exports = {
    entry: ['./src/main.js'], //编译入口文件
    output: {
        publicPath: config.publicPath, //服务器的路径
        path: __dirname + config.publicPath, //编译到app目录
        filename: '[name].js' //编译后的文件名
    },
    module: {
        loaders: [
            {
                test: /\.js(x)*$/,
                exclude: /^node_modules$/,
                loader: 'babel'
            },
            {
                test: /\.vue$/,
                exclude: /^node_modules$/,
                loader: 'vue'
            },
            {
                test: /\.css/,
                exclude: /^node_modules$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.less/,
                exclude: /^node_modules$/,
                loader: `style-loader!css-loader!autoprefixer-loader?{
                    browsers: [
                        'ie >= 8',
                        'ie_mob >= 10',
                        'ff >= 26',
                        'chrome >= 30',
                        'safari >= 6',
                        'opera >= 23',
                        'ios >= 5',
                        'android >= 2.3',
                        'bb >= 10'
                    ]
                }!less-loader`
            },
            {
                test: /\.(png|jpg)$/,
                exclude: /^node_modules$/,
                loader: 'url?limit=2000&name=[name].[ext]' //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
            },
            {
                test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
                exclude: /^node_modules$/,
                loader: 'file-loader?name=[name].[ext]'
            }
        ]
    },
    plugins,
    resolve: {
        extensions: ['', '.js', '.vue', '.jsx'], //后缀名自动补全
        fallback: [path.join(__dirname, 'node_modules')],
        alias: {
            vue: 'vue/dist/vue.js',
            util: path.resolve('src/util/index.js'), //常用工具方法
            mixinTableList: path.resolve('src/util/mixinTableList.js'), //表格列表获取数据
            mixinTableListCheckbox: path.resolve('src/util/mixinTableListCheckbox.js'), //表格列表全选操作
            mixinTableListHandleIds: path.resolve('src/util/mixinTableListHandleIds.js'), //表格列表批量删除操作
            mixinTableListLayer: path.resolve('src/util/mixinTableListLayer.js'), //表格列表的弹层操作
        }
    },
}

[David-Desmaisons]

@lzxb , As I mentioned in my last comment, please use official vue-cli to set-up your webpack environment and install vuedraggbale after using npm install option:

vue init webpack my-project
cd my-project
npm install
npm install vuedraggable --save

If you have issue after this installation, I will investigate.
If this works, please try to adjust you environment then.

Everything indicates that this is a configuration issue , but unfortunatelly I do not have time to investigate more.

[lzxb]

I understand, but unfortunately I did not use the official vue-cli

[David-Desmaisons]

Some tips:

1. be sutre to install vue draggble using npm install vuedraggable --save
2. check that npm download sortablejs in the node module folder?
3. Depeneding on your environement you use
   resolve: {
   alias:{
   'sortablejs' : 'myweirdpáth'

[lzxb]

666, ok, solve

[MitchellBouwman]

For me it was:
import draggable from "@/vuedraggable" in the demo file, the @ is mapped to my resources folder, I don't know why this is in the demo. It just should be import draggable from 'vuedraggable'.