VueJS + VueCoolSelect = ошибка vm. $ CoolSelect.options - PullRequest
0 голосов
/ 25 февраля 2020

Я использую 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

Честно говоря, я не понимаю, почему он ссылается на 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()

],
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...