Я занимаюсь разработкой приложения на laravel-mix, и оно отлично работает в нашей локальной системе. Мы делимся с командой, которая имеет windows и macos, но когда мы пытаемся развернуть наш код на сервере Ubuntu, оно не перемещается и выдает нам ошибку:
vue-router.esm.js?4dc1:2117 TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (app.js?id=ab39ffc81e06137283e9:64)
at eval (login.vue?21d2:1)
at Object../node_modules/css-loader/index.js?!../nitseditor-frontend/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/pages/login.vue?vue&type=style&index=0&id=2379d9d6&scoped=true&lang=css& (ProjectPages-component.13725ab8fd677b7f258a.js:858)
at __webpack_require__ (app.js?id=ab39ffc81e06137283e9:64)
at eval (login.vue?5e7a:2)
at Object../node_modules/style-loader/index.js!./node_modules/css-loader/index.js?!../nitseditor-frontend/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/pages/login.vue?vue&type=style&index=0&id=2379d9d6&scoped=true&lang=css& (ProjectPages-component.13725ab8fd677b7f258a.js:924)
at __webpack_require__ (app.js?id=ab39ffc81e06137283e9:64)
at eval (login.vue?033a:1)
at Module../resources/pages/login.vue?vue&type=style&index=0&id=2379d9d6&scoped=true&lang=css& (ProjectPages-component.13725ab8fd677b7f258a.js:1846)
at __webpack_require__ (app.js?id=ab39ffc81e06137283e9:64)
Моя конфигурация webpack.mix выглядит примерно так:
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
const NitsRoutePlugins = require('./Webpack/NitsRoutePlugin');
const NitsComponentsPlugin = require('./Webpack/NitsComponentsPlugin');
mix.sass('node_modules/nitseditor-frontend/Assets/sass/app.scss', 'public/nits-assets/css')
.options({
processCssUrls: false,
postCss: [ require('autoprefixer'), tailwindcss('./tailwind.config.js') ],
})
.js('node_modules/nitseditor-frontend/app.js', 'public/nits-assets/js')
.webpackConfig({
module: {
rules: [
]
},
node: {
fs: "empty"
},
output: {
publicPath: '/',
chunkFilename: 'nits-assets/chunks/[name].[chunkhash].js',
},
resolve: {
symlinks: false,
extensions: ['.js', '.json', '.vue'],
alias: {
NitsModels: path.resolve(__dirname, 'Models'),
ProjectModels: path.resolve('./resources/models'),
ProjectPages: path.resolve('./resources/pages'),
NitsAdminPages: path.resolve(__dirname, 'Pages'),
NitsComponents: path.resolve(__dirname, './Components'),
Plugins: path.resolve('./plugins'),
}
},
plugins: [
new NitsRoutePlugins(),
new NitsComponentsPlugin()
]
})
// .extract([
// 'vue', 'axios', 'lodash', 'vue-router', 'vue-template-compiler', 'vuex'
// ])
.sourceMaps().version();
Редактировать:
Я обнаруживал проблему всякий раз, когда упоминаю какие-либо элементы style внутри моего vue-components, это выдает ошибку, также у меня есть динамический импорт c. Я узнал через этот комментарий
Редактировать 2
Я хочу использовать CKEditor5 и изменил свой webpack.mix. js на следующий :
const mix = require('laravel-mix');
let path = require('path');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
const tailwindcss = require('tailwindcss');
const NitsRoutePlugins = require('./Webpack/NitsRoutePlugin');
const NitsComponentsPlugin = require('./Webpack/NitsComponentsPlugin');
const NitsLayoutsPlugin = require('./Webpack/NitsLayoutsPlugin');
/*
|--------------------------------------------------------------------------
| CKEditor configuration
|--------------------------------------------------------------------------
|
| Neccessary Webpack config files.
|
*/
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const CKEStyles = require('@ckeditor/ckeditor5-dev-utils').styles;
const CKERegex = {
svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
};
Mix.listen('configReady', webpackConfig => {
const rules = webpackConfig.module.rules;
const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/;
const targetCSS = /\.css$/;
// exclude CKE regex from mix's default rules
// if there's a better way to loop/change this, open to suggestions
for (let rule of rules) {
if (rule.test.toString() === targetSVG.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetFont.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetCSS.toString()) {
rule.exclude = CKERegex.css;
}
}
});
mix.copy('node_modules/nitseditor-frontend/Assets/images', 'public/nits-assets/images')
.sass('node_modules/nitseditor-frontend/Assets/sass/app.scss', 'public/nits-assets/css')
.options({
processCssUrls: false,
postCss: [ require('autoprefixer'), tailwindcss('./tailwind.config.js') ],
})
.js(path.resolve('./resources/js/app.js'), 'public/nits-assets/js')
.webpackConfig({
module: {
rules: [
{
test: CKERegex.svg,
use: [ 'raw-loader' ]
},
{
test: CKERegex.css,
use: [
{
loader: 'style-loader',
options: {
singleton: true
}
},
{
loader: 'postcss-loader',
options: CKEStyles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
},
minify: true
})
},
]
}
]
},
node: {
fs: "empty"
},
output: {
publicPath: '/',
chunkFilename: 'nits-assets/chunks/[name].[chunkhash].js',
},
resolve: {
symlinks: false,
extensions: ['.js', '.json', '.vue'],
alias: {
NitsModels: path.resolve(__dirname, 'Models'),
ProjectModels: path.resolve('./resources/models'),
ProjectPages: path.resolve('./resources/pages'),
NitsAdminPages: path.resolve(__dirname, 'Pages'),
NitsComponents: path.resolve(__dirname, './Components'),
Plugins: path.resolve('./plugins'),
}
},
plugins: [
new NitsRoutePlugins(),
new NitsComponentsPlugin(),
new NitsLayoutsPlugin(),
new CKEditorWebpackPlugin({language: 'en', additionalLanguages: 'all'})
]
})
// .extract([
// 'vue', 'axios', 'lodash', 'vue-router', 'vue-template-compiler', 'vuex'
// ])
// .nitsEditor()
.sourceMaps().version();
Теперь он снова показывает ту же ошибку, не может импортировать мой компонент CKEditor:
<template>
<ckeditor :editor="editor" :config="editorConfig"></ckeditor>
</template>
<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
// import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
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 {
name: "NitsCkeditor",
components: {
// Use the <ckeditor> component in this view.
ckeditor: CKEditor.component
},
data() {
return {
editor: ClassicEditor,
editorConfig: {
plugins: [
EssentialsPlugin,
BoldPlugin,
ItalicPlugin,
LinkPlugin,
ParagraphPlugin
],
toolbar: {
items: [
'bold',
'italic',
'link',
'undo',
'redo'
]
}
}
}
}
}
</script>
<style scoped>
</style>
Он показывает эту ошибку:
Помогите мне с этим.