ReferenceError: Channel is not defined

[phildionne]

Hi there!

I've just proceeded with a fresh deploy of Accent on Heroku, and the following exception is thrown in the Chrome console:

accent-webapp-10df40d95b1c8456ee514285f8ddaa33.js:1577 Uncaught (in promise) ReferenceError: Channel is not defined
    at e.Socket.channel (accent-webapp-10df40d95b1c8456ee514285f8ddaa33.js:1577)
    at l.getChannel (accent-webapp-10df40d95b1c8456ee514285f8ddaa33.js:1490)
    at new a (accent-webapp-10df40d95b1c8456ee514285f8ddaa33.js:316)
    at i.createComponent (vendor-86aac227e92f2d61b8b02451e7a2b090.js:3785)
    at Object.create (vendor-86aac227e92f2d61b8b02451e7a2b090.js:396)
    at Object.evaluate (vendor-86aac227e92f2d61b8b02451e7a2b090.js:2562)
    at Object.evaluate (vendor-86aac227e92f2d61b8b02451e7a2b090.js:2459)
    at zt.evaluateSyscall (vendor-86aac227e92f2d61b8b02451e7a2b090.js:2678)
    at zt.evaluateInner (vendor-86aac227e92f2d61b8b02451e7a2b090.js:2672)
    at zt.evaluateOuter (vendor-86aac227e92f2d61b8b02451e7a2b090.js:2672)
    at or.next (vendor-86aac227e92f2d61b8b02451e7a2b090.js:2737)
    at or.execute (vendor-86aac227e92f2d61b8b02451e7a2b090.js:2736)
    at Gt.handleException (vendor-86aac227e92f2d61b8b02451e7a2b090.js:2683)
    at Kt.handleException (vendor-86aac227e92f2d61b8b02451e7a2b090.js:2697)
    at Ht.throw (vendor-86aac227e92f2d61b8b02451e7a2b090.js:2680)
    at ot.evaluate (vendor-86aac227e92f2d61b8b02451e7a2b090.js:2513)
    at Ht.execute (vendor-86aac227e92f2d61b8b02451e7a2b090.js:2680)
    at $t.rerender (vendor-86aac227e92f2d61b8b02451e7a2b090.js:2698)
    at Wr.render (vendor-86aac227e92f2d61b8b02451e7a2b090.js:551)
    at vendor-86aac227e92f2d61b8b02451e7a2b090.js:574
    at Be (vendor-86aac227e92f2d61b8b02451e7a2b090.js:2458)
    at rn._renderRoots (vendor-86aac227e92f2d61b8b02451e7a2b090.js:573)
    at rn._renderRootsTransaction (vendor-86aac227e92f2d61b8b02451e7a2b090.js:578)
    at rn._revalidate (vendor-86aac227e92f2d61b8b02451e7a2b090.js:578)
    at invoke (vendor-86aac227e92f2d61b8b02451e7a2b090.js:3040)
    at p.flush (vendor-86aac227e92f2d61b8b02451e7a2b090.js:3032)
    at flush (vendor-86aac227e92f2d61b8b02451e7a2b090.js:3043)
    at H._end (vendor-86aac227e92f2d61b8b02451e7a2b090.js:3094)
    at H._boundAutorunEnd (vendor-86aac227e92f2d61b8b02451e7a2b090.js:3052)

The configuration is meant to be a production deploy, where the API and the app are hosted on the same domain. Here are the environment variables:

Here's the environment in accent-webapp/config/environment:

{
  "modulePrefix": "accent-webapp",
  "podModulePrefix": "accent-webapp/pods",
  "environment": "production",
  "rootURL": "/",
  "locationType": "auto",
  "SENTRY": {},
  "EmberENV": {
    "EXTEND_PROTOTYPES": false,
    "LOG_VERSION": false,
    "_APPLICATION_TEMPLATE_WRAPPER": false,
    "_DEFAULT_ASYNC_OBSERVERS": true,
    "_JQUERY_INTEGRATION": false,
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": true
  },
  "APP": {
    "LOCAL_STORAGE": {
      "SESSION_NAMESPACE": "accent-session"
    }
  },
  "API": {
    "WS_HOST": "wss://****.herokuapp.com",
    "HOST": "https://****.herokuapp.com",
    "AUTHENTICATION_PATH": "https://****.herokuapp.com/auth",
    "HOOKS_PATH": "https://****.herokuapp.com/hooks/{0}?project_id={1}&authorization={2}",
    "PROJECT_PATH": "https://****.herokuapp.com/projects/{0}",
    "SYNC_PEEK_PROJECT_PATH": "https://****.herokuapp.com/sync/peek?project_id={0}&language={1}&sync_type={2}",
    "SYNC_PROJECT_PATH": "https://****.herokuapp.com/sync?project_id={0}&language={1}&sync_type={2}",
    "MERGE_PEEK_PROJECT_PATH": "https://****.herokuapp.com/merge/peek?project_id={0}&language={1}&merge_type={2}",
    "MERGE_REVISION_PATH": "https://****.herokuapp.com/merge?project_id={0}&language={1}&merge_type={2}",
    "EXPORT_DOCUMENT": "https://****.herokuapp.com/export",
    "JIPT_EXPORT_DOCUMENT": "https://****.herokuapp.com/jipt-export",
    "PERCENTAGE_REVIEWED_BADGE_SVG_PROJECT_PATH": "https://****.herokuapp.com/{0}/percentage_reviewed_badge.svg",
    "JIPT_SCRIPT_PATH": "https://****.herokuapp.com/static/jipt/index.js"
  },
  "contentSecurityPolicy": {
    "default-src": "'none'",
    "script-src": "'self' 'unsafe-inline' 'unsafe-eval' apis.google.com cdn.ravenjs.com",
    "font-src": "'self'",
    "connect-src": "'self' wss://****.herokuapp.com https://****.herokuapp.com https://www.googleapis.com https://sentry.io",
    "img-src": "* data:",
    "style-src": "'self' 'unsafe-inline'",
    "media-src": "'self'",
    "frame-src": "accounts.google.com"
  },
  "flashMessageDefaults": {
    "timeout": 5000,
    "destroyOnClick": false,
    "extendedTimeout": 300,
    "priority": 200,
    "sticky": false,
    "showProgress": false,
    "type": "info",
    "types": [
      "info",
      "success",
      "error",
      "socket"
    ],
    "injectionFactories": []
  },
  "contentSecurityPolicyHeader": "Content-Security-Policy-Report-Only"
}

I have tried, without success:

• Rebuilding the slug after changing environment variables
• Setting/unsetting API_HOST

Any idea what's the issue here? thanks :)

[simonprev]

Yep, I just fixed it: https://github.com/mirego/accent/commit/1f8b8d4937a8672324d93e9a4e475e3661fcff1c

Shame on me for not trying this locally before pushing changes in master… 🤦‍♂

Technical details u in visual mode in my Vim setup puts everything in lower case. I never once used this feature intentionally 😄

[phildionne]

Awesome! thanks!