I'm lost in a struggle for making CKEditor 5 work in Laravel 8 Jetstream.
I have installed it using npm (I don't want CDN for production mode later on).
How I installed it
I executed the following npm command on the root folder of my Laravel project:
npm install #ckeditor/ckeditor5-build-classic --save-dev
Then, inside the app.js file I added:
/** CKEditor 5*/
import ClassicEditor from '#ckeditor/ckeditor5-build-classic/build/ckeditor';
window.ClassicEditor = ClassicEditor;
Then, inside the view where I require it, looks like the following:
{{--Content--}}
<div>
<x-jet-label value="Content" />
<textarea wire:model="post.content" rows="6" class="form-control w-full" id="editor"></textarea>
</div>
...
#push('js')
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( 'CKEditor error: '+error );
} );
</script>
#endpush
I ran npm run dev:
npm run dev
after that I see the following message:
webpack compiled successfully
It does not work
However, when I visit the page and look at the inspect element (since I see that the CKEditor is not loaded), I get the following log error:
Uncaught ReferenceError: ClassicEditor is not defined
What else I've tried
The strange thing is that, if I then call the CDN like so:
#push('js')
<script src="https://cdn.ckeditor.com/ckeditor5/29.1.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( 'CKEditor error: '+error );
} );
</script>
#endpush
Now I get a different error of calling it twice!:
Uncaught CKEditorError: ckeditor-duplicated-modules
What works
If I just use the CDN, it does work. However, from the NPM method, it doesn't. If I only leave the NPM, it says it's undefined. If I add the CDN, it says it's duplicated!
The only thing that works is to use the CDN only by removing the
/** CKEditor 5*/
import ClassicEditor from '#ckeditor/ckeditor5-build-classic/build/ckeditor';
window.ClassicEditor = ClassicEditor;
part, from the app.js file and npm run dev again.
My question
What am I missing? How do I make it work with the NPM installation?
Try this in bootsrap.js...
window.ClassicEditor = require('#ckeditor/ckeditor5-build-classic/build/ckeditor');
Then run...
npm run dev
Try using document.addEventListener('livewire:load', function instead of #push
https://laravel-livewire.com/docs/2.x/inline-scripts
Related
I have setup a Laravel 8 installation that uses Jetstream (inertia js stack). All Jetstream provided views are working correctly.
The issue is when I create a new Route that renders a new Vue template, I get this error in my console:
app.js:30559 [Vue warn]: Error in created hook: "Error: Cannot find module './Test'"
My Route created in web.php
Route::get('/test', function() {
return Inertia\Inertia::render('Test');
});
The 'Test.vue' file is in the 'resources/js/Pages' directory.
<template>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Testing
</h2>
</template>
app.js
require('./bootstrap');
import Vue from 'vue';
import { InertiaApp } from '#inertiajs/inertia-vue';
import { InertiaForm } from 'laravel-jetstream';
import PortalVue from 'portal-vue';
Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);
const app = document.getElementById('app');
new Vue({
render: (h) =>
h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
},
}),
}).$mount(app);
Any idea why the Test.vue template is not being found?
Maybe somebody else is getting here like I did - I had to open developer console in Chrome and make sure that in the Network tab, I had disable cache checked.
And on top, had to go into my server and do php artisan optimize to clear cached views.
Just needed to run 'npm run dev'
You should run this command: npm run watch
It will tracks all your changes and update the application.
Check if you have npm run watch or imho better npx mix watch. Try to php artisan optimize and of course, "hard reload" your browser - for Chrome it is Control+Shift+Delete on Windows and Command+Shift+Delete on MacOS
You need to run npm watch for the vue pages to render:
Route::middleware(['auth:sanctum', 'verified'])
->get('/chat', function () {
return Inertia::render('Chat/container');
})
->name('chat');
The error for me was in the way i created the module directory, it contained additional invisible characters different from its intended name so i had to recreate the directory and that solved it.
Ps : Anyone trying this can just refactor if possible
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See :// webpack . js .org/concepts#loaders
> <template>
| <div class="container">
| <div class="row justify-content-center">
# ./resources/js/Router.js 4:0-53 11:15-19
# ./resources/js/app.js
# multi ./resources/js/App.js ./resources/sass/app.scss
in APP
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from './Router'
new Vue({
el: '#app',
router
});
in Router js
i importing the vue-router and vue
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import User from './components/ExampleComponent.Vue'
Vue.use(VueRouter);
const router = new VueRouter({
mode:'history',
routes:[
{ path:'/user', component: User, } ,
{ path:'/categories', component: categories, } ,
]
})
I ran into this error too. In my own case, I ran into this error because I wanted to use tailwind v2.0.
I think it have something to do with Laravel Mix v6.0 or POSTCSS 8. Because Vue SFCs doesn't work with PostCSS 8-only plugins yet. Taken from (https://github.com/JeffreyWay/laravel-mix/issues/2625).
So in my own case, the steps I took are listed below.
I uninstall the concerned packages npm uninstall tailwindcss postcss autoprefixer
Then I installed them back with compatibility build npm install tailwindcss#npm:#tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
Check https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
I added "laravel-mix": "^5.0.1" to the package.json file to downgrade the laravel mix from v6.0 to v5.0.1.
Then npm install
Finally, npm run watch
I am trying to run a javascript module inline. I can't figure out how.
I am using Laravel and Webpack. I am not so technical, I just follow the docs as much as possible.
resources/assets/js/revision.js
var revision = function () {
console.log('Hell world');
};
module.exports = revision;
I run npm run dev with this webpack.mix.js
mix.js('resources/assets/revision.js', 'public/js/revision.js').version();
I have tried this url
<script type="module">
import { revision } from '/js/revision.js';
</script>
gives "The requested module '/js/revision.js' does not provide an export named 'revision'"
and
<script type="module" src="{{ asset('js/revision.js') }}"></script>
is not doing anything....
I'm using Laravel facing a problem when compiling assets. By default laravel provides a wrapper around webpack which is laravel-mix, laravel-mix using file called webpack.mix.js, and by using npm run dev command, laravel-mixcompile all js files into one webpack bundle js file.
Code of webpack.mix.js:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I have a Main.js file which has some jquery code.
Main.js:
;( function( $, window, document, undefined ) {
'use strict';
$(window).on('load', function() {
alert('ready');
});
}
)( jQuery, window, document );
My directory structure is something like this
resources\assets\js
app.js
bootstrap.js
Main.js
Code of app.js:
require('./bootstrap');
Code of bootstrap.js:
try {
window.$ = window.jQuery = require('jquery');// jquery
require('bootstrap');// bootstrap framework js
require('./Main'); // Main.js
} catch (e) {
}
When i type command npm run dev all assets are compile into one file then why my Main.js jquery code which is just an alert popup doesn't execute on the page.
But when i change order of the bootstrap.js file into something like this then my Main.js code is execute.
try {
window.$ = window.jQuery = require('jquery');// jquery
require('./Main'); // Main.js
require('bootstrap');// bootstrap framework js
} catch (e) {
}
Why this thing is happening. Does conflict happen between bootstrap framework js file and Main.js file.
Replying to the tldr in the comments:
There is not any error comes, but when i load my page my Main.js script is not executed
I had this same issue and including the manifest.js and vendor.js solved these issues:
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
I'm simply trying to learn vuejs with laravel and cannot get the example component working.
I have created a fresh route to simply serve the vue example for now.
create.blade.php
<!DOCTYPE html>
<html>
<head>
<title>VUE</title>
</head>
<body>
<h1>example</h1>
<div id="app">
<example></example>
</div>
<script src="/js/app.js"></script>
</body>
</html>
The app.js and example.vue files are exactly as out of the box ( so i won't bother showing example.vue here
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
I have npm run watch running and it seems to have built the app files ok.
Controller and route is fine, as page is loading, but I'm getting console error as follows
app.js:1697 Uncaught TypeError: Cannot read property 'csrfToken' of
undefined
at Object.<anonymous> (app.js:1697)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:778)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:41430)
at __webpack_require__ (app.js:20)
at app.js:66
at app.js:69
When i click the console error in chrome it points to the line in app.js:
window.axios.defaults.headers.common['X-CSRF-TOKEN'] =
window.Laravel.csrfToken;
Is it complaining about csrftoken because I've used it as a blade template ?
How can I get it working inside laravel, just so i can play with and learn vuejs ?
The code that it is complaining about is in the resources/assets/js/bootstrap.js source, which you'll see is being referenced at the top of the app.js file. In your blade file, before you include your app.js, you can set the csrf token value.
<script>
window.Laravel.csrfToken = {{ csrf_token() }};
</script>
<script src="/js/app.js"></script>
Or, alternatively, if all you want to do is play with the example as-is, you can probably just remove that line of code from bootstrap.js. But you'll probably need it later once you start using VueJS more.
I think it's better to modify your bootstrap.js file (after axios import line) with the following:
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'X-Requested-With': 'XMLHttpRequest'
};