ActionView::Template::Error (ReferenceError: Map is not defined)

[oiahoon]

Actual behavior

while try to update react-rails from 1.5 to 2.3.4,
it seems there is a big change, i've no idea how to fix these problems.
I don't think i am the only person.

System configuration

Sprockets or Webpacker version: i just don't know how to check this
React-Rails version: 2.3.4
Rect_UJS version: i just don't know how to check this
Rails version: 5.1.4
Ruby version: ruby 2.3.3p222 (2016-11-21 revision 56859) [x86_64-linux]
Since I user docker-compose,
Dockerfile: FROM rails:onbuild

---

1. upgrade rails to 5.1.4
2. upgrade react-rails to 2.3.4
3. bundle install
4. modify the application.rb as you mentioned
   
5. rails g react:install
   
6. add prerender: true to my componet
   
7. restart my docker container, then get error:
   
8. below is the debug result by web-console,maybe some help:
   

[BookOfGreg]

Can you upgrade from v1.5 to v1.11 first to make the leap smaller and isolate which change is making your upgrade hard, then upgrade minor versions until you find your breaking change?

Map is an ES6 method in Javascript. If you can't run something due to ES6 Map not defined then likely there is something wrong with how it's converting ES6 to ES5.
I'm going to guess you're using Sprockets as Webpacker is a bit newer than that version.

Debugging other people's closed source is like fishing in the dark for me so I'm going to need more information than that to help you. Let me know how it goes!

Edit: Yep you must be using sprockets as v1.5 didn't have Webpacker support yet.
https://github.com/reactjs/react-rails/tree/v1.5.0/lib/react/server_rendering

[oiahoon]

@BookOfGreg thanks for your reply.
so i can only using ES6 with the last version of react-rails, I need to convert the script from ES5 to ES6, right?
I began to revert my update and restart it by little step as your advise.

[BookOfGreg]

You don't have to only use ES6, we prefer ES6 to ES5 but in general ES5 is more compatible with things.

Now I think about it, if you're using therubyracer as the JS runtime, you may need to swap to mini_racer as mini_racer uses a newer version of Chrome's LibV8 which may enable ES6 features such as Map.

We dropped therubyracer support a few versions back.

[p-salido]

@oiahoon I had this issue, resolved it by adding babel-polyfill.

Step 1: download https://npm-cdn.herokuapp.com/[email protected]/dist/polyfill.min.js (per https://babeljs.io/docs/usage/polyfill/), put it in vendor/assets/javascripts

Step 2: add to application.js or something like vendor/assets/javascripts/vendor.js if you have it:

//= require babel-polyfill.min

[BookOfGreg]

@p-salido that's interesting. I didn't need that module in order to use ES6 in my company's project, I may spend some time seeing why that happens in the new year.

[p-salido]

Depends on your browser. Recent Chromes include the Map part of es6 apparently. For me poltergeist was failing without babel-polyfill.

[oiahoon]

@p-salido i tried to add that polyfill but some new issue occurs. i think i'd better really upgrade by the smallest step.

1. version 1.11.0 works well

2. while i tried version 2.0.0,

   • ./app/assets/javascripts/server_rendering.js

   //= require react-server
   //= require react_ujs
   //= require jquery.min
   //= require core/tether.min
   //= require core
   //= require plugin
   //= require ./components

   • add gem 'mini_racer'

   i got this:
   

   so i cannot use jQuery in prerender, because Prerender processes don't have access to document or window?
   what if i do not use prerender? how can i render it on browser?

[p-salido]

It looks like there are links to the code being compiled in your screenshot, click on them to find out what statement is failing and in which context.

[oiahoon]

ok guys, while I'm giving up server render, and change the assets loads order(via. ISSUE-742 ), then run rake assets:clean.
it works, Amazing!
As server rendering mentions, we cannot use jQuery or sth reference window/document, so i gave up.
hope I'm right. and i'm going to try to upgrade to the latest version of react-rails