HTML -> JSX parser barfs on <script> code

[KyleAMathews]

Error:

Uncaught Error: Something bad happened when transforming HTML to JSX: Error: Parse Error: Line 31: Unexpected token var

[Daniel15]

Perhaps we should modify HTML to JSX to strip <script> tags.

[KyleAMathews]

In my case that'd be bad as the <script> tag is loading a 3rd-party widget.

[sntran]

Or even if the page has <script> tag to load custom JS code.

[Daniel15]

If stripping the tags isn't an option, perhaps react-magic should pull them all out and eval the code. I think this is what other similar libraries do.

[santagada]

Had the same problem with the bookmarklet on all pages that I tried... it seems that it is really hard to find a page without script tags this days.

[Daniel15]

@santagada or @KyleAMathews - Can you please provide an example of a script that crashes react-magic? I tried adding a script tag to a page but didn't get the Something bad happened error. Thanks!

[santagada]

Try this one: http://metrology.readthedocs.org/en/latest/instruments.html

any readthedocs gives the same error this was just the first one on my history.

[Daniel15]

The error on that one doesn't appear to be a JavaScript error, it's JSXTransformer not liking some spans that just have = as their content. Filed as https://github.com/facebook/react/issues/2160

[santagada]

it appears to be: facebook/esprima#37

[sahanDissanayake]

Whats the status of this issue ?

I'm loving this idea. But cannot implement this to my app as it keeps throwing error at me

Uncaught Error: Something bad happened when transforming HTML to JSX: Error: Parse Error: Line 32: Expected corresponding XJS closing tag for li magic.js:123reactComponentFromHTML magic.js:123render magic.js:138init magic.js:264NODE_TYPE.ELEMENT magic.js:279__webpack_require__ magic.js:30(anonymous function) magic.js:50(anonymous function) magic.js:53webpackUniversalModuleDefinition magic.js:9(anonymous function) magic.js:10

When I fix this issue I get another one. it just keeps going. How to fix this ?

[Daniel15]

It sounds like you have invalid HTML. What does the W3C validator say when you validate your site?

Sent from my mobile. On Sep 16, 2014 4:28 AM, "sahanDissanayake" notifications@github.com wrote:

Whats the status of this issue ?

I'm loving this idea. But cannot implement this to my app as it keeps throwing error at me

Uncaught Error: Something bad happened when transforming HTML to JSX: Error: Parse Error: Line 32: Expected corresponding XJS closing tag for li magic.js:123reactComponentFromHTML magic.js:123render magic.js:138init magic.js:264NODE_TYPE.ELEMENT magic.js:279__webpack_require__ magic.js:30(anonymous function) magic.js:50(anonymous function) magic.js:53webpackUniversalModuleDefinition magic.js:9(anonymous function) magic.js:10

When I fix this issue I get another one. it just keeps going. How to fix this ?

Reply to this email directly or view it on GitHub https://github.com/reactjs/react-magic/issues/2#issuecomment-55729044.

[sahanDissanayake]

I did not check it against W3C validator.

Ok. 306 errors. Jeez. I fill fix my problem first. :)

I will get back to you on this. Good job on this plugin. :+1:

[Daniel15]

Closing this out, I think the issue with script tags was resolved.

[santagada]

it appears that now it is barfing on comments... like:

will open another ticket

[trusktr]

React is barfing on this:

    render: function() {
        return (
            <div class="gl-map-container">
                <script id="shader-fs" type="x-shader/x-fragment">
                    precision mediump float;

                    void main(void) {
                        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
                    }
                </script>
            </div>
        )
    }