ReactTV Error -- Uncaught SyntaxError: Unexpected token (

[ejbp]

import Radium from 'radium';

const style = {
main: {
      width: scale(270),
      height: scale(270),
      padding: "6%",
      ':hover': {
        color: "green"
      }
      //backgroundImage: 
    }
}

[...]

export default Radium(MainContentElement);

When I do a mouseover:
Chrome console error is: "Uncaught SyntaxError: Unexpected token ("
Safari console error is: "SyntaxError: Function statements must have a name."

[ryan-roemer]

Can you please provide a minimal repository with install + error reproduction steps so we can jump and see what you see? Thanks!

[ejbp]

https://github.com/ejbp/radium-error-function-statements-must-have-a-name

[ryan-roemer]

Great! What are the reproduction steps to see the issue after yarn install?

[ejbp]

Sorry, forgot to add a readme.

1. yarn start

2. Go to your browser and open the url that the last command will give to you

3. Move the mouse over the text

4. Check the browser console errors

[ryan-roemer]

On node 8 I get:

$ yarn install
yarn install v1.3.2
[1/4] 🔍  Resolving packages...
warning material-ui > react-popper@0.7.5: please use 0.7.4 or 8.0.0 and above
[2/4] 🚚  Fetching packages...
error webpack-devserver@0.0.6: The engine "node" is incompatible with this module. Expected version "4.*".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

But on node 4 I get a different dep saying I need node 6. I'm going to just hack dependencies to see if I can get it to build.

[ryan-roemer]

Actually, given that you have:

    "webpack-dev-server": "^2.11.1",
    "webpack-devserver": "0.0.6"

I'm guessing webpack-devserver is an error. I'm going to remove it.

[ejbp]

Absolutely. It was a spelling error. Sorry about that. Thanks

[ryan-roemer]

Can you disable all those devtools to isolate the issue? Something like:

diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 8d4b1ba..5020720 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -97,13 +97,13 @@ const config = {
 
   ],
 
-  devtool: "source-map", // enum
-  devtool: "inline-source-map", // inlines SourceMap into original file
-  devtool: "eval-source-map", // inlines SourceMap per module
-  devtool: "hidden-source-map", // SourceMap without reference in original file
-  devtool: "cheap-source-map", // cheap-variant of SourceMap without module mappings
-  devtool: "cheap-module-source-map", // cheap-variant of SourceMap with module mappings
-  devtool: "eval", // no SourceMap, but named modules. Fastest at the expense of detail.
+  // devtool: "source-map", // enum
+  // devtool: "inline-source-map", // inlines SourceMap into original file
+  // devtool: "eval-source-map", // inlines SourceMap per module
+  // devtool: "hidden-source-map", // SourceMap without reference in original file
+  // devtool: "cheap-source-map", // cheap-variant of SourceMap without module mappings
+  // devtool: "cheap-module-source-map", // cheap-variant of SourceMap with module mappings
+  // devtool: "eval", // no SourceMap, but named modules. Fastest at the expense of detail.
   // enhance debugging by adding meta info for the browser devtools
   // source-map most detailed at the expense of build speed.

Also, I'm getting build issues complaining about assets/ not existing and I think there's missing CSS. Can you maybe add that too?

$ yarn start
# SNIPPED

ERROR in [copy-webpack-plugin] unable to locate 'assets' at '/Users/rye/scm/vendor/ejbp-radium-error-function-statements-must-have-a-name/assets'
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 173 bytes {0} [built]

[ejbp]

I already removed those tools.
I also removed the assets error.
I gave you permissions to push to repo if you want to use it.

[ryan-roemer]

Thanks! I pushed up a WIP experiments branch.

I did this small change:

diff --git a/src/App.js b/src/App.js
index bd47fcf..92a6bbb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactTV from 'react-tv';
+import ReactDOM from 'react-dom';
 import { withNavigation, withFocusable } from 'react-tv-navigation';
 
 import Screen from './Screen'
@@ -26,4 +26,4 @@ class App extends React.Component {
 
 const AppWithNavigation = withNavigation(App)
 
-ReactTV.render(<AppWithNavigation/>, document.querySelector('#root'));
+ReactDOM.render(<AppWithNavigation/>, document.querySelector('#root'));

And everything works just fine (hover turns red to green). I've got a lot on my plate today, so will try and pick this up next week. So, I have no idea what's up, just that it hits in ReactTV and not in ReactDOM.

Back to ReactTV -- any work you can do to get me a stack trace or something I can run in a debugger (even just limiting down where to stick the debugger statement to be able to step through things right before the exception) would be a huge help to tracking down what's up!

[ejbp]

Deal! Thanks for the high priority

[stevenmusumeche]

ping @ejbp

[blainekasten]

I did some research into this and found out what is happening. React TV patches the renderer and attaches DOM listeners differently. While ReactDOM uses an event pool with addEventListener, ReactTV seems to use html events. So if you load up the example @ejbp made and look at the html, you will see this element:

<div onmouseenter="function (e) {
      existingOnMouseEnter &amp;&amp; existingOnMouseEnter(e);
      setState(':hover', true);
    }" onmouseleave="function (e) {
      existingOnMouseLeave &amp;&amp; existingOnMouseLeave(e);
      setState(':hover', false);
    }" data-radium="true" style="color: rgb(255, 0, 0);">This is an error example</div>

Which you might notice is the code from src/plugins/resolve-interaction-styles-plugin.js

So the reason why we get this Uncaught SyntaxError: Unexpected token ( error is because the html event execution is expecting a reference to a function to be invoked. I created a PoC branch that shows how we could fix this.

https://github.com/FormidableLabs/radium/compare/fix/react-tv-%23971

However, I'm not sure this is something we want to support. Given that React TV is a small use case, and radium is not needed to create a React TV app, it would require us to create infrastructure and code that is shipped to everyone, but used by a small audience. It'll also increase complexity of our tests, maintenance and documentation.

I'm going to pink @kylecesmat to decide if this is something we want to try and support or not.

[kylecesmat]

Thank you @blainekasten for looking into this! As well as providing a PoC solution. Given the points mentioned, and the divergences that supporting this platform would introduce, I agree that it is outside the scope of Radium.

Should you want to use Radium with this library, I would encourage forking it and extending the library as needed for your target.