Bug: "Unsafe assignment to innerHTML" warning from Mozilla addons linter

[tdriley]

Our Browser Extension addon seems to be stuck in review with Mozilla, and their submission service is feeding back (what appear to be ESLint warnings), saying "Unsafe assignment to innerHTML."

I can recreate the warnings by running the Mozilla addons-linter on our extension's dist files and removing react-dom prevents the warnings, but then of course there is no ReactDOM.render func to render the react app onto the page.

Is there any alternative to react-dom without moving away from react completely, or a way to prevent the assignment of .innerHTML from being in the dist files of a react app?

React version: 16.9.0

Steps To Reproduce

1. Build a Web Extension addon using react apps for the Popup and Options UIs.
2. Use the Mozilla addons-linter npm package to lint the dist files.

Link to code example: https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f25972/packages/react-dom/src/client/setInnerHTML.js#L63

// Any src which imports the react-dom package will result in dist files which trigger the linter warnings.
import ReactDOM from "react-dom"

System: OS: macOS 10.15.7 Binaries: Node: 12.2.0 - ~/.nvm/versions/node/v12.2.0/bin/node npm: 7.5.2 - ~/.nvm/versions/node/v12.2.0/bin/npm npmPackages: @babel/core: ^7.5.5 => 7.5.5 @babel/preset-env: ^7.5.5 => 7.5.5 @babel/preset-react: ^7.0.0 => 7.0.0 babel-jest: ^24.9.0 => 24.9.0 babel-loader: ^8.0.6 => 8.0.6 babel-plugin-emotion: ^10.0.19 => 10.0.19 jest: ^24.9.0 => 24.9.0 webpack: ^4.39.2 => 4.39.2

The current behavior

It is not possible to build Web Extensions with react which do not trigger the "Unsafe assignment to innerHTML" warnings from the Mozilla addons linter.

The expected behavior

It is possible to build Web Extensions with react which do not trigger the "Unsafe assignment to innerHTML" warnings from the Mozilla addons linter.

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[gBasil]

Hopefully this will eventually receive a setting or something, it's still an issue.

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[ihsanalikapahi01]

Please reopen this as it is not sorted out yet

[GabenGar]

Can it even be sorted out? Pretty sure dangerouslySetInnerHTML relies on Element.innerHTML to work. The only way out of it is to write the react module in such way so dangerouslySetInnerHTML gets tree-shaken out of bundle if it's not used.