Uncaught ReferenceError: REPLConsole is not defined

[aguynamedben]

I'm trying to switch my project from better_errors to web-console. When I install web-console 3.5.0 and try to use <% console %> or generate an error page, the error page shows up without any REPL available. In my JavaScript console I see this error:

Uncaught ReferenceError: REPLConsole is not defined

It looks like REPLConsole is a JavaScript library downloadable via NPM. I don't see anything in the web-console documentation telling me I need to install/configure any JavaScript assets. Do I need to include another gem or add a line to my application.js to get REPLConsole to be present? Should it "just work"?

Thanks for your work on this gem, I've heard it's faster that better_errors and am looking forward to switching.

[aguynamedben]

A bit more information: I'm on Rails 5.0.0.1, so my Rails development server is Puma:

$ rails s
=> Booting Puma
=> Rails 5.0.0.1 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.4.0 (ruby 2.3.1-p112), codename: Owl Bowl Brawl
* Min threads: 10, max threads: 10
* Environment: development
* Listening on tcp://localhost:3000

I ensured that the cause was not being on the web-console IP whitelisted (i.e. I don't see the log message that gets shown when you hit the app from a non-local IP address)

[gsamokovarov]

Hey, it should just work. Can you give me a bit more context? Maybe what kind of gems you have installed and the full browser console log?

[aguynamedben]

@gsamokovarov Thanks for taking a look at this. I upgrade to Rails 5.1.1 and web-console 3.5.1, and I'm still seeing this.

When I insert raise "wat" into the first line of a controller action:

When I insert <% console %> into a view:

Other gem versions, I'm not sure which might be relevant:

• puma 3.8.2
• sprockets 3.7.1
• less-rails 2.7.1
• sass-rails 5.0.6

My config/initializers/assets.rb

# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
Rails.application.config.assets.precompile += %w(
  admin.js admin.css
  application-onboarding.js application-onboarding.css
  react-server.js components.js
  google_analytics/campaign-loader.js
)

Rails.application.config.assets.paths << Rails.root.join("vendor", "assets")
Rails.application.config.assets.precompile << %r(Font-Awesome/fonts/[\w-]+\.(?:otf|eot|svg|ttf|woff|woff2?)$)

I also spent a bunch of time messing with other gems in my group :development do block of my Gemfile, and removing them didn't seem to do anything. The REPLConsole JavaScript object that is missing seems to come from an NPM package. We use Bower+application.js to manage client-side assets, but the repl-console npm package doesn't have a Bower file (I know Bower is old) so I couldn't try my hacks to get it loading on the client-side myself.

How is the REPLConsole JavaScript object supposed to make it onto the page? Could there be some oversight on my part or in the gem where that front-end asset isn't being included correctly?

I don't know what the "Invalid or unexpected token" message is referring to, but by Googling/StackOverflowing it looks like that error can happen if bad characters make their way to Chrome, so it could be some problem with asset compilation? Not sure.

Thanks again. Let me know if any more info would be helpful.

[aguynamedben]

More digging in Safari, which seems to provide better errors:

The first error, SyntaxError: Unexpected EOF points to this section of the code:

The second error, ReferenceError: Can't find variable: REPLConsole points to this section of the code:

![use__magic_link__approach_for_authentication_by_kdeggelman_ pull_request__2240 _firstroundcapital_network(https://cloud.githubusercontent.com/assets/107841/26220380/3b4d3862-3bc7-11e7-8e9c-1aee75bd450f.png)

The third error, undefined is not an object (evaluating 'resizerElement.addEventListener') points to this section of the code:

FWIW I'm also using Turbolinks 5.0.1, but I don't think this is happening late enough in the requests cycle for Turbolinks to be messing with anything. The first error looks like the cause to me, somehow the rendered HTML has JavaScript with an unclosed string

var consoleInnerHtml = "<div class='resizer layer'><\/div>

[aguynamedben]

I just looked at this for 2 hours and I think it might be a regression with Rails 5.1 or a bad assumption about the capabilities of JavaScript escaping within ERB/rendering.

The problem is that the gem ends up outputting JavaScript onto the page that has a line break in it, which is not supported by JavaScript. That results in the SyntaxError: Unexpected EOF error. See lines 4160 through 4170 in my screenshot above referencing "the first error". As the gem renders consoleInnerHtml, the value for that string gets inadvertently split among multiple lines, causing the error.

Here's the files I'm looking at to determine what's going on:

• https://github.com/gsamokovarov/web-console/blob/eb8601e8c73bf9742da4f716e0a8d78c81901931/lib/web_console/templates/console.js.erb#L254
• https://github.com/gsamokovarov/web-console/blob/eb8601e8c73bf9742da4f716e0a8d78c81901931/lib/web_console/view.rb#L25
• https://github.com/rails/web-console/blob/master/lib/web_console/templates/_inner_console_markup.html.erb
• In Rails, https://github.com/rails/rails/blob/55f9b8129a50206513264824abb44088230793c2/actionview/lib/action_view/helpers/javascript_helper.rb#L25

I believe that web-console is either making faulty assumptions about how JavaScript is being escaped by <%= j yield %> (in inlined_string.erb) or in the render call in render_inline_string, or that Rails' escape_javascript had some behavior change. Another note is that in Rails 5.1 (I think?) Rails moved ERB rendering from Erubis to Erubi, see rails/rails#27757 But I believe I saw this same behavior with Rails 5.0.0.1, so I'm not sure if nuanced differences between Erubis and Erubi would be the cause.

This multi-line JavaScript string problem happens with the following variables: consoleInnerHtml, promptBoxHtml, consoleStyleCss. There are 2 workaround or possible fixes.

1. Remove newlines from the template files. This is especially messy with style.css.erb
2. In inlined_string.erb, change "<%= j yield %>" to <%= j yield %>. That uses a new ES6 feature called template literals (http://stackoverflow.com/a/805113/3516664) to solve the problem and allow the multi-line string to be parsed by most browsers. This seems like a fine solution to me. Even though browser support is limited, this page is used by developers and template literals are supported on modern versions of Chrome, Firefox, IE, and Safari.

Hopefully this helps. There might be an easy way to fix it by rendering the templates a bit differently, but after a few hours of messing with it I couldn't get it quite right without using ES6 template literals. I'm not sure why the newlines aren't being removed correctly, and there are multiple levels of rending going on so it's hard to track.

Thanks for the time you put into this gem.

[gsamokovarov]

@aguynamedben thanks for the investigation. I'm pretty curious why this happens only to you know. I would have expected a lot more reports about that. Is your Gemfile sensitive? Can you publish it somewhere?

[aguynamedben]

@gsamokovarov It's for a private project, so I just emailed it to you. I'll post any further updates to this thread though. Thanks for helping me look into it.

[eanders]

I'm seeing the same issue on Rails 5.1.4 the fix above works: aguynamedben@73d0cd0