Cannot set property 'froalaEditor' of undefined

[Denly]

TypeError: Cannot set property 'froalaEditor' of undefined (anonymous function) node_modules/froala-editor/js/froala_editor.pkgd.min.js:7

Can't fix it. Hope to get some support. Thank you! index.js

// Require Editor JS files.
import 'froala-editor/js/froala_editor.pkgd.min.js';

// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

// Require Font Awesome.
import 'font-awesome/css/font-awesome.css';

webpack setting

module: {
    strictExportPresence: true,
    rules: [
      // my loader to expose jquery to global
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: '$'
        }]
      },...

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

[stefanneculai]

@Denly it looks like jQuery is not defined globally. If jQuery is correctly defined globally, you should be able to see in developer console the following object: $.FroalaEditor.

[aaronik]

I had a similar problem that persisted past whatever I did trying to get jquery into the fold. So I tried busting out the demo, and lo and behold, the same problem was happening. My company uses node v4.4.x (ancient now, I know), which is what I have as the default on my system now. I tried using v6.9.0, and :boom:, it worked like a charm. Not sure if this is the only way to fix it (and dearly, dearly hoping it isn't), but I thought I'd share here.

[PhilAndrew]

@Denly did you manage to fix this problem? How can I use Froala in Nuxt.js?

[stadja]

So yes, did you fixed this problem ?

[nguyenvq]

@PhilAndrew

// Require Froala Editor js file.
require("~/node_modules/froala-editor/js/froala_editor.pkgd.min");

// // Require Froala Editor css files.
require("~/node_modules/froala-editor/css/froala_editor.pkgd.min.css");
require("~/node_modules/font-awesome/css/font-awesome.css");
require("~/node_modules/froala-editor/css/froala_style.min.css");

// Import and use Vue Froala lib.
import Vue from "vue";

import VueFroala from "vue-froala-wysiwyg";
Vue.use(VueFroala);

In App.vue

<template>
  <div id="app">
    <froala :tag="'textarea'" :config="config" v-model="model"></froala>
  </div>
</template>

<script>
import VueFroala from "vue-froala-wysiwyg";

export default {
  name: "app",
  data() {
    return {
      config: {
        events: {
          "froalaEditor.initialized": function() {
            console.log("initialized");
          }
        }
      },
      model: "Edit Your Content Here!"
    };
  }
};
</script>

It's worked on my Nuxt app.

[stadja]

For me, to fix this in Angular (my problem was that in server side rendering it was failing), I just added at the beginning of froala_editor.pkgd.min.js

  if (typeof window == 'undefined') {
    return;
  }

So the beginning of the file is now:

!function(n){
  if (typeof window == 'undefined') {
    return;
  }
  "function"==typeof ...

[clodal]

Fiddled with this for a long while and came up with this that works with SSR

import React from 'react'
import PropTypes from 'prop-types'
import 'froala-editor/css/froala_style.min.css'
import 'froala-editor/css/froala_editor.pkgd.min.css'
import 'font-awesome/css/font-awesome.css'

/**
 * Fix issues with SSR
 * (Require Editor JS files)
 * @link https://github.com/froala/react-froala-wysiwyg/issues/35
 */
let FroalaEditor
if (typeof window !== 'undefined') {
  /* eslint-disable global-require */
  require('froala-editor/js/froala_editor.pkgd.min')
  FroalaEditor = require('react-froala-wysiwyg').default
  /* eslint-enable global-require */
}

class Editor extends React.Component {...}

export default Editor