"Uncaught SyntaxError: Unexpected token ." from StatelessComponent using FullName

[badcommandorfilename]

Hi - Firstly, thanks for making such a great utility!

I'm following the tutorial at http://www.productiverage.com/writing-react-apps-using-bridgenet-the-dan-way-from-first-principles - I apologise if this is an old tutorial or if I'm just missing an obvious step or configuration setting.

When I run the example by opening demo.html, I only see "Loading.." and the Chrome Debugger Console reports:

Uncaught SyntaxError: Unexpected token . VM91:1 Uncaught SyntaxError: Unexpected token .createStatelessRenderFunction @ bridge.react.js:972ctor @ bridge.react.js:895ctor @ ClassLibrary1.js:90ClassLibrary1.AppContainer_render @ ClassLibrary1.js:67_renderValidatedComponentWithoutOwnerOrContext @ 13672021_1148175451892012_912501479_n.js:6956_renderValidatedComponent @ 13672021_1148175451892012_912501479_n.js:6983performInitialMount @ 13672021_1148175451892012_912501479_n.js:6507mountComponent @ ...

The problem seems to be caused by:

        createStatelessRenderFunction: function () {
            var className = Bridge.React.ComponentNameHelpers.getDisplayName(this);
            var namedScopeBoundFunction = null;
            eval("namedScopeBoundFunction = function " + className + "(props) { return scopeBoundFunction(props); };");
            return namedScopeBoundFunction;
        }

The value of className is (for me) "ClassLibrary1.MessageEditor" - which causes eval to try and make a function with a "." in the name, which doesn't appear to be a valid javascript name.

Further digging led me to ComponentNameHelpers.cs - which returns the C# strong typename including namespace:

        internal static string GetDisplayName(object source)
        {
            if (source == null)
                throw new ArgumentNullException("source");

            if (Script.Write<bool>("Bridge.isPlainObject(source)"))
                return source.ToString();

            return source.GetType().FullName;
        }

The issue seems to only affect StatelessComponent<>.

I'm very happy to provide more detail or a minimum reproducible sample (and I can open a pull-request if my above diagnosis seems correct).

Thanks again!

[ProductiveRage]

Hi! Thanks for the report. Bridge 15.0 was released last week and I had to make a few changes to the Bridge.React library, it looks like I introduced this bug while doing so. The intention was to get just the type name, not the full namespace - I'll have to check whether the change should be in the StatelessComponent class or in the ComponentNameHelpers.

I'm not at my computer now but should be able to check later and release a fix in no more than a few hours.

Thanks for the report! Hope you enjoy the rest of the tutorials.. when they work again!

Dan.

On 18 Sep 2016 6:30 a.m., "badcommandorfilename" notifications@github.com wrote:

Hi - Firstly, thanks for making such a great utility!

I'm following the tutorial at http://www.productiverage.com/ writing-react-apps-using-bridgenet-the-dan-way-from-first-principles - I apologise if this is an old tutorial or if I'm just missing an obvious step or configuration setting.

When I run the example by opening demo.html, I only see "Loading.." and the Chrome Debugger Console reports:

Uncaught SyntaxError: Unexpected token . VM91:1 Uncaught SyntaxError: Unexpected token .createStatelessRenderFunction @ bridge.react.js:972ctor @ bridge.react.js:895ctor @ ClassLibrary1.js:90ClassLibrary1.AppContainer_render @ ClassLibrary1.js:67_renderValidatedComponentWithoutOwnerOrContext @ 13672021_1148175451892012_912501479_n.js:6956_renderValidatedComponent @ 13672021_1148175451892012_912501479_n.js:6983performInitialMount @ 13672021_1148175451892012_912501479_n.js:6507mountComponent @ ...

The problem seems to be caused by:

    createStatelessRenderFunction: function () {
        var className = Bridge.React.ComponentNameHelpers.getDisplayName(this);
        var namedScopeBoundFunction = null;
        eval("namedScopeBoundFunction = function " + className + "(props) { return scopeBoundFunction(props); };");
        return namedScopeBoundFunction;
    }

The value of className is (for me) "ClassLibrary1.MessageEditor" - which causes eval to try and make a function with a "." in the name, which doesn't appear to be a valid javascript name https://mothereff.in/js-variables#ClassLibrary1.MessageEditor.

Further digging led me to ComponentNameHelpers.cs https://github.com/ProductiveRage/Bridge.React/blob/d75d47038b56f7445887f23c98271d146e6669f4/Bridge.React/Components/ComponentNameHelpers.cs

• which returns the C# strong typename including namespace:

  internal static string GetDisplayName(object source)
  {
    if (source == null)
        throw new ArgumentNullException("source");
  
    if (Script.Write<bool>("Bridge.isPlainObject(source)"))
        return source.ToString();
  
    return source.GetType().FullName;
  }

The issue seems to only affect StatelessComponent<>.

I'm very happy to provide more detail or a minimum reproducible sample (and I can open a pull-request if my above diagnosis seems correct).

Thanks again!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ProductiveRage/Bridge.React/issues/12, or mute the thread https://github.com/notifications/unsubscribe-auth/AAtTzG4XVxodunjh641BcDzvUlfoKVLZks5qrMxhgaJpZM4J_zmP .

[ProductiveRage]

I've pushed a fix for this. It only broke the StatelessComponent but it also meant that the component name shown in the React dev tools for PureComponent and Component were not as intended. I'm hoping to release the fix to NuGet later today, I'd like to include another bug fix, though, which I just need to finish off.

[ProductiveRage]

I've pushed a new version of the library to NuGet (1.8.6) and so the fix should be available for you to test now. Let me know if you have any more problems :)

[badcommandorfilename]

Thanks for the quick response!

Confirming fixed in Bridge.React 1.8.6 NuGet package - great work!