Profile picture cropping modal issue

Technical Support
  • I'm new to NodeBB, so please forgive me if this thread is redundant. I did a search but couldn't find a relevant post about the issue I'm having.

    I'm unable to change a profile picture. I can upload a new picture. But the crop modal doesn't seem to have the cropping tools. And when I click "Crop and upload", nothing happens.

    alt text

    Also, I get this error in the browser console, when I load the main page:

    /plugins/nodebb-plugin-markdown/styles/railscasts.css [HTTP/1.1 404 Not Found 0ms]

    Any help would be much appreciated.

  • Are there any browser errors when you try to upload, crop, etc? What version of NodeBB?

  • Thanks for replying! No browser errors. It's version 1.6.1.

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

    TypeError: a is not a constructor
    Stack trace:

  • 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

  • Can you try running ./nodebb build and restarting?

  • 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$ ./nodebb build
    25/10 16:57:15 [6584] - info: [build] Building in parallel mode
    25/10 16:57:15 [6584] - info: [build] plugin static dirs build started
    25/10 16:57:15 [6584] - info: [build] requirejs modules build started
    25/10 16:57:15 [6584] - info: [build] client js bundle build started
    25/10 16:57:15 [6584] - info: [build] admin js bundle build started
    25/10 16:57:15 [6584] - info: [build] client side styles build started
    25/10 16:57:15 [6584] - info: [build] admin control panel styles build started
    25/10 16:57:15 [6584] - info: [build] templates build started
    25/10 16:57:15 [6584] - info: [build] languages build started
    25/10 16:57:15 [6584] - info: [build] sounds build started
    25/10 16:57:23 [6584] - info: [build] admin js bundle build completed in 8.209sec
    25/10 16:57:23 [6584] - info: [build] client js bundle build completed in 8.39sec
    25/10 16:57:23 [6584] - info: [build] sounds build completed in 8.483sec
    25/10 16:57:24 [6584] - info: [build] plugin static dirs build completed in 9.07sec
    25/10 16:57:25 [6584] - info: [build] client side styles build completed in 9.977sec
    25/10 16:57:25 [6584] - info: [build] admin control panel styles build completed in 9.975sec
    25/10 16:57:29 [6584] - info: [build] templates build completed in 14.064sec
    25/10 16:57:31 [6584] - info: [build] requirejs modules build completed in 16.125sec
    25/10 16:57:33 [6584] - info: [build] languages build completed in 17.943sec
    25/10 16:57:33 [6584] - info: [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.

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

  • Hi Julian,

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

  • 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) {
    		}).catch(function (err) {
  • 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:


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

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

  • Yes, they are symlinks to files in node_modules.

  • The .gitignore file in the NodeBB directory includes node_modules/

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

  • 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

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


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


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


  • Are those the exact readouts from readlink?

    I get different results.

  • Exact readouts:


    These look pretty absolute, yes?

  • 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
  • Success! I guess we found a bug. Thanks so much for your help, @PitaJ. It's much appreciated.

Suggested Topics