I got this error( (index):14 Uncaught ReferenceError: ReactDOM is not defined ) in console while run this code snippet. i am using django 1.11.2. As i am beginner in ReactJS. please help me out.

I have been investigating the usage of es module imports for react components in the react template tags in order to not use a bundler in the front end tooling process. Here is where the idea came from: Building without bundling and I got a working example that I will post here in the next comment

I followed the Hypernova SSR example, but the webpages I receive are completely blank.

Tried to run the example directly, the following error occurs on the hypernova server:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

Any idea why this could be?

Not a bug or problem with the project.

Is there a development environment that anyone would recommend for doing frontend development with django-react-templatetags?

Specifically, how do you go about developing react components and debugging them with the Django and Hypernova SSR setup?

Thanks

The current approach resolves template variables to a type, or fails. You cannot pass a literal, because the template tag forcibly passes json to the component tag.

This eliminates literally half of the "IO" functionality of React, by killing the "O" part. The only way React components can communicate with the outside world is by callback, and this behaviour is unsupported, because functions are not JSON-encodable.

I've looked through the documentation but see only mention of feeding data in, no capability for getting data back out via callback.

Is there something I'm missing, or is there no support for passing in callback functions so that React components can communicate back to the page they're hosted on?

Thanks for this really great library.

The example in the readme shows a "Menu" React component loaded into part of a larger template. But there isn't any guidance on creating this React component for specific use as an inline component in a Django app using django-react-templates.

The example app that is mentioned seems to be a full SPA-like React app built using react-sass-starterkit...unsure how that example fits into the inline component approach.

Do you have any guidance or suggestions for building something more like the "Menu" component? (e.g. create a separate Django app "components" in your project, setup webpack to compile from components/src/my_component.js to static, make sure not to include X, etc. etc.)

Probably very obvious to most but for a React newbie like me it's hard to discover the easiest way to write an inline (not SPA) React component for use with Django + django-react-templates.

For example, I'm not sure if using react-sass-starterkit is appropriate for an inline component like "Menu"...does it bake in extra js that django-react-template will itself provide? Any extra steps to properly integrate the result of a webpack build in react-sass-starterkit into the Django app?

Thanks for any suggestions.

Hey there,

I was wondering when the next release would be published to pypi? There is useful SSR code currently in the develop branch (added like a month ago) that I don't believe is in v5.4.0 build.

Thank you!

Hi there,

Firstly thanks for this project! It has enabled me to start shifting to start adding React to my codebase incrementally which is amazing!

Disclaimer: This issue could be down to the particular code base I am working on. It is using this library which looks to mess with the state of the back button (https://github.com/defunkt/jquery-pjax)

This issue can be reproduced as follows:

1. Go to a page which uses this library
2. Then navigate to another page
3. Then use the browser back button
4. If at this point you inspect the elements the uuid in the data/javascript is different from the uuid in the HTML id of the div where the React should render.

Screen recording: https://www.loom.com/share/5247e399ace045ee82d3744b009d6b1bx

Workaround: just use the identifier argument in the react_render template tag.

I couldn't find a non-public channel on which to communicate the security vulnerability. Here it goes:

Severity

High. The injected code could be executed on any page in which the malicious input is rendered and can affect any visitor, including site admins. This could allow attackers to hijack sessions, execute any Javascript on the browser of the visitor or even include their own HTML into the page.

Problem

Normally Django would take care of escaping HTML tags in templates when including model fields and other variables in the rendered template. But in this case, the React props are simply rendered as a JSON object in a script element.

Since the JSON inside the React.createElement(...) is not properly escaped, a malicious user is able to inject any custom HTML/Javascript into the rendered templates.

Simple example

1. Create any model with fields that can be set by the user, for example: UserProfile(name: str, bio: str, ...)
2. Let the user fill in the data as usual: could be Django form, React component, REST API, etc...
3. Populate any React component using this library, passing any of those fields as a prop:

{% load react %}
<html>
    <head>...</head>

    <body>
            {% react_render component="UserProfileComponent" prop_name=user_profile.name %}
    </body>

    {% react_print %}
</html>

4. If a user sets the name to be </script><script>alert('Foo')</script>, it will be rendered in the template as follows:

<html>
    <head>...</head>

    <body>
            <div id="UserProfileComponent_UUID"></div>
    </body>

    <script>
        ReactDOM.render(
            React.createElement(UserProfileComponent, {"name": "</script><script>alert('Foo')</script>"}),
            document.getElementById('UserProfileComponent_UUID')
        );
    </script>
</html>

5. The first </script> ends the script element in which the React render snippet is placed, and executes the malicious code.

Proposed solution

I think that one of the following would prevent this vulnerability:

1. Preferred: make use of Django's json_script to handle escaping of malicious code and render the JSON object into the template. https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#json-script

<html>
    <head>...</head>

    <body>
            <div id="UserProfileComponent_UUID"></div>
    </body>

    <script id="UserProfileComponent_props_UUID" type="application/json">{"name": "\\u003C/script\\u003E..."}</script>

    <script>
        ReactDOM.render(
            React.createElement(UserProfileComponent, JSON.parse(document.getElementById('UserProfileComponent_props_UUID').textContent)),
            document.getElementById('UserProfileComponent_UUID')
        );
    </script>
</html>

2. Base64 encode the stringified props JSON on render, and decode within the <script>...</script> element on the browser. For example:

<html>
    <head>...</head>

    <body>
            <div id="UserProfileComponent_UUID"></div>
    </body>

    <script>
        ReactDOM.render(
            React.createElement(UserProfileComponent, JSON.parse(atob("eyJuYW1lIjoiPC9zY3JpcHQ+PHNjcmlwdD5hbGVydCgnRm9vJyk8L3NjcmlwdD4ifQ=="))),
            document.getElementById('UserProfileComponent_UUID')
        );
    </script>
</html>

3. Recursively escape the strings in the rendered JSON before rendering the props into the template.

Useful links

1. https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#json-script
2. https://adamj.eu/tech/2020/02/18/safely-including-data-for-javascript-in-a-django-template/

I have found that in some browsers, a blank script tag is a syntax error. No need to output an empty script tag if there is no react component to render.

The context processor was providing an initial empty list of rendered components in order to include them in the {% react_print %} output. While render would anyway fallback to an empty list in case of no variable in current context, the library would throw a KeyError when running the {% react_print %}.

The rationale behind this change is that the CP itself doesn't provide any significant value there and the list in the context can be dynamically created when rendering the first react component on the page.

On the contrary, when using render_to_string which has no request context, the library would throw the KeyError mentioned before.

assertTrue is not for comparing arguments, should use assertEqual for that.

The developer's intent of the test was to compare argument 1 with argument 2, which is not happening. Really what is happening is the test is passing because first argument is truthy. The correct method to use is assertEqual. more details

https://github.com/Frojd/django-react-templatetags/blob/cb781d6eaa7b19b49840543ee22f7bd243d97dec/django_react_templatetags/tests/test_ssr_hypernova_service.py#L205

I found this issue automatically, see other issues here

Not really an issue, just wanted to start a thread for projects and companies using this library.

I found it super helpful for my own projects. And just want to help promote it.

I can start:

• Panelbear: Privacy focused analytics service.

I actually mention the library in a blog post I just published describing the tech stack in case anyone is interested: https://panelbear.com/blog/tech-stack/

Thanks a lot for building this, it has saved me a lot of work.

This problem might be with hypernova-python plugin. The error gets stuck inside "results" and not at the base dictionary. Eventhough I get the response that everything is OK, the SSR failed.

This is a snippet of the JSON returned from https://github.com/ornj/hypernova-python/blob/master/hypernova/init.py#L79

{
  "success": True,
  "error": "None",
  "results": {
    "Components.App": {
      "name": "Components.App",
      "html": "None",
      "meta": {

      },
      "duration": 310.156114,
      "statusCode": 500,
      "success": False,
      "error": {
        "name
        ":"
        ReferenceError ",
        "message": "window is not defined",
        "stack": [
          "ReferenceError: window is not defined",
          "at useMediaQuery (/mnt/persist/www/signalisten/shared/ssr/frontend/ssr_frontend/utils/useMediaQ
          uery.js: 37: 25)
        ",
        ]
}