Geek Answers Handbook

Reaction Unable to find img element

When rendering a reacting component from the server, I see the error "Cannot find the element" after the component displays on the client.

Uncaught Error: Invariant Violation: 
findComponentRoot(..., .1ea0t0y2j9c.$img): Unable to find element.

If I check the source of the page, I can see the identifier of the component that is indicated in the error.

Here is my setup; I have an express server with a controller that passes the component to a string and sends it to the browser. As soon as the browser displays the component a second time, I get an error message. I see only this error for images. I tried other DOM components, but it seems to work fine. I am sure that something has changed in the second rendering on the client, but I compared the output of the server with the output of the client, and I can not find any differences.

Why did the component React.DOM.imgget a mutation to cause this error? Is there a difference between React.renderToStringand React.renderthat cause a difference in the rendering of the image tag?

Here is the server code app.js

    'use strict';
    var express = require('express');
    var React = require('react');
    var path = require('path');
    var main = React.createElement(require('./main'), {key:'main'});


    var app = express();
    app.use('/js', express.static(path.join(__dirname, '/js/')));
    app.get('/', function(req, res){
      var str = React.renderToString(main);
      res.set('Content-Type', 'text/html');
      res.send(str);
      res.end();
    });

    var server = require('http').createServer(app);
    server.listen(9999, function () {
      console.log('Express server listening');
    });

Here is the component code. main.js

I use webpack to package the main.js script.

'use strict';
var React = require('react');

var Main = React.createClass({displayName: 'Main',
    render: function(){
        return React.createElement('div',null,
            React.createElement('script',{src: "/js/main.js"}),
            React.createElement('img',{src: "https://www.google.com/images/nav_logo195.png"}));
    }
});

if (typeof window !== "undefined") {
  React.render(React.createElement(Main, {key:'main'}), document.body);
} else {
  module.exports = Main;
}

Edit: updated to reflect @ssorallen's suggestions

+4
source share
1 answer

After some digging into the source of the reaction, I found out why the img tag got this error when it first rendered the page.

img, formand inputmake a call getDOMnode()in the event componentDidMount. Since the page is not displayed from the server, the img tag is not in the cache and cannot be found when the script is running.

, script img, .

, , , .

+1

More articles:


All Articles