var alert = require('vue-strap').alert; report ERROR

[johnwonder]

ERROR in ./~/vue-strap/src/main.js
Module parse failed: F:\javascript\vuejs\vue-webpack-example\node_modules\vue-st
rap\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'
@ ./src/main.js 6:12-32

[yuche]

can you show me your webpack.config.js file?

[johnwonder]

var vue = require('vue-loader')
var BrowserSyncPlugin = require('browser-sync-webpack-plugin')
var path = require('path')
module.exports = {
entry: "./src/main.js",
output: {
path: "./build",
publicPath: "/build/",
filename: "build.js"
},
resolve: {
root: path.resolve('./'),
extensions: ['', '.js', '.vue']
},
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
server: { baseDir: ['./'] }
})
],
module: {
loaders: [
{
test: /.vue$/,
loader: vue.withLoaders({
// apply babel transform to all javascript
// inside *.vue files.
js: 'babel?optional[]=runtime'
})
},
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel'
},
{ test: /.styl$/, loader: "style!css!stylus" },
{ test: /.html$/, loader: "html" }
]
}
}

[johnwonder]

is there any error in the file above?

[johnwonder]

and src/main.js file is:

var Vue = require('vue')
var VueStrap = require('vue-strap').alert;

and then report error....

[yuche]

Try:

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

[johnwonder]

it reports same error :
ERROR in ./~/vue-strap/src/main.js
Module parse failed: E:\vue\vue-strap1\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'
@ ./src/index.js 4:12-32

[squirmy]

Having the same issue, neither of the two above worked for me, but this did:

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

[fattydevelop]

Having the same issue with @squirmy.

alert:require('vue-strap/src/alert.vue')
carousel:require('vue-strap/dist/vue-strap').carousel,

works fine,but

carousel:require('vue-strap/src/carousel')

can't work.

ERROR in ./~/vue-strap/src/utils/EventListener.js
Module parse failed: E:\graduateWork\myDesign\webFrontDesign\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!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-strap/src/carousel.vue 11:28-63

here's my webpack.conf.js. FYI my components are written by CommonJS

var vue = require('vue-loader')
module.exports = {
    entry: './src/main.js',
    output: {
        filename: './build/build.js'
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: vue.withLoaders({
                    // apply babel transform to all javascript
                    // inside *.vue files.
                    js: 'babel?optional[]=runtime'
                })
            },
            { test:/\.less$/, loader: 'style!css!less' }

        ]
    }
}

[yuche]

@johnwonder
@squirmy
@fattydevelop
Try:

npm install babel --save-dev
# Or
npm install babel -g

[soundtina]

@yuche
i have install the babel ,and i still get the same issue
this is my config

var path = require('path');
var webpack = require('webpack');
var colors = require('colors');
var vue = require('vue-loader');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

var logTime = function(stats) {
    var localeTime = new Date(stats.endTime).toLocaleTimeString();
    console.log('\n');
    console.log(colors.yellow(localeTime));
};

module.exports = {
    resolve: {
        root: __dirname
    },
    resolveLoader: {
        root: path.join(__dirname, 'node_modules')
    },
    entry: "./index.js",
    externals: [{'jquery': 'jQuery'}],
    output: {
        path: './dist',
        filename: "[name].[hash:6].js"
    },
    module: {
        loaders: [
            {test: /\.vue$/, loader: vue.withLoaders({
                css: ExtractTextPlugin.extract('css'),
                js: 'babel?optional[]=runtime'
            })},
            {test: /\.js$/, loader: "babel?optional[]=runtime", exclude: /node_modules/},
            {test: /\.css$/, loaders: ['style', 'css']},
            {test: /\.json$/, loader: 'json'},
            {test: /\.(png|jpg|gif)$/, loader: 'url'}
        ]
    },
    plugins: [
        new webpack.IgnorePlugin(/vertx/),
        new ExtractTextPlugin('[name].[hash:6].css'),
        new HtmlWebpackPlugin({
            title: 'Patsnap Trademark',
            favicon: './favicon.ico',
            template: './index.html',
            minify: {
                collapseWhitespace: true,
                collapseBooleanAttributes: true,
                removeAttributeQuotes: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        function() {
            this.plugin('done', function(stats) {
                logTime(stats);
            });
        }
    ]
}

[stefanosandes]

Having the same issue. Any solution?

[squirmy]

@MopTym posted a solution here before it was closed but I cannot see it above for some reason. I haven't tried it yet - but give it a shot.

Here's what was posted:

I got the same problem, then I set default extensions in the webpack.config.js like follows, now it works fine.

var path = require('path')
...
module.exports = {
  ...
  resolve: {
    root: path.resolve('./'),
    extensions: ['', '.js', '.vue']
  }
  ...
}

[soundtina]

old config

 module: {
...
// the exclude:/node_modules/ must be remove
// and  set the babel to support es7 
            {test: /\.js$/, loader: "babel?optional[]=runtime", exclude: /node_modules/},
...
    },

below wroks well

new config

...
    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'
            })
        }]
    }
...

also need

 npm install babel-runtime --save-dev

[stefanosandes]

thanks @soundtina, it worked fine for me!

[fattydevelop]

thanks @soundtina . Could explain how it works please?

[yejinjian]

vue.withLoaders does not work afer 6.0 but I got the same issue

[ChromoX]

With the following webpack.config.js

module.exports = {
  entry: './src/main.js',
  output: {
    path: './dist',
    publicPath: 'dist/',
    filename: 'build.js'
  },
  resolve: {
    root: [nodeRoot]
  },
  module: {
    loaders: [
      {test: /\.vue$/, loader: 'vue'},
      {test: /\.js$/, loader: "babel?optional[]=runtime&stage=0", exclude: /node_modules|main.js/},
      {test: /\.(png|jpg|gif)$/, loader: 'file?name=[name].[ext]?[hash]'}
    ]
  },
  // example: if you wish to apply custom babel options
  // instead of using vue-loader's default:
  babel: {
    presets: ['es2015', 'stage-0'],
    plugins: ['transform-runtime']
  },
  // Vue Settings
  vue: {
    loaders: {
      // css: ExtractTextPlugin.extract("css"),
      // stylus: ExtractTextPlugin.extract("css!stylus"),
      js: 'babel?optional[]=runtime&stage=0'
    }
  }
}

I get
Error: Cannot find module "-!babel?optional[]=runtime&stage=0!./../node_modules/vue-loader/lib/selector.js?type=script&index=0!./App.vue"

If I take the following line out;

js: 'babel?optional[]=runtime&stage=0'

things work again, but without Vue-Strap.
Any help would be greatly appreciated?

[gconsidine]

Found a workaround for a similar issue with Browserify + vue-strap. Here's the error I was receiving when attempting to require the alert component using require('vue-strap').alert:

Error: Cannot find module '-!babel!./../node_modules/vue-loader/lib/selector.js?type=script&index=0!./Alert.vue' from . . .

I've seen recommendations for the following but they won't work either:

• require('vue-strap/src/alert')
• require('vue-strap/src/alert.vue')

There's a case sensitivity issue. The name of the component file is Alert.vue, so what actually works is require('vue-strap/src/Alert.vue')