Я использую VueCoolSelect
3.5.2 в своем компоненте
import { CoolSelect } from 'vue-cool-select'
<cool-select
v-model="message.to"
:items="items"
:loading="searching"
item-text="label"
placeholder="Send to"
disable-filtering-by-search
@search="onSearch"
:allowMobileScroll="false">
<template slot="no-data">{{noData ? "No Result." : "Two characters minimum." }}</template>
<template slot="item" slot-scope="{item}"><div v-html="item.listing"></div></template>
</cool-select>
Я получаю ошибку
[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating '_vm.$coolSelect.options')"found in---> <VueSelect> <NewMessageComponent> at src/vue/component/message/new-message-component.vue
![console error](https://i.stack.imgur.com/8bLi1.png)
Честно говоря, я не понимаю, почему он ссылается на VueSelect
, потому что ошибка определенно исходит от VueCoolSelect
: если я удаляю VueCoolSelect
из моего компонента, то у меня нет ошибки.
Может ли это быть из веб-пакета? Я недавно обновился до последней версии ...
на случай, если моя конфигурация:
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const ManifestPlugin = require('webpack-manifest-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ProvidePlugin = require("webpack").ProvidePlugin;
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserPlugin = require('terser-webpack-plugin');
const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
module.exports = {
optimization: {
minimizer: [new TerserPlugin({
parallel: true,
terserOptions: {
ecma: 5,
warnings: false,
parse: {},
compress: {},
mangle: true,
module: false,
output: null,
toplevel: true,
nameCache: null,
ie8: true,
keep_classnames: undefined,
keep_fnames: false,
safari10: true,
html5_comments:false,
webkit:true
},
})],
},
watchOptions: {
ignored: ['node_modules']
},
entry: {
...
},
devtool: 'inline-source-map',
output: {
path: path.resolve(__dirname,'./public/build'),
filename: '[name]-[hash].js',
publicPath: '/build/',
library: ["library", "[name]"],
libraryTarget: "umd"
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-typescript']
}
}
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 250
}
}
]
},
{
test: /\.svg/,
use: [ 'raw-loader']
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
// options: {
// singleton: true
// }
},
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
},
]
},
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
},
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new CopyWebpackPlugin([
{
from: 'assets',
to: '../[path][name].[ext]',
force: true,
ignore: [ '.DS_Store', '.gitignore' ]
}
]),
new WebpackNotifierPlugin(
{
excludeWarnings: true
}
),
new ManifestPlugin(
{
basePath: 'build/',
writeToFileEmit: true
}
),
new CleanWebpackPlugin(
{
verbose: false,
dry: false,
watch: true,
}),
new ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
new VueLoaderPlugin(),
new CKEditorWebpackPlugin( {
language: 'en'
} ),
new CleanObsoleteChunks()
],
};