Wysiwyg-editor: Does not compile with Webpack 5 (using Webpack Encore)

[jmsche]

Expected behavior.

Webpack to successfully build Froala Editor

Actual behavior.

I'm getting this error:

Module build failed: Module not found:
./node_modules/froala-editor/js/plugins.pkgd.min.js contains a reference to the file crypto.
This file can not be found, please check it for typos or update it if the file got moved.

Steps to reproduce the problem.

Using this simple configuration: https://gist.github.com/jmsche/5ce6d06b4e48c7981bdf94e1fd05b2a9

I have the issue when upgrading Webpack Encore from 0.33.0 to 1.0.0+.
The main difference is that Encore uses Webpack 5 instead of Webpack <= 4.

Editor version.

Latest (3.2.6)

OS.

Linux

Browser.

N/A

More info

@Lyrkan helped me to fix it using Webpack configuration (so in my own files) but we think it should be fixed in Froala itself.
Here's something that may be related: https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-nodejs-polyfills-removed

Fixed it locally using these steps:

• adding crypto-browserify readable-stream buffer to my vendors
• adding this to the end of webpack.config.js:

module.exports.resolve.fallback = {
    crypto: require.resolve('crypto-browserify'),
    stream: require.resolve('readable-stream')
};

[RicoFactset]

Hi,

I am using webpack encore 1.1.0 and get "TypeError: Cannot set property 'fallback' of undefined"

"resolve" is an unresolved variable in module.exports when using in webpack.config.js

module.exports.resolve.fallback = {
crypto: require.resolve('crypto-browserify'),
stream: require.resolve('readable-stream')
};

[RicoFactset]

I solved it with:

yarn add node-polyfill-webpack-plugin

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

.addPlugin(new NodePolyfillPlugin())

[lpfrenette]

Thanks @RicoFactset , but Froala should correct this on their side. At the price they charge for this product.