import or require React components dynamically
<p>I'm trying to import / require components dynamically, but somehow when I do it React complains. The require function does find it, but React throws an error saying it is missing some functions 't' etc.. All of this in an electron app.</p>

<p>I have a wizard setup (that is working, but not so elegant I think), where each page has it's own layout and jsx component. If I'd like to add a new page, I don't want to manage x-number of files, and at the moment I have to due to the setup I have currently. <strong>Below you can find what I want to achieve and what I'm doing now to achieve it</strong>. If there are any suggestions, code smells or better options please let me know as I'm quite new to React and ES2015 (as I'm from a C# background).</p>

<p><strong>What I'm trying to achieve</strong></p>

<pre><code>export default class WizardPageContainer extends Component {    
    // Constructor
    constructor(props) {
        super(props);        
    }

    // Render
    render() {
        const WizardPage = require(`./path/to/${this.props.step.id}`);

        return (
            &lt;WizardPage step={this.props.step} /&gt;
        );
    }
}
</code></pre>

<p><strong>How I'm currently doing it</strong> : which means I have to declare the imports / files first on top of the "WizardPageContainer" component.. Which means extra work and prone to errors/forgetting things. <strong>I should add, this code is working now ok, but I don't think this is elegant/future proof</strong>:</p>

<pre><code>/* PAGES */
import WizardPage_Welcome from './pages/0.wizard.welcome';
import WizardPage_SystemCheck from './pages/1.wizard.systemCheck';
import WizardPage_SignIn from './pages/2.wizard.signIn';
import WizardPage_ExamCode from './pages/3.wizard.examCode';
import WizardPage_TakeExamination from './pages/4.wizard.takeExamination';
import WizardPage_Close from './pages/5.wizard.close';
const pages = [    
    WizardPage_Welcome,
    WizardPage_SystemCheck,
    WizardPage_SignIn,
    WizardPage_ExamCode,
    WizardPage_TakeExamination,
    WizardPage_Close
];
/*/********************************************************************///

/* ******************************************************************** */
/* COMPONENT */
export default class WizardPageContainer extends Component {    
    // Constructor
    constructor(props) {
        super(props);        
    }

    // Render
    render() {
        const WizardPage = pages[`${this.props.step.id}`];

        return (
            &lt;WizardPage step={this.props.step} /&gt;
        );
    }
}
/*/********************************************************************///
</code></pre>