reactjs/express-react-views

loading react components from a node module

Closed this issue · 6 comments

How can i load react components from modules ?

seems like it is not working when i import react components from node modules (jsx and compiled js both).

zpao commented

It should just work. If you can share a simple repro case I can look into it.

App

views/index.jsx

var React = require('react');
var NewHelloMessage = require ('react-components/src/test');

var HelloMessage = React.createClass({
  render: function() {
    return (
        <div>Hello {this.props.name}</div>
        <NewHelloMessage></NewHelloMessage>
    );
  }
});

module.exports = HelloMessage;

node_modules/react-components/src/test.js

'use strict';

var React = require('react');

var NewHelloMessage = React.createClass({
    displayName: 'NewHelloMessage',

    render: function render() {
        return React.createElement(
            'div',
            null,
            'New Hello'
        );
    }
});

module.exports = NewHelloMessage;

Note: I also tried with jsx instead of js in node module.

Update: updated syntax

@JasonStewart1 Looks like you’re assigning the component to variable test, but using NewHelloMessage in render, which is probably undefined var, and test is unused.

@meister Updated code, I was making a quick repro earlier.
Still doesn't work.

zpao commented

Do you see any errors? Can you make a small test repo I could clone to reproduce?

When I try to reproduce I can't.

git clone # this repo
cd express-react-views/examples/simple
npm i
# put your NewHelloMessage component into node_modules/react-components/test.js
# require('react-components/test') & use in views/index.jsx
npm start

I see the test component being rendered.

zpao commented

Closing since there hasn't been a response from filer in a long time.