I would like to use a 3rd party plugin but can't get it to load with my webpack config because the vue-loader isn't configured properly ( I think ) Importing my own components which are in the project folder works.
import Paginate from 'vuejs-paginate/src/components/Paginate.vue' When trying to import a .vue file from a package I get this error:
(function (exports, require, module, __filename, __dirname) { <template> SyntaxError: Unexpected token < So I think the vue-loader doesn't work if I import a package which is within node_modules folder.
This is my webpack config:
const path = require('path') const webpack = require('webpack') const vueConfig = require('./vue-loader.config') const ExtractTextPlugin = require('extract-text-webpack-plugin') const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') const nodeExternals = require('webpack-node-externals') const isProd = process.env.NODE_ENV === 'production' module.exports = { devtool: isProd ? false : '#cheap-module-source-map', output: { path: path.resolve(__dirname, '../dist'), publicPath: '/dist/', filename: '[name].[chunkhash].js' }, resolve: { alias: { 'public': path.resolve(__dirname, '../public') } }, module: { noParse: /es6-promise\.js$/, // avoid webpack shimming process rules: [ { test: /\.vue$/, loader: 'vue-loader', options: vueConfig }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules\/, query: { plugins: ['transform-runtime'] } }, { test: /\.(png|jpg|gif|svg)$/, loader: 'url-loader', options: { limit: 10000, name: '[name].[ext]?[hash]' } }, { test: /\.css$/, use: isProd ? ExtractTextPlugin.extract({ use: 'css-loader?minimize', fallback: 'vue-style-loader' }) : ['vue-style-loader', 'css-loader'] } ] }, performance: { maxEntrypointSize: 300000, hints: isProd ? 'warning' : false }, plugins: isProd ? [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.optimize.ModuleConcatenationPlugin(), new ExtractTextPlugin({ filename: 'common.[chunkhash].css' }) ] : [ new FriendlyErrorsPlugin() ] } vue-loader.config.js
module.exports = { extractCSS: process.env.NODE_ENV === 'production', preserveWhitespace: false, postcss: [ require('autoprefixer')({ browsers: ['last 3 versions'] }) ] } The node_modules is excluded but shouldn't it only be excluded for the babel-loader, not the vue loader itself ?
---- edit
I'm using SSR, the author itself states in this issue
@johnRivs Thank you so much. @sbefort You can import the library by import Paginate from 'vuejs-paginate/src/components/Paginate'; for SSR. Any question please reopen this issue.
