Packaging Froala with Vite

I have an project I'm trying to install Froala on. At the same time, I'm also installing Vite. Vite is working fine with the rest of my packages, but Froala is giving me a hard time. I've tried a few different configurations and I usually end up with one of two errors; either "$ is not defined" or "FroalaEditor is not defined". I find it odd that $ is not defined because I'm importing it globally; is Froala overriding it? I've tried running froala_editor.pkgd.min.js file before I import jQuery since I believe it it contains it's own jQuery, but that also hasn't worked. I've also tried adding globals: { FroalaEditor: 'FroalaEditor' } to my vite config, but that doesn't seem to change anything. If possible, I'd like to keep FroalaEditor global.

app.js

// Import jQuery
import jQuery from 'jquery'
window.$ = jQuery

// Import JS
import '../../node_modules/froala-editor/js/froala_editor.min.js'

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import inject from '@rollup/plugin-inject';
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [
        inject({
            $: [ 'jquery', '*' ],
            jQuery: 'jquery',
        }),
        laravel({
            input: ['resources/js/app.js', 'resources/css/app.css'],
            refresh: true,
        }),
        vue()
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        }
    },
});

thinkverse

2 years ago

Best Answer

Level 15

It says in the README for Froala how you use it with ES6. Nowhere do I see the import path you're using. The reason you're seeing N is not defined is that Laravel imports the JavaScript as modules, so you need to use <script type="module"> and not <script>.

Also, if you're only going to use Froala in one place it'd be better to create its own file for it, say froala.js or something:

import FroalaEditor from 'froala-editor';
import 'froala-editor/css/froala_editor.min.css';

window.FroalaEditor = FroalaEditor;

Then you need to add that as an input to your vite.config.js file:

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/froala.js'
            ],
            refresh: true,
        }),
    ],
});

And then for every page you need to use Froala, you add it to the @vite directives array. Vite will automatically separate the JavaScript and CSS into its own files and all you have to do is reference the input file:

@vite(['resources/css/app.css', 'resources/js/app.js', 'resources/js/froala.js'])

Lastly, you can use it by initializing a new editor where you need it:

<body>
    <textarea></textarea>

    <script type="module">
        new FroalaEditor('textarea');
    </script>
</body>

astein35

2 years ago

Level 1

@thinkverse The import statement you mentioned and attaching FroalaEditor to the window fixed my issue. Thank you!

Please or to participate in this conversation.