Profile picture cropping modal issue

Readerly

I stand corrected. This error pops into the console of the browser:

TypeError: a is not a constructor
Stack trace:
t.handleImageCrop/</<@http://forum.driversbydesign.com/assets/src/modules/pictureCropper.js?v=lsb0i4lsb7s:1:985
e/<@http://forum.driversbydesign.com/assets/nodebb.min.js?v=lsb0i4lsb7s:1:429645

Readerly

The previous error was from Firefox. What follows is from Chrome:

translator.js:547 TypeError: a is not a constructor
at pictureCropper.js?v=lsb0i4lsb7s:1
at translator.js:545
at <anonymous>
(anonymous) @ translator.js:547
Promise rejected (async)
e @ translator.js:546
(anonymous) @ pictureCropper.js?v=lsb0i4lsb7s:1
setTimeout (async)
(anonymous) @ benchpress.js:227
Promise resolved (async)
l @ benchpress.js:226
t.handleImageCrop @ pictureCropper.js?v=lsb0i4lsb7s:1
(anonymous) @ pictureCropper.js?v=lsb0i4lsb7s:1
FileReader (async)
o @ pictureCropper.js?v=lsb0i4lsb7s:1
(anonymous) @ pictureCropper.js?v=lsb0i4lsb7s:1
dispatch @ jquery.js:5206
g.handle @ jquery.js:5014

PitaJ

Can you try running ./nodebb build and restarting?

Readerly

Thanks for the suggestion!

I ran ./nodebb build on my local install of NodeBB. Then I pushed it to Heroku. Here's the build output:

Seans-Mac-mini:nodebb seanmiller$ 25/10 16:57:15 [6584] - info: 25/10 16:57:15 [6584] - info: [build] 25/10 16:57:15 [6584] - info: [build] 25/10 16:57:15 [6584] - info: [build] 25/10 16:57:15 [6584] - info: [build] 25/10 16:57:15 [6584] - info: [build] 25/10 16:57:15 [6584] - info: 25/10 16:57:15 [6584] - info: [build] 25/10 16:57:15 [6584] - info: [build] 25/10 16:57:15 [6584] - info: [build] 25/10 16:57:23 [6584] - info: [build] 25/10 16:57:23 [6584] - info: [build] 25/10 16:57:23 [6584] - info: [build] 25/10 16:57:24 [6584] - info: [build] 25/10 16:57:25 [6584] - info: [build] 25/10 16:57:25 [6584] - info: 25/10 16:57:29 [6584] - info: [build] 25/10 16:57:31 [6584] - info: [build] 25/10 16:57:33 [6584] - info: [build] 25/10 16:57:33 [6584] - info: ./nodebb build
[build] Building in parallel mode
plugin static dirs build started
requirejs modules build started
client js bundle build started
admin js bundle build started
client side styles build started
[build] admin control panel styles build started
templates build started
languages build started
sounds build started
admin js bundle build completed in 8.209sec
client js bundle build completed in 8.39sec
sounds build completed in 8.483sec
plugin static dirs build completed in 9.07sec
client side styles build completed in 9.977sec
[build] admin control panel styles build completed in 9.975sec
templates build completed in 14.064sec
requirejs modules build completed in 16.125sec
languages build completed in 17.943sec
[build] Asset compilation successful. Completed in 17.966sec.

After the Heroku instance restarted, I logged in and tried to crop a profile picture. Unfortunately, the problem persists.

julian

That's quite odd! I'm assuming the picture upload modal works fine here?

Readerly

Hi Julian,

Yes, I was able to upload and crop my profile picture here.

Readerly

So here's the line referenced in the error message.

File: public/src/modules/translator.js

translate: function translate(text, language, callback) {
// TODO: deprecate?

		var cb = callback;
		var lang = language;
		if (typeof language === 'function') {
			cb = language;
			lang = null;
		}

		if (!(typeof text === 'string' || text instanceof String) || text === '') {
			return cb('');
		}

		Translator.create(lang).translate(text).catch(function (err) {
			warn('Translation failed: ' + err.stack);
		}).then(function (output) {
			cb(output);
		}).catch(function (err) {
			console.error(err);
		});
	},

PitaJ

Try running npm i cropperjs@latest in the nodebb directory and then rebuilding and restarting.

Edit: I tried accessing a few files that should exist on your site. It looks like files such as these:

build/public/src/modules/cropper.js
build/public/src/modules/Chart.js
build/public/src/modules/mousetrap.js

...aren't there. If you're using Heroku, make sure those files are not ignored in your git repo.

Readerly

That's odd. I'm looking in the build/public/src/modules/ directory. Those files you mention are aliases.

PitaJ

Yes, they are symlinks to files in node_modules.

Readerly

The .gitignore file in the NodeBB directory includes node_modules/

Could that be why those 3 files aren't being pushed to Heroku?

PitaJ

I doubt it, because node_modules should be installed when Heroku starts up, otherwise NodeBB wouldn't work at all.

It could be that they are absolute symlinks, which would break when sent up to Heroku. Can you inspect the link targets?

readlink build/public/src/modules/cropper.js etc

Readerly

Here's the link target for build/public/src/modules/cropper.js

/node_modules/cropperjs/dist/cropper.min.js

And build/public/src/modules/Chart.js:

node_modules/chart.js/dist/Chart.min.js

And build/public/src/modules/mousetrap.js:

node_modules/mousetrap/mousetrap.min.js

PitaJ

Are those the exact readouts from readlink?

I get different results.

Readerly

Exact readouts:

/Users/seanmiller/Documents/nodebb/NodeBB/node_modules/cropperjs/dist/cropper.min.js
/Users/seanmiller/Documents/nodebb/NodeBB/node_modules/chart.js/dist/Chart.min.js
/Users/seanmiller/Documents/nodebb/NodeBB/node_modules/mousetrap/mousetrap.min.js

These look pretty absolute, yes?

PitaJ

Ok so the issue is indeed because the links are absolute. I'll see if I can get a fix. In the meantime, you should be able to use this command on those files:

cp --remove-destination `readlink cropper.js` cropper.js

Readerly

Success! I guess we found a bug. Thanks so much for your help, @PitaJ. It's much appreciated.

Readerly

Hey @PitaJ,

I think I found another absolute symlink:

readlink /build/public/plugins/nodebb-plugin-markdown/styles

gives:

/Users/seanmiller/Documents/nodebb/NodeBB/node_modules/nodebb-plugin-markdown/public/styles

In that same directory, readlink js yields:

/Users/seanmiller/Documents/nodebb/NodeBB/node_modules/nodebb-plugin-markdown/public/js

It may be that all the symlinks are absolute in this build.

Missing a railscasts.css causes this:

404 Not Found
Route Count
/plugins/nodebb-plugin-markdown/styles/railscasts.css 59

PitaJ

Yep those should be fixed as well

Readerly

Hi @PitaJ

I replaced those absolute folder symlinks in the plugins directories with the actual folders and their contents. I'm still getting these errors in my console logs when I load pages, though:

404 Not Found
Route Count
/plugins/nodebb-plugin-markdown/styles/railscasts.css 96
/assets/uploads/profile/1-profileavatar.png 9

The odd thing is that it's only happening in Chrome, not Firefox:

forum.driversbydesign.com/:35 GET http://forum.driversbydesign.com/plugins/nodebb-plugin-markdown/styles/railscasts.css net::ERR_ABORTED
(index):322 GET http://forum.driversbydesign.com/assets/uploads/profile/1-profileavatar.png 404 (Not Found)