Troubleshooting setup

[mikejw]

Describe the bug
UI appearance and behaviour is broken.

To Reproduce
This applies whether using the CDN javascript/css or serving the files after downloading them from "/dist".

Expected behavior
A working UI that looks right.

Screenshots
Attached.

Environment (please complete the following information):
Latest Chrome and Safari.

Additional context
This issue is present whether or not there is any other CSS being imported into the page. i.e. CSS reset code. I've tried with and without.

[mikejw]

I get much better results using version 5.0.5.

However there are no sounds and I can't auto join channels.

 converse.initialize({
            jid: username + '@chat.onlinevibes.net',
            bosh_service_url: 'https://chat.' + WEB_ROOT + '/http-bind',
            keepalive: true,
            authentication: 'prebind',
            prebind_url: 'https://' + WEB_ROOT + '/front/session',
            allow_logout: false,
            show_controlbox_by_default: true,
            roster_groups: true,
            hide_muc_server: true,
            auto_login: true,
            allow_registration: false,
            auto_list_rooms: true,
            auto_reconnect: true,
            muc_nickname_from_jid: true,
            view_mode: 'overlayed',
            debug: true,
            play_sounds: true
        });

[licaon-kter]

10.1.8 works?

[mikejw]

Hi @licaon-kter, thanks for replying. 10.1.8 gives me the same end result as 11.

[licaon-kter]

So it's a setup issue.

Set Converse in Debug mode and capture some browser logs.

[jcbrand]

I agree with @licaon-kter, this looks like a setup issue.

The first screenshot looks like you don't have any of the Converse CSS loaded.

Double check that you're including the CSS file in your HTML.
See here for example:

converse.js/index.html

Line 12 in d7a41b5

<link type="text/css" rel="stylesheet" media="screen" href="/dist/converse.min.css" />

If you do include it, check that it actually loads properly and doesn't return a 404, by looking n the Network tab in your browser's developer console.

[mikejw]

@licaon-kter

debug output:

@jcbrand

I'm including the code like so. Both files are returned with status 200.

<link type="text/css" rel="stylesheet" media="screen" href="/dist/converse.min.css" />
<script src="/dist/converse.min.js" charset="utf-8"></script>

[mikejw]

@licaon-kter by the way the debug output looks the same, as far as I can tell, when using version 5 (which works)

[jcbrand]

The logs show that there is an XMPP connection and it looks like the core code works, the problem appears to be purely CSS based.

For some reason the CSS isn't applied (assuming it's loaded correctly as you said).

Are there any other CSS or JS code loaded in this page?

Check the site DOM via the browser devtools. There should be a converse-root element with the class conversejs.
Inspect that element with the inspector and see whether there are any CSS styles applied to it and/or it's children.

[mikejw]

@jcbrand thanks so much. my bad! I had another javascript include that I don't need. I think it maybe have been importing an older version of converse as well the postcss parser!

Version 11 is working fine now, except for one thing.

When I click on my status (to change it) in the roster pane I get the errors attached.

Thank you for your fine work sir!

[jcbrand]

I'm glad you got it working @mikejw

That error you're seeing is from this function:

converse.js/src/plugins/profile/utils.js

Line 31 in 329c77c

mechanism.mechname === 'EXTERNAL' ||

How are you logged in? Did you make any modifications or customizations?

Can you share your call to converse.initialize?

[mikejw]

Hi @jcbrand!

No modifications.

This is my initialize call:

window.addEventListener("load", () => {
  username = $('#converse-username').data('username');

  converse.initialize({
    jid: username + '@chat.onlinevibes.net',
    bosh_service_url: 'https://chat.' + WEB_ROOT + '/http-bind',
    keepalive: true,
    authentication: 'prebind',
    prebind_url: 'https://' + WEB_ROOT + '/front/session',
    allow_logout: true,
    show_controlbox_by_default: true,
    roster_groups: true,
    hide_muc_server: true,
    auto_login: true,
    allow_registration: false,
    auto_list_rooms: true,
    auto_reconnect: true,
    muc_nickname_from_jid: true,
    view_mode: 'fullscreen',
    debug: true,
    play_sounds: true,
    theme: 'dracula',
    auto_join_rooms: [{'jid': 'welcome@conference.chat.onlinevibes.net', 'nick': username, 'minimized': false}]
  });
});

[jcbrand]

Thanks @mikejw, I've pushed a fix for that error.