Bug: Missing Array.isArray() validation
Bug description
I'm trying to implement a React application for legacy browsers using the @fortawesome/fontawesome-svg-core and @fortawesome/react-fontawesome libraries. However, I came across the following error: 'Unhandled promise rejection TypeError: _hooks[hook].push is not a function'.
While debugging the issue, I traced it back to an attempt to use Array.push() without validating if the object is actually an array. This issue is causing my application to break when I try to run it in older browsers.
The problematic code block is as follows:
if (plugin.hooks) {
var hooks = plugin.hooks();
Object.keys(hooks).forEach(function (hook) {
if (!_hooks[hook]) {
_hooks[hook] = [];
}
_hooks[hook].push(hooks[hook]);
});
}
The solution could be to add a validation:
if(Array.isArray(_hooks[hook])){
_hooks[hook].push(hooks[hook]);
};
It is present in the following files:
js/all.js, line 4070:1
js-packages@fortawesome\fontawesome-free\js\fontawesome.js, line 1237:1
js-packages@fortawesome\fontawesome-free\js\all.js, line 4070:1
js-packages@fortawesome\fontawesome-free\js\fontawesome.js, line 1237:1
js-packages@fortawesome\fontawesome-svg-core\index.js, line 1237:1
js-packages@fortawesome\fontawesome-svg-core\index.mjs, line 1216:1
js-packages@fortawesome\fontawesome-svg-core\plugins.mjs, line 266:1
Example of error reproduction:
- Download Firefox 47.0.2;
- Clone the following repository: vite-react-legacy and open the project;
- Install the dependencies using the command yarn;
- Build the project using the command yarn build;
- Preview the project using the command yarn preview;
- Open the project in Firefox 47 and you will see the error in the console;
- Go back to the project and open the file dist\assets\fontawesome-svg-core-legacy-{some random identifier}.js;
- Add Array validation on line 998:1:
if(Array.isArray(_hooks[hook])){
_hooks[hook].push(hooks[hook]);
};
- Run the command yarn preview again and see the project working.
Reproducible test case
https://github.com/uisam00/vite-react-legacy
Screenshots
This is the error:
when i put the validation in the builded file
if (plugin.hooks) {
var hooks = plugin.hooks();
Object.keys(hooks).forEach(function (hook) {
if (!_hooks[hook]) {
_hooks[hook] = [];
}
if(Array.isArray(_hooks[hook])){
_hooks[hook].push(hooks[hook]);
}
});
}
The error disappears:
Font Awesome version
6.3.0
Serving
Self-hosted
Implementation
SVG+JS
Browser and Operating System
- Firefox 47.0.2
Web bug report checklist
- I have included a test case because my odds go way up that the team can fix this when I do
- I have searched for existing issues and to the best of my knowledge this is not a duplicate
Source: FortAwesome/Font-Awesome