Does not work with vue 1.0.0-migration

[TheWaWaR]

I have tried three approachs below, but no one works:

• Context: I use npm + webpack

  Error stacks

• import {Aside} from 'vue-strap'

Uncaught Error: Cannot find module "vue-strap"

./~/vue-strap/src/main.js
Module parse failed: /Users/xxxxxxx/frontend/node_modules/vue-strap/src/main.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| export alert from './Alert.vue'
| export carousel from './Carousel.vue'
| export slider from './Slider.vue'
 @ ./~/babel-loader?optional[]=runtime&loose=all&nonStandard=false!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/AsideForm.vue 5:16-36

• import {Aside} from 'vue-strap/src/aside'

Uncaught Error: Cannot find module "vue-strap/src/aside"

./~/babel-loader?optional[]=runtime&loose=all&nonStandard=false!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/AsideForm.vue
Module not found: Error: Cannot resolve module 'vue-strap/src/aside' in /Users/xxxxx/frontend/src/components
resolve module vue-strap/src/aside in /Users/xxxxx/frontend/src/components
  looking for modules in /Users/xxxxx/frontend/node_modules
    resolve 'file' or 'directory' src/aside in /Users/xxxxx/frontend/node_modules/vue-strap
      resolve file
        /Users/xxxxx/frontend/node_modules/vue-strap/src/aside doesn't exist
        /Users/xxxxx/frontend/node_modules/vue-strap/src/aside.webpack.js doesn't exist
        /Users/xxxxx/frontend/node_modules/vue-strap/src/aside.web.js doesn't exist
        /Users/xxxxx/frontend/node_modules/vue-strap/src/aside.js doesn't exist
        /Users/xxxxx/frontend/node_modules/vue-strap/src/aside.json doesn't exist
      resolve directory
        /Users/xxxxx/frontend/node_modules/vue-strap/src/aside doesn't exist (directory default file)
        /Users/xxxxx/frontend/node_modules/vue-strap/src/aside/package.json doesn't exist (directory description file)
[/Users/xxxxx/frontend/node_modules/vue-strap/src/aside]
[/Users/xxxxx/frontend/node_modules/vue-strap/src/aside.webpack.js]
[/Users/xxxxx/frontend/node_modules/vue-strap/src/aside.web.js]
[/Users/xxxxx/frontend/node_modules/vue-strap/src/aside.js]
[/Users/xxxxx/frontend/node_modules/vue-strap/src/aside.json]
 @ ./~/babel-loader?optional[]=runtime&loose=all&nonStandard=false!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/AsideForm.vue 6:24-54

• import Aside from 'vue-strap/src/Aside.vue'

Uncaught Error: Cannot find module "./utils/EventListener.js"

./~/vue-strap/src/utils/getScrollBarWidth.js
Module parse failed: /Users/xxxxx/frontend/node_modules/vue-strap/src/utils/getScrollBarWidth.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| export default ()=> {
|   let inner = document.createElement('p')
|   inner.style.width = '100%'
 @ ./~/babel-loader?optional[]=runtime&loose=all&nonStandard=false!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-strap/src/Aside.vue 11:32-71

./~/vue-strap/src/utils/EventListener.js
Module parse failed: /Users/xxxxx/frontend/node_modules/vue-strap/src/utils/EventListener.js Line 29: Unexpected token
You may need an appropriate loader to handle this file type.
| }
| 
| export default EventListener
| 
 @ ./~/babel-loader?optional[]=runtime&loose=all&nonStandard=false!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-strap/src/Aside.vue 7:28-63

[yuche]

Try:

var alert = require('vue-strap/src/alert');

See #16

[TheWaWaR]

Still does not work =.=

var alert = require('vue-strap/src/alert');

Uncaught Error: Cannot find module "vue-strap/src/alert"

./~/babel-loader?optional[]=runtime&loose=all&nonStandard=false!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/AsideForm.vue
Module not found: Error: Cannot resolve module 'vue-strap/src/alert' in /Users/xxxxx/frontend/src/components
resolve module vue-strap/src/alert in /Users/xxxxx/frontend/src/components
  looking for modules in /Users/xxxxx/frontend/node_modules
    resolve 'file' or 'directory' src/alert in /Users/xxxxx/frontend/node_modules/vue-strap
      resolve directory
        /Users/xxxxx/frontend/node_modules/vue-strap/src/alert doesn't exist (directory default file)
        /Users/xxxxx/frontend/node_modules/vue-strap/src/alert/package.json doesn't exist (directory description file)
      resolve file
        /Users/xxxxx/frontend/node_modules/vue-strap/src/alert doesn't exist
        /Users/xxxxx/frontend/node_modules/vue-strap/src/alert.webpack.js doesn't exist
        /Users/xxxxx/frontend/node_modules/vue-strap/src/alert.web.js doesn't exist
        /Users/xxxxx/frontend/node_modules/vue-strap/src/alert.js doesn't exist
        /Users/xxxxx/frontend/node_modules/vue-strap/src/alert.json doesn't exist
[/Users/xxxxx/frontend/node_modules/vue-strap/src/alert]
[/Users/xxxxx/frontend/node_modules/vue-strap/src/alert.webpack.js]
[/Users/xxxxx/frontend/node_modules/vue-strap/src/alert.web.js]
[/Users/xxxxx/frontend/node_modules/vue-strap/src/alert.js]
[/Users/xxxxx/frontend/node_modules/vue-strap/src/alert.json]
 @ ./~/babel-loader?optional[]=runtime&loose=all&nonStandard=false!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/AsideForm.vue 4:12-42

[yuche]

https://github.com/yuche/vue-strap/issues/16#issuecomment-149401358

[TheWaWaR]

I tested this config(webpack.config.js):

...
    module: {
        loaders: [{
            test: /\.css$/,
            loader: 'style!css'
        }, {
            test: /\.js$/,
            loader: "babel",
            query: {
                optional: ['runtime'],
                stage: 0
            }
        }, {
            test: /\.vue$/,
            loader: vue.withLoaders({
                // apply babel transform to all javascript
                // inside *.vue files.
                js: 'babel-loader?optional[]=runtime&stage=0'
            })
        }]
    }
...

Then npm run dev broken:

Error: vue.withLoaders has been deprecated in vue-loader 6.0. Add a "vue" section to the webpack config instead.
    at Function.module.exports.withLoaders (/Users/xxxxx/frontend/node_modules/vue-loader/lib/loader.js:178:9)
    at Object.<anonymous> (/Users/xxxxx/frontend/webpack.config.js:25:21)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at module.exports (/Users/xxxxx/frontend/node_modules/webpack/bin/convert-argv.js:80:13)
    at Object.<anonymous> (/Users/xxxxx/frontend/node_modules/webpack-dev-server/bin/webpack-dev-server.js:55:48)

[yuche]

Can you show me your webpack.config.js and package.json?

[yuche]

I think you are using vue-loader 6.0 which has new configuration API.

[TheWaWaR]

package.json

{
  "name": "xxx",
  "version": "0.1.0",
  "description": "xxx frontend part",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --quiet",
    "build": "NODE_ENV=production webpack --progress --hide-modules"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "xxx",
  "homepage": "",
  "devDependencies": {
    "babel": "^6.0.15",
    "babel-core": "^5.8.25",
    "babel-loader": "^5.3.2",
    "babel-runtime": "^5.8.25",
    "css-loader": "^0.21.0",
    "style-loader": "^0.13.0",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^6.0.0",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.0"
  },
  "dependencies": {
    "es6-promise": "^3.0.2",
    "jquery": "^2.1.0",
    "bootstrap": "^3.3.5",
    "metismenu": "^1.1.3",
    "font-awesome": "^4.2.0",
    "moment": "^2.9.0",
    "moment-timezone": "^0.4.0",
    "eonasdan-bootstrap-datetimepicker": "^4.15.35",
    "vue": "1.0.0-migration",
    "vue-router": "^0.7.5",
    "vue-resource": "^0.1.16",
    "vue-validator": "^1.4.4",
    "vue-strap": "^0.1.2",
    "vue-i18n-plugin": "^0.1.3",
    "vue-datetime-picker": "^0.1.1"
  }
}

webpack.config.js

var vue = require('vue-loader')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: './static',
    publicPath: '/static/',
    filename: 'app-build.js'
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        // excluding some local linked packages.
        // for normal use cases only node_modules is needed.
        exclude: /node_modules|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
        loader: 'babel?optional[]=runtime&loose=all'
      }
    ]
  }
}

if (process.env.NODE_ENV === 'production') {
  module.exports.plugins = [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin()
  ]
} else {
  module.exports.devtool = '#source-map'
}

I just copy them from https://github.com/vuejs/vue-hackernews

[yuche]

  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        // excluding some local linked packages.
        // for normal use cases only node_modules is needed.
        exclude: /node_modules|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
        loader: 'babel'
      }
    ]
  }

Your configuration is fine, except JS loader use babel.

[yuche]

It was babel 6 problem. https://medium.com/@malyw/how-to-update-babel-5-x-6-x-d828c230ec53#.r233qd888