VueJS CKEditor5 ошибка построения из источника - PullRequest
Новая
       35

VueJS CKEditor5 ошибка построения из источника

0 голосов
/ 24 февраля 2020

Я следую https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using -ckeditor-from-source , чтобы попытаться собрать ckeditor5 из источника, потому что я хочу использовать плагин упоминаний (https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html), который не не является частью какой-либо существующей сборки. Тем не менее, я получаю следующую ошибку: 

ERROR in ./node_modules/@ckeditor/ckeditor5-link/theme/linkactions.css (./node_modules/css-loader!./node_modules/@ckeditor/ckeditor5-link/theme/linkactions.css)
Module not found: Error: Can't resolve './@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css' in '/c/Users/user/Documents/wtw/admin-portal/node_modules/@ckeditor/ckeditor5-link/theme'
 @ ./node_modules/@ckeditor/ckeditor5-link/theme/linkactions.css (./node_modules/css-loader!./node_modules/@ckeditor/ckeditor5-link/theme/linkactions.css) 3:10-98
 @ ./node_modules/@ckeditor/ckeditor5-link/theme/linkactions.css
 @ ./node_modules/@ckeditor/ckeditor5-link/src/ui/linkactionsview.js
 @ ./node_modules/@ckeditor/ckeditor5-link/src/linkui.js
 @ ./node_modules/@ckeditor/ckeditor5-link/src/link.js
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/symmons/Comment.vue
 @ ./src/components/symmons/Comment.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/symmons/CommentSection.vue
 @ ./src/components/symmons/CommentSection.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/symmons/health-center/HealthIssueForm.vue
 @ ./src/components/symmons/health-center/HealthIssueForm.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/symmons/HealthCenter.vue
 @ ./src/components/symmons/HealthCenter.vue
 @ ./src/router/routes.js
 @ ./src/main.js

Я импортирую CKEditor со следующим: 

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';

export default {
    data() {
        return {
            editor: ClassicEditor,
            editorConfig: {
                plugins: [
                    EssentialsPlugin,
                    BoldPlugin,
                    ItalicPlugin,
                    LinkPlugin,
                    ParagraphPlugin
                ],
                toolbar: {
                    items: [
                        'bold',
                        'italic',
                        'link',
                        'undo',
                        'redo'
                    ]
                },
                link: {
                    decorators: {
                        addTargetToExternalLinks: {
                            mode: 'automatic',
                            callback: url => /^(https?:)?\/\//.test( url ),
                            attributes: {
                                target: '_blank',
                            }
                        }
                    }
                }
            }
      }
}

Ошибка исчезнет, ​​если я исключу "импорт LinkPlugin из" @ckeditor / ckeditor5-ссылка / SRC / ссылка ";» но затем я получаю эту ошибку: 

ckeditor.js?3730:5 TypeError: Cannot read property 'getAttribute' of null
    at IconView._updateXMLContent (iconview.js?631f:100)
    at IconView.render (iconview.js?631f:76)
    at IconView.eval (observablemixin.js?d4e1:255)
    at IconView.fire (emittermixin.js?da0d:209)
    at IconView.<computed> [as render] (observablemixin.js?d4e1:259)
    at ViewCollection.eval (viewcollection.js?3493:66)
    at ViewCollection.fire (emittermixin.js?da0d:209)
    at ViewCollection.add (collection.js?67b9:182)
    at ButtonView.render (buttonview.js?3707:181)
    at ButtonView.eval (observablemixin.js?d4e1:255)

My vue .config. js точно такой же, как в руководстве, но мне интересно, может ли это быть что-то в моем веб-пакете это вызывает проблему. Мой webpack.config. js это: 

'use strict';

var path = require('path');
var webpack = require('webpack');

var { CleanWebpackPlugin } = require('clean-webpack-plugin');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

// Used in deploy notes.
var date = new Date();

var buildType = 'local';
if (process.env.NODE_ENV === 'production') {
    buildType = 'server';
}

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/',
        filename: 'build.js',
        chunkFilename: '[id].chunk.js',
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this necessary.
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            },
            {
                test: /vendor\/.+\.(jsx|js)$/,
                loader: 'imports?jQuery=jquery,$=jquery,this=>window'
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader", // translates CSS into CommonJS
                    options: {
                        sourceMap: true
                    }
                }, {
                    loader: "sass-loader", // compiles Sass to CSS
                    options: {
                        sourceMap: true
                    }

                }]
            },
            {
                test: /\.sass$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader?indentedSyntax'
                ],
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            'jquery': 'jquery/src/jquery.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    devServer: {
        hot: true,
        open: true,
        historyApiFallback: true,
        noInfo: true,
        overlay: true
    },
    performance: {
        hints: false
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './index-template.html', // relative to root of application
            filename: 'index.html', // default path is root of application
            build: buildType, // deploy Notes added to the bottom of template
            date: date, // deploy Notes added to the bottom of template
        })
    ],
    devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {

    // @Override
    module.exports.output = {
        path: path.resolve(__dirname, './dist'),
        publicPath: 'dist/',
        filename: 'bundle-[hash].js',
        chunkFilename: '[id].chunk-[hash].js',
    };

    // @Override
    module.exports.devtool = '#source-map';

    // @Concat
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),

        new CleanWebpackPlugin(),

        new UglifyJSPlugin(),

        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
        })

    ])
}
...