Languages sourceMappingUrl

[AGallouin]

Hello,

First of all, I know this may look like a reopen of https://github.com/froala/wysiwyg-editor/issues/3665 and https://github.com/froala/ember-froala-editor/issues/73, but it doesn't seem to have any solution clearly written (or my poor eyes are unable to find it).

The bug is that there is a source map comment at the end of every language file, but no source map, leading to a warning:

WARNING in ./node_modules/froala-editor/js/languages/fr.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '****/my-app/node_modules/froala-editor/js/languages/fr.js.map' file: Error: ENOENT: no such file or directory, open '****/my-app/node_modules/froala-editor/js/languages/fr.js.map'

Version: react-froala-wysiwyg: "^4.0.14"

How to reproduce:

Create a standard Create React App project with a typescript template. Add react-froala-wysiwyg

import { useState } from 'react';
import './App.css';

import FroalaEditorComponent from "react-froala-wysiwyg";

// // js for plugins
import "froala-editor/js/plugins/lists.min.js";
import "froala-editor/js/plugins/link.min.js";
import "froala-editor/js/plugins/colors.min.js";
import "froala-editor/js/plugins/word_paste.min.js";
import "froala-editor/js/plugins/font_size.min.js";
import "froala-editor/js/plugins/video.min.js";
import "froala-editor/js/plugins/paragraph_format.min.js";

// // Traduction.
import "froala-editor/js/languages/fr.js";

const DEFAULT_CONFIG = {
  attribution: false,
  listAdvancedTypes: false,
  linkList: false,
  linkStyles: false,
  language: "fr",
  linkMultipleStyles: false,
  pastePlain: true,
  placeholderText: "Ecrivez le contenu désiré.",
  toolbarSticky: true,
  videoUpload: false,
  paragraphFormat: {
    H2: "Titre",
    H3: "Sous-titre",
    N: "Paragraphe",
  },
  toolbarButtons: [
    "bold",
    "italic",
    "underline",
    "paragraphFormat",
    "|",
    "insertLink",
    "insertVideo",
    "|",
    "formatUL",
    "formatOL",
    "|",
    "outdent",
    "indent",
    "|",
    "selectAll",
    "clearFormatting",
    "|",
    "help",
    "html",
    "|",
    "undo",
    "redo",
  ],
};

function App() {
  const [state, setState] = useState("");

  return (
    <div className="App">
      <FroalaEditorComponent
        model={state}
        tag="textarea"
        config={{ ...DEFAULT_CONFIG, key: "$$$$$" }}
        onModelChange={setState}
      />
    </div>
  );
}

export default App;

Thanks !

[MarinusDR]

Is there a solution for this error?

[kemusag]

I also ran into this issue. Are there any updates on when this will be fixed?

[AGallouin]

No idea. To hide it, we changed the Webpack config: Fill the Caps for it to work on your env.

webpack: {
    configure: (webpackConfig) => {
      const ignoreWarnings = [
        {
          message:
            /Failed to parse source map from '\/YOUR_REPO_PATH/node_modules\/froala-editor\/js\/languages\/YOUR_LANGUAGE_FILE.js.map' file: Error: ENOENT: no such file or directory, open '\/YOUR_REPO_PATH\/node_modules\/froala-editor\/js\/languages\/YOUR_LANGUAGE_FILE.js.map'/,
        },
      ];

      return { ...webpackConfig, ignoreWarnings };
    },
  },

[kemusag]

@AGallouin thanks for the hint! That's definitely an option. It's not fixing the real issue though, but at least I'd get rid of the ugly errors :)