Open admcfajn opened 7 years ago
Can you please share me how you are importing the module inside your component ? That can help me reproduce the issue and look into it.
Sure thing.
I've tied a couple ways,
1.) by importing it (they way i have been with other components) in my main js file, which includes VueRouter & a call to 'new Vue': import FileUpload from 'vue-simple-upload/dist/FileUpload'; Vue.use(fileupload);
2.) by importing it in to a component: import FileUpload from 'vue-simple-upload/dist/FileUpload';
Is it maybe the webpack config? If that isn't enough info, I'm happy to send more. Thanks for your help
Yup. Seems to be an issue with webpack configuration. Can you share the webpack config of your project ?
Here's webpack.base.conf
var path = require('path') var config = require('../config') var utils = require('./utils') var projectRoot = path.resolve(__dirname, '../')
var env = process.env.NODE_ENV // check env & config/index.js to decide whether to enable CSS source maps for the // various preprocessor loaders added to vue-loader at the end of this file var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap) var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap) var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
module.exports = { entry: { app: './src/main.js' }, output: { path: config.build.assetsRoot, publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, filename: '[name].js' }, resolve: { extensions: ['', '.js', '.vue', '.json'], fallback: [path.join(dirname, '../node_modules')], alias: { 'vue$': 'vue/dist/vue.common.js', 'src': path.resolve(dirname, '../src'), 'assets': path.resolve(dirname, '../src/assets'), 'components': path.resolve(dirname, '../src/components') } }, resolveLoader: { fallback: [path.join(dirname, '../node_modules')] }, module: { preLoaders: [ { test: /.vue$/, loader: 'eslint', include: [ path.join(projectRoot, 'src') ], exclude: /node_modules/ }, { test: /.js$/, loader: 'eslint', include: [ path.join(projectRoot, 'src') ], exclude: /node_modules/ } ], loaders: [ { test: /.vue$/, loader: 'vue' }, { test: /.js$/, loader: 'babel', include: [ path.join(projectRoot, 'src') ], exclude: /node_modules/ }, { test: /.jsx?$/, loader: 'babel', exclude: /node_modules(?!\/(vue-tables-2|vue-pagination-2))/ }, { test: /.json$/, loader: 'json' }, { test: /.(png|jpe?g|gif|svg)(\?.)?$/, loader: 'url', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /.(woff2?|eot|ttf|otf)(\?.)?$/, loader: 'url', query: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }, eslint: { formatter: require('eslint-friendly-formatter') }, vue: { loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), postcss: [ require('autoprefixer')({ browsers: ['last 2 versions'] }) ], html: { root: path.resolve(dirname, '../src/assets') } } }
& webpack.prod.conf
var path = require('path') var config = require('../config') var utils = require('./utils') var webpack = require('webpack') var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') var ExtractTextPlugin = require('extract-text-webpack-plugin') var HtmlWebpackPlugin = require('html-webpack-plugin') var env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') : config.build.env
var webpackConfig = merge(baseWebpackConfig, { module: { loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, devtool: config.build.productionSourceMap ? '#source-map' : false, output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, vue: { loaders: utils.cssLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env': env }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.optimize.OccurrenceOrderPlugin(), // extract css into its own file new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }), // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['vendor'] }) ] })
if (config.build.productionGzip) { var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, minRatio: 0.8 }) ) }
module.exports = webpackConfig
& webpack.dev.conf
var config = require('../config') var webpack = require('webpack') var merge = require('webpack-merge') var utils = require('./utils') var baseWebpackConfig = require('./webpack.base.conf') var HtmlWebpackPlugin = require('html-webpack-plugin') var FriendlyErrors = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) })
module.exports = merge(baseWebpackConfig, { module: { loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // eval-source-map is faster for development devtool: '#eval-source-map', plugins: [ new webpack.DefinePlugin({ 'process.env': config.dev.env }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), new FriendlyErrors() ] })
Hey, first off, thanks for building something hugely useful!.. Secondly, I'm having a rough-time using it.
FileUpload.vue line: 6 Uncaught SyntaxError: Unexpected token export
package.json below... any ideas?
"dependencies": { "axios": "^0.15.3", "babel-polyfill": "^6.23.0", "bootstrap-vue": "^0.5.1", "chart.js": "^2.5.0", "marker-clusterer-plus": "^2.1.4", "sinon": "^2.1.0", "update": "^0.7.4", "vue": "^2.2.1", "vue-axios": "^1.2.2", "vue-chartjs": "^2.3.8", "vue-material": "^0.6.3", "vue-router": "^2.1.1", "vue-simple-upload": "^0.1.6", "vue-tables-2": "^0.3.0", "vue2-google-maps": "^0.6.0", "vuestrap-base-components": "^0.8.10", "vuikit": "^0.6.2" },