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.

[challet]

Froala should correct this on their side. At the price they charge for this product.

Like many of the issues that sit in this repo

[mxlle]

This is an even bigger issue with Angular 12!
The webpack config is not exposed in Angular.

I found a workaround, but it's 🥴

I had to add a path to an empty file to the tsconfig
(alternatively could have pointed to 'crypto-browserify', but we don't seem to need it for our case)

"compilerOptions": {
    ...
    "paths": {
      "crypto": ["./empty"]
    }
},

Also see the related angular-cli issue

[testacode]

Having the same issue with webpack 5. Please fix it.

[AkshayCM]

Thanks for your feedback.
This issue is not reproducible or have been found to be fixed on the latest Froala release v4.0.8.
Can you please upgrade and check?

[Panman82]

FWIW, the ember addon also had to deal with this issue.

TLDR, the existence of the crypto file causes errors when Webpack tries to include all files in the plugins folder.

The ember addon provides configuration options to list the various plugins, languages, and themes that a consumer wants to use, and the addon takes care of the actual import. This is done using a dynamic import() statement, which then causes Webpack to include all possible files in the build (including all files in the plugin folder). For whatever reason, cryptojs.min.js is not importable and causes an error. To work around this, you have to add Webpack config to exclude that file.

webpack: {
  resolve: {
    fallback: {
      crypto: false,
    },
  },
},

[AkshayCM]

Thank you for your feedback. The request has been reported to the product management team for evaluation and consideration for an upcoming release.

[richardkmichael]

See #4390 also. Please fix this. :-)