Wysiwyg-editor: WARNING: Replace fill-available to stretch, because spec had been changed

[JaxonWright]

Expected behavior.

Not have warnings like this when building node dependency with a project.

Actual behavior.

Steps to reproduce the problem.

Build a project that has this project as one of its npm dependencies

Editor version.

3.1.1

OS.

Windows 10 1909

Browser.

Irrelevant

[flonussi]

This exact issue appeared today for me also.
But I'm stil on 3.1 and didn't touch or update froala or any other dependency of my project in weeks, but today this warning started to appear...
In addition to that issue I also get a warning about a crypto module, but as I already said, I didn't touch anything

[jvmills]

Same for me

`WARNING in ./node_modules/froala-editor/css/froala_editor.pkgd.min.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/froala-editor/css/froala_editor.pkgd.min.css)
Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

(7:52021) Replace fill-available to stretch, because spec had been changed
@ ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/sass-loader/dist/cjs.js??ref--5-4!./resources/sass/app.scss) 9:10-173
@ ./resources/sass/app.scss`

[marctaule]

Same for me...

[wes337]

Same, can this please get fixed?

[qingmang]

Same for me...

[arwinvdv]

I had contact with Froala today and they will fix the issue in v3.2.4 what will be released in a few months.

[devstack-be]

@arwinvdv Thanks for the information ;)

[micheleh]

Is there a way to work around this until a fix is provided?

[devstack-be]

normally npm is not blocking the script. it's just a warning. If you want to fix it, you can explore the package, do a search and replace and replace "fill-available" to "stretch". But it's only temporary and it's better waiting a real fix.

[paras-deshbhratar]

Even I am also getting the same warning in console.
Thanks @arwinvdv. Will wait till they release v3.2.4

[marcodeluca]

Thanks for the update, having the same issue.

[marting169]

gracias!

[manshu]

I've the same issue. Any update on this?

[ffjanhoeck]

Same issue :)

[rockingthecode]

having same problem here. i have been searching for an hour and its frustrating. i hope it fixed very soon.

[kylepeeler]

+1, seeing same issue here as well

[robjac]

[taylormaguire]

Hi Everyone, as noted earlier, it looks like they will fix this in v3.2.4, however if you want to get rid of the error you can open the froala_editor.pkgd.min.css file in your node_modules and do a search and replace

Search: fill-available
Replace: stretch

Save the file and now your builds wont fail.

Warning: as you are editing a vendor node library file, any npm update or re-install of the package will require these changes gain until they fix in the future update.

[kylepeeler]

Is there a fix that does not require modifying node_modules?... This is not a fix that could be done in any situation but locally, considering node_modules aren't committed (at least for my project...)

[herbertharriola]

Is there a fix that does not require modifying node_modules?... This is not a fix that could be done in any situation but locally, considering node_modules aren't committed (at least for my project...)

I have the same problem!! It would be nice for them to release the fix soon!!

[shroomlife]

Same problem here. Is there a fix to surpress thiss message in the meantime?

[iicdii]

I suppressed the message by add string-replace-loader in webpack config rules.

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /froala_editor\.pkgd\.min\.css$/,
        loader: 'string-replace-loader',
        options: {
          search: /fill-available/g,
          replace: 'stretch'
        }
      }
    ]
  }
}

[shroomlife]

I suppressed the message by add string-replace-loader in webpack config rules.

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /froala_editor\.pkgd\.min\.css$/,
        loader: 'string-replace-loader',
        options: {
          search: /fill-available/g,
          replace: 'stretch'
        }
      }
    ]
  }
}

works for me! thank you a lot @iicdii 👏👏👏

[Taskle]

Hi folks! I saw 3.2.4 came out yesterday, and admittedly I've been tracking it closely for the fix to this issue per the comment below:

I had contact with Froala today and they will fix the issue in v3.2.4 what will be released in a few months.

I didn't see it in the release notes:
https://github.com/froala/wysiwyg-editor/releases/tag/v3.2.4

and updating, I see the issue persists.

Can someone from Froala kindly advise? For those of us who don't want to manually edit our third party packages, it would be great to get an update!

[EthanRBrown]

Agreed, @Taskle ! This has been a HUGE thorn in our sides...I know it may seem like a small thing, but we have a clean console policy, and the time it takes to sort past those warnings every time we see something real that needs to be addressed adds up. Plus it's just a giant eyesore in something we take pride in. This needs to be fixed! If Froala doesn't respond to this issue soon, we'll certainly be looking towards another rich text editor and not renewing our subscription.

I was so happy to see that 3.2.4 dropped, and you can imagine my disappointment when I upgraded, hoping to finally see a clean console and....

[yuriy-vasilyev]

@EthanRBrown, how many options do we have out there? :)

[arwinvdv]

I just checked the new version and as said above, warnings still exists. So I looked to the mail they send me and I see that I wrote it wrong here.
They wrote version version 3.4 not 3.2.4... So we have to wait a few months more. Until then I think the fix of @iicdii will work.

[kylepeeler]

So since this still seems to be an issue (🙄)... here is how we handled it in our app... I just brought in webpack-filter-warnings-plugin, and applied it to my webpack config like so:

const baseConfig = {
  name: pkg.name,
  entry: [paths.appIndexJs, 'whatwg-fetch'],
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/',
  },
  module: {
    rules: [
      configureFontLoader(),
      configureImageLoader(),
      configureIconLoader(),
    ],
  },
  resolve: resolveConfig,
  plugins: [
    new WebpackNotifierPlugin({
      title: 'Webpack',
      excludeWarnings: true,
      alwaysNotify: true,
    }),
    new webpack.ProvidePlugin({
      FroalaEditor: 'froala_editor.min.js/froala_editor.pkgd.min.js',
    }),
    /*
    @HACK: Froala currently has a warning that postcss throws, and the only solution from the author is basically to edit node_modules ~until 3.2.4 is released~...
    Well since that won't work for us (node_modules is not committed), I have decided to filter the warnings so it doesn't make our logs ginormous between now
    and when it is released.

    Relevant Issue: https://github.com/froala/wysiwyg-editor/issues/3989

    @FUTURE: remove me + corresponding plugin ~when froala-editor is upgraded >=3.2.4~ (also remember to update storybook/main.js)!
    */
    new FilterWarningsPlugin({
      exclude: /Replace fill-available to stretch/,
    }),
  ],
};

💨 Poof, no more warnings 😄

[Taskle]

For those of us that are using React's CRA and not ejected to use custom webpack configs, sounds like this is only an option if we either eject or use CRACO. Sounds like we're stuck waiting until 3.4... if folks who are also using CRA have thoughts on a workaround without a ton of work/changes/additions, feel free to share! Indeed this has been the only warning lingering in our app for months, so unfortunate that it will continue to linger.

[kgish]

Please fix!

[nirvparekh]

I updated to v3.2.5
Not fixed yet.

[ansh-les]

@EthanRBrown Please let me know if you do end up switching away from Froala. And also what do you switch to.

[EthanRBrown]

@ansh-les I will. At this point, I'm tempted to go with CKEditor 5, though I haven't investigated the options yet. Quill is also very interesting, more of a new kid on the block.

[a-bit-too-literal]

This is also causing us to reassess our choice of froala. Does anyone know why it is taking so long to resolve?

[kgish]

This is VERY annoying indeed.

For the time being I have added the following script to my package.json file:

 "froala:css:fix": "sed -i 's/fill-available/stretch/g' ./node_modules/froala-editor/css/froala_editor.pkgd.min.css",

However, this needs to be executed after every npm install.

[dzetah]

@kgish Nice one-liner, worth placing it inside a postinstall script so it runs automatically :)

[JCanlett]

Glad I'm not alone here. Just upgraded to 3.2.6 after dealing with the crazy licensing issues.. Now console is full of warnings. Is this still slated for 3.4? that seems like a long way out. Will be on Angular 12 by then.

[ac-andyta]

You can also have a node solution to support all systems (Windows):

Create a file called patch.js in the same folder as your package.json:

const fs = require('fs');

const froalaMinCss = 'node_modules/froala-editor/css/froala_editor.pkgd.min.css';
fs.readFile(froalaMinCss, 'utf8', function (err, data) {
  if (err) {
    throw err;
  }
  const result = data.replace(/fill-available/g, 'stretch');
  fs.writeFile(froalaMinCss, result, 'utf8', function (e) {
    if (e) throw e;
  });
});

Essentially, it does the same thing as the sed command.

Then, add it to your postinstall in package.json like "postinstall": "node patch.js" or "postinstall": "... && node patch.js" if you have other commands.

Finally, run npm install.

[dejanmartinovic]

The issue has already been solved. The fix will be available in version 3.3.3 (mid-March at the latest). Thanks

[msalmankarim]

Experiencing the same issue :)

[nirvparekh]

The issue has already been solved. The fix will be available in version 3.3.3 (mid-March at the latest). Thanks

March has ended. not fixed yet.

[adrianksiezarczyk]

March has ended. not fixed yet.

It's 30.03, UTC 10AM. They still have time.

[QaisMakani]

I see a PR open since Aug, 2020 that fixes this issue:
https://github.com/froala/wysiwyg-editor/pull/4006

The issue and the PR are not linked though. Can we please get it merged?

[gekikara404]

The issue has already been solved. The fix will be available in version 3.3.3 (mid-March at the latest). Thanks

March has ended. not fixed yet ( 2 )

[HernanGH]

Same issue here! @dejanmartinovic do you know when the version 3.3.3 will be available?