dynamic import using forEach js es2015

Question

I am confident this isn't possible as well it doesn't work lol

I am using webpack with babel-preset-es2015 & babel-preset-react and trying to dynamically build a form using data passed between the routes.

Page loading < Form />

        <Form data={
            [
                {
                    element: 'input',
                    type: 'text',
                    placeholder: 'Jamie is Sex'
                },
                {
                    element: 'input',
                    type: 'text',
                    placeholder: 'Jamie is Not Sex'
                },
                {
                    element: 'input',
                    type: 'password',
                    placeholder: 'Jamie is Not Sex'
                }
            ]
          }/>

< Form /> / form.js

    var buildElements = this.props.data.map(function (item) {
        var element = import item['type'] from './'+item['type'];
        return element;
    });

I realise I could do an if statement but I want it to rely on the filesystem. Maybe I need to check if the file exists with node.

No, this is not possible with ES2015: http://stackoverflow.com/questions/30340005/importing-modules-using-es6-syntax-and-dynamic-path Have a look at webpack or browserify with CommonJS syntax instead. — nils, Apr 26 '16 at 11:45

score 1 · Answer 1 · answered Apr 26 '16 at 11:52

1

You should do something like

const buildElements = this.props.data.map(item => require('./' + item.type));

Most javascript packers (webpack, rollup, and browserify) can understand this (non-ES6) syntax as well.

answered Apr 26 '16 at 11:52

arantes

126
4

dynamic import using forEach js es2015

1 Answers1