Getting "arr is undefined" in Firefox
shubham2270 opened this issue · comments
Hello,
We are using Pica 5.1.0 for resizing profile picture, in Firefox (Currently checked on v82) as soon as I select image from file dialog it is giving error err is undefined but in Chrome and Edge it is working fine.
Following is the error message and stack:
columnNumber: 128
fileName: "http://localhost:8080/app.bundle.js line 12939 > eval"
lineNumber: 1642
message: "arr is undefined"
stack: "_iterableToArrayLimit@webpack-internal:///./node_modules/pica/dist/pica.js:1642:128\n_slicedToArray@webpack-internal:///./node_modules/pica/dist/pica.js:1638:66\nprocessStages@webpack-internal:///./node_modules/pica/dist/pica.js:2132:42\n[\"/\"]</Pica.prototype.resize/<@webpack-internal:///./node_modules/pica/dist/pica.js:2163:12\npromise callback*[\"/\"]</Pica.prototype.resize@webpack-internal:///./node_modules/pica/dist/pica.js:1875:22\n_callee$@webpack-internal:///./src/utils/image.js:42:25\ntryCatch@webpack-internal:///./node_modules/regenerator-runtime/runtime.js:45:40\ninvoke@webpack-internal:///./node_modules/regenerator-runtime/runtime.js:271:30\ndefineIteratorMethods/</prototype[method]@webpack-internal:///./node_modules/regenerator-runtime/runtime.js:97:21\nasyncGeneratorStep@webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24\n_next@webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:27\n_asyncToGenerator/</<@webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator.js:32:12\n_asyncToGenerator/<@webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator.js:21:12\nresizeImage@webpack-internal:///./src/utils/image.js:62:17\nuploadProfileFile$@webpack-internal:///./src/sagas/user.js:367:82\ntryCatch@webpack-internal:///./node_modules/regenerator-runtime/runtime.js:45:40\ninvoke@webpack-internal:///./node_modules/regenerator-runtime/runtime.js:271:30\ndefineIteratorMethods/</prototype[method]@webpack-internal:///./node_modules/regenerator-runtime/runtime.js:97:21\nnext@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:1181:29\nproc@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:1132:3\nrunForkEffect/<@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:609:21\nimmediately@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:80:12\nrunForkEffect@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:608:14\nrunEffect@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:1228:19\ndigestEffect@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:1295:19\nnext@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:1185:21\ncurrCb@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:1275:9\ntakeCb@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:527:7\nput@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:363:14\nstdChannel/chan.put/<@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:400:10\nexec@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:55:5\nflush@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:111:9\nasap@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:70:5\nstdChannel/chan.put@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:399:9\nsagaMiddleware/</<@webpack-internal:///./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js:1436:17\ncreateThunkMiddleware/</</<@webpack-internal:///./node_modules/redux-thunk/es/index.js:12:16\nmiddleware/</<@webpack-internal:///./node_modules/redux-first-router/dist/connectRoutes.js:317:30\nsegmentActionMiddleware/</<@webpack-internal:///./src/actions/segmentMiddleware.js:146:14\ndispatch@http://localhost:8080/home:1:28546\nbindActionCreator/<@webpack-internal:///./node_modules/redux/es/redux.js:485:12\nProfileMenu/handleFileChange<@webpack-internal:///./src/components/filter/Profile/ProfileMenu.js:79:21\ncallCallback@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:189:14\ninvokeGuardedCallbackDev@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:238:16\ninvokeGuardedCallback@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:293:31\ninvokeGuardedCallbackAndCatchFirstError@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:307:25\nexecuteDispatch@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:390:42\nexecuteDispatchesInOrder@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:415:20\nexecuteDispatchesAndRelease@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:3279:29\nexecuteDispatchesAndReleaseTopLevel@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:3288:10\nforEachAccumulated@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:3260:8\nrunEventsInBatch@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:3305:21\nrunExtractedPluginEventsInBatch@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:3515:19\nhandleTopLevel@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:3559:36\nbatchedEventUpdates$1@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:21903:12\nbatchedEventUpdates@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:1061:12\ndispatchEventForLegacyPluginEventSystem@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:3569:24\nattemptToDispatchEvent@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:4268:44\ndispatchEvent@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:4190:41\nunstable_runWithPriority@webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:653:12\nrunWithPriority$1@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:11062:10\ndiscreteUpdates$1@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:21919:12\ndiscreteUpdates@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:1072:12\ndispatchDiscreteEvent@webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:4169:18\n"
This is from webpack.js:
module.exports = {
resolve: {
alias: {
pica: "pica/dist/pica.js",
src: path.resolve(__dirname, "src")
},
extensions: [".js", ".jsx", ".es7"]
}
}
This is how we are using pica in our app:
const pica = require("pica")({ features: ["js", "ww", "cib"] });
const resizedCanvas = document.createElement("canvas");
resizedCanvas.height = 128;
resizedCanvas.width = 128;
const blobToFile = (theBlob, fileName) => {
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
};
const resizeImage = async (originalImage: Object): Promise<File> => {
const { filename } = originalImage;
const { filetype } = originalImage;
const result = await pica.resize(originalImage, resizedCanvas, {
unsharpRadius: 0.6,
unsharpThreshold: 2
});
const blob = pica.toBlob(result, filetype, 0.9);
const resizeImageFile = blobToFile(blob, filename);
return resizeImageFile;
};
export default resizeImage;
This is original Image we are passing:
File {
lastModified: 1582088492385
name: "43.jpg"
size: 3705
type: "image/jpeg"
webkitRelativePath: ""
}
Sorry, i can not help with debugging your code. Need more simple example how to reproduce, as proof of problem.
Here is online demo. Use it to reproduce. Or create a minimal demo with plain html/js.
I had tried to create same example here https://codesandbox.io/s/pica-js-error-firefox-3sme6 , this time the error is different getting stages.shift() is undefined in firefox but same code working fine in chrome giving no errors. This might also be related to the error I am facing.
I could no make it work at all anwhere.
Here is online demo http://nodeca.github.io/pica/demo/. Can you reproduce your problem there and tell OS/Browser version + image example? If not - just use demo as template for your code.
Closing as stale. Also see https://github.com/nodeca/image-blob-reduce#known-issues