Create React App Configuration

[pastorsj]

I am having issues configuring my react app with react-froala. I used create-react-app, which automatically sets up a config file for webpack and a basic boilerplate structure. Once I installed (using npm) react-froala-wysiwyg,

in the webpack config file, I added

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

and

      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/octet-stream"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=image/svg+xml"
      }

in the loaders section of the webpack file.

Then at the top of the main js file, I added

import "froala-editor/js/froala_editor.pkgd.min.js";
import "froala-editor/css/froala_editor.pkgd.min.css";
import 'font-awesome/css/font-awesome.css';
import FroalaEditor from 'react-froala-wysiwyg';

Then I added

<FroalaEditor
    tag='textarea'
 />` 

and attempted to build. I got this error

Uncaught TypeError: this.$element.froalaEditor is not a function(…)

Any thoughts on what the issue might be? Am I forgetting any imports? Thanks!

[stefanneculai]

You might be including jQuery twice. How does your package.json look like?

[ghoshnirmalya]

I'm positive that I'm including jquery only once.

[stefanneculai]

Could you send your package.json config?

[ghoshnirmalya]

"async": "^2.0.0-rc.1",
"babel": "^5.6.1",
"babel-core": "^5.6.4",
"babel-eslint": "^6.0.0-beta.5",
"babel-loader": "^5.1.4",
"babel-polyfill": "^6.9.1",
"classnames": "^2.1.2",
"css-loader": "^0.23.0",
"expose-loader": "^0.7.0",
"file-loader": "^0.8.4",
"imports-loader": "^0.6.4",
"jquery": "latest",
"lodash": "^4.3.0",
"node-libs-browser": "^0.5.2",
"react": "^15.3.2",
"react-addons-css-transition-group": "^15.3.2",
"react-dom": "^15.3.2",
"react-froala-wysiwyg": "^2.3.5-2",
"run-sequence": "^1.2.2",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"

these are the files which I've in my package.json.

[stefanneculai]

Does it work if you remove jQuery from there? Make sure you remove the node modules and install them again.

[ghoshnirmalya]

Then I get the following error:

ERROR in ./~/froala-editor/js/froala_editor.pkgd.min.js
Module not found: Error: Cannot resolve module 'jquery' in /Users/username/src/btt/ehq/participation/node_modules/froala-editor/js
 @ ./~/froala-editor/js/froala_editor.pkgd.min.js 7:51-71 1:0-17

[ghoshnirmalya]

I'm positive it's happening in this function:

createEditor: function() {
     this.editorInitialized || (
         this.config = this.props.config || this.config,
         this.$element = $(this.refs.el),
         this.setContent(!0),
         this.registerEvents(),
         this.$editor = this.$element.froalaEditor(this.config).data("froala.editor").$el,
         this.initListeners(), this.editorInitialized = !0
    )
}

This line: this.$editor = this.$element.froalaEditor(this.config).data("froala.editor").$el,

[ghoshnirmalya]

I don't suppose that the froalaEditor() method is defined in this file. If I log the froalaEditor() method, it throws me ReferenceError: froalaEditor is not defined.

[stefanneculai]

That is because there is a different jQuery loaded in the module than the one from the main package. If you change "jquery": "latest" to "jquery": "1.11.0" does it work?

[ghoshnirmalya]

No. It still throws the same error.

[stefanneculai]

@ghoshnirmalya have you deleted the node_modules folder and ran npm install again?

[ghoshnirmalya]

@stefanneculai yes.

[stefanneculai]

Does it work if you run npm install react-froala-wysiwyg react --save?

[ghoshnirmalya]

Yes.

[stefanneculai]

We'll try to replicate this locally to see if we can find what the problem might be. Could you send the webpack config file?

[pastorsj]

Update: I updated my react webpack file, added

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

and kept jquery at version 1.11.0 in my package.json. This seemed to fix the issue

[pastorsj]

The original react webpack file was the standard version used by create-react-app

[andrewhl]

@pastorsj Hello. Just wondering if you had to eject create-react-app to get Froala working?

[pastorsj]

@andrewhl If memory serves me right, I had to eject create-react-app because I had to customize both webpack files (prod and dev).

[andrewhl]

@pastorsj Ok, thanks!

[MJfenix]

Hello all. I am facing the same issue, but I am not using webpack. I am using react-redux setup with node.js in the background. Need help.

[mattcarlotta]

You don't need to eject the Create React App. Instead, just do this: npm i -S react-froala-wysiwyg jquery

App.js (index.js) -- root level of your app:

import React from 'react';
import { render } from 'react-dom';
import App from './routes';
import './styles/styles.css';
import 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import $ from 'jquery';
window.$ = $;

render(<App />, document.getElementById('root'));

[CodeXtinction]

im having the same issue Uncaught TypeError: this.$element.froalaEditor is not a function(…) im trying to add froala to an existent meteor app, were we use react. we dont use webpack, we already have jquery loaded.

this is my component, also tried with jquery 1.11.0, same result

/* eslint-disable no-unused-vars */
import React, { Component } from 'react';
import styled from 'styled-components';

import 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'font-awesome/css/font-awesome.css';
import FroalaEditor from 'react-froala-wysiwyg';

import $ from 'jquery';
window.$ = $;
window.jQuery = $;

class Composer extends Component {
  render() {
    return <FroalaEditor tag="textarea" />;
  }
}

export default Composer;

[mattcarlotta]

Here's a work-around for those who don't use CRA or Webpack (not pretty, but it works): https://codesandbox.io/s/v6vvzyx4wy

See sandbox above for a controlled editor example OR here's a stripped down uncontrolled editor example:

index.js

import React from "react";
import { render } from "react-dom";
import FroalaEditor from 'react-froala-wysiwyg';
import $ from "jquery";
import "froala-editor/css/froala_style.min.css";
import "froala-editor/css/froala_editor.pkgd.min.css";
require("froala-editor/js/froala_editor.pkgd.min.js")($);
window.$ = $;

render(<FroalaEditor tag='textarea' />, document.getElementById("root"));

index.html (if you're not using webpack or some sort of css compiler/loader, then you'll need to use a font-awesome CDN in order for icons to show up in the editor)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
 crossorigin="anonymous">
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

[CodeXtinction]

@mattcarlotta awesome thank you!!

[phil123456]

is this solved ? man I am so sick of that froala package just errors all over the place, and using jquery with angular ???? wtf ???

[bcliffor]

Seconding @phil123456 's comment. @stefanneculai I am implementing a demo of froala for my company looking to buy and this is stopping me in my tracks. I cannot just remove our global install of jquery through webpack, and none of these workarounds will work for me. It actually isn't very clear to me if there is any official way to solve this other than happening to use the same version of jquery already as froala.

Do you have any advice on how to best hack around this?

Thank you

[crowmw]

I using jquery signalR in my application. When i import jquery as in documentation i have lost signalR dependency $.hubConnection / $.signalR. etc.

How can i use froala editor and signalR in the same app?

[BenjaminCaffrey]

Hi @crowmw ,

I'm having the same issue currently - using the webpack ProvidePlugin suggestion above interferes with other functionality in the appliaction. @bcliffor Did you get this resolved?