Production Deployment not work on android browser

[creatorkuang]

I just folk the code and use npm run deploy:prod and then run NODE_ENV='production' npm run start, when i try to test it with android browser,it just show me blank page and i got this error in console:
Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
Chrome Mobile did not has this error .
Any idea of how to solve this ?
I test it with default browser with Galaxy Note3.
The older version (2.0.0-alpha.4) did not have this problem.

[dvdzkwsk]

Try including the babel polyfill:

npm i --save babel-polyfill

And then at the top of ~/src/main.js:

import 'babel-polyfill'

[dvdzkwsk]

It's curious that the old version didn't have this problem... if you can confirm whether the above works or doesn't we can dig into it further accordingly.

[gschwa]

@davezuko I am seeing the same issue with IE 10 and IE 11. I forked your repo here: https://github.com/gschwa/react-redux-starter-kit and added a Dockerfile so I could deploy the production files. What is very annoying and frustrating is when running as "development" to debug the issue the site works! As you can imagine this is critical for my current project so any thoughts would be great.

I can add a Docker readme if you need help getting it going.

[gschwa]

@davezuko even easier to recreate issue:

1. npm run deploy:prod
2. http-server ./dist
3. Open IE11 and try to hit the site

To see how it works when running in "development":

1. open environments.js and change the compiler_public_path to '/'
2. npm run deploy:dev
3. http-server ./dist
4. Open in IE 11 and see that the site works...

[dvdzkwsk]

@gschwa I will try this next time I get access to IE. Does the same issue occur in Chrome/FF?

[gschwa]

@davezuko I tested it in Chrome/FF/Safari with no issues. You can DL a free VM from Microsoft here: https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/mac/

[dvdzkwsk]

Thanks @gschwa, will use that. I'm currently traveling so just don't have the ability to do much actual work. Are you getting the same exact error as the OP?

[gschwa]

The error I am getting is: Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.

And when I run in development I get no errors and the site works beautifully.

Did that answer your question? I can provide any details you require plus I will continue to try solve on my end. I really hate IE.

[dvdzkwsk]

@gschwa one other thing you can try until I can get around to this is to disable UglifyJS. If the error stops occurring then we know for sure it's a result of the minification process (I had to debug something like this the other day, only reason I bring it up).

[gschwa]

@davezuko that was my thought as well and I disabled all the production webpack plugins but I still get the same error. Of course, now it is easier to see the code and the stack trace:

invariant [Line: 201, Col: 6], vendor.ac35524307b1496447fc.js
ReactMount._renderSubtreeIntoContainer [Line: 6821, Col: 158], app.91bb0bfd55e9608be6ee.js
ReactMount.render [Line: 6884, Col: 6], app.91bb0bfd55e9608be6ee.js
render [Line: 8030, Col: 4], app.91bb0bfd55e9608be6ee.js
Anonymous function [Line: 8066, Col: 2], app.91bb0bfd55e9608be6ee.js
__webpack_require__ [Line: 72, Col: 12], vendor.ac35524307b1496447fc.js
Anonymous function [Line: 5, Col: 2], app.91bb0bfd55e9608be6ee.js
__webpack_require__ [Line: 72, Col: 12], vendor.ac35524307b1496447fc.js
webpackJsonpCallback [Line: 43, Col: 13], vendor.ac35524307b1496447fc.js
Global code [Line: 1, Col: 1], app.91bb0bfd55e9608be6ee.js

Line 6821 is:

nextElement != null && nextElement.props !== undefined ? ' This may be caused by unintentionally loading two independent ' + 'copies of React.' : '') : invariant(false) : void 0;

Seems very odd.

[dvdzkwsk]

@gschwa last thought: try taking out react-optimize in the babel plugins. I bet that's it.

Though, if I am right, I have no idea why it's not a compile time error. If I'm wrong then things make a little more sense, but I have less of an idea as to what to pursue next.

[gschwa]

That was it!! What was the purpose of including that?

[creatorkuang]

@davezuko the code you reply didn't work. It's still the same error.

[gschwa]

@creatorkuang You tried removing these lines: https://github.com/davezuko/react-redux-starter-kit/blob/master/build/webpack.config.js#L129-L133 and it didn't work?

[dvdzkwsk]

@gschwa that plugin performs production optimizations such as extracting static elements, removing propTypes (they are ignored by React in production but their existence still takes up needless bytes) and a few other things. So whatever it's doing to the code is somehow breaking it in certain environments. If you're feeling up to the challenge you could try to reproduce the issue in a minimal example and forward it to its repo's issues.

I'll have to consider now whether or not we keep it and accept the risks.

[creatorkuang]

@gschwa It works when i remove these lines. Thanks for point out the problem :)
However, I agree with @davezuko and would like to spent some time to figure out what make this happen. It just happen in few browser. I will tell you the result if i figure out :)

[creatorkuang]

@davezuko @gschwa I found the problem it's related to Symbol. You could check REACT_ELEMENT_TYPE , In my Android browser, i console it and it show me the number which guide me to the polyfill and then i found this answer : http://stackoverflow.com/questions/33828840/symbol-is-undefined-in-ie-after-using-babel
so when i add this line into my html code : (before app.xxx.js)
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js">
and it just works !

[gschwa]

@creatorkuang And were you able to keep react-optimize or no?

[creatorkuang]

@gschwa I keep react-optimize. You could check my push
creatorkuang@dcb1c88
. Just need to include babel-polyfill .
@davezuko it's in the right way, but it's not import it , but build it in vendors.

[gschwa]

@davezuko adding the babel-polyfill fixed the issue while keeping the react-promise preset

[dvdzkwsk]

@gschwa and @creatorkuang I will add babel-polyfill as a default dependency in the vendor bundle tomorrow.

[jnarowski]

This is still broken in master. I see babel-polyfill was added but it wasn't added to compiler_vendor config as suggested by @creatorkuang in his code snippet. If I don't add it to compiler_config, it doesn't work in IE11. Also great find @creatorkuang, it saved me yesterday!

Oh the time developers across the world waste testing IE...

[ssageghi]

@davezuko
Hi
I have this issue on all old version of browser(chrome, safari, IE)
I try what you suggest here but still, I can't make it work
I get this Error on safari
SyntaxError: Unexpected token 'const'
can you help?