Dynamic require in nodejs & react

Question

am trying to dynamically import an icon from react-icons-kit and its throwing this error :

 Module not found: Can't resolve 'enzyme' in 'G:\my-app\node_modules\react-icons-kit'

I have been trying for an hour and nothing.

My code :

import React from 'react';
import { Icon } from 'react-icons-kit';

const Button = ({ icon = 'home', library = "fa", children, ...props }) => {

    if (icon) {
        var svg = require('react-icons-kit/' + library + '/' + icon);
    }

    return (
        <button className={classes} {...props}>
            {children}
            <Icon icon={svg}/>
        </button>
    );
};

export default Button;

what am I missing?

Blue · Accepted Answer · 2018-12-28 22:56:40Z

You can't dynamically import that way, as your bundler needs to know all dependencies when the application is built. If you absolutely need to use this dynamic route, you can use require.context to load the entire folder, and then dynamically load them from that:

import React from 'react';
import { Icon } from 'react-icons-kit';
const iconRequire = require.context('react-icons-kit/', true);

const Button = ({ icon = 'home', library = "fa", children, ...props }) => {

    if (icon) {
        var svg = iconRequire('./' + library + '/' + icon);
    }

    return (
        <button className={classes} {...props}>
            {children}
            <Icon icon={svg}/>
        </button>
    );
};

export default Button;

However, it would be much more efficient to pass the actual icon to your Button class:

import homeIcon from 'react-icon-kit/fa/home';

// Call it below, and drop the strings all together:

<Button icon={homeIcon} />

This is more efficient and will reduce your bundle size down tremendously (As you don't need to include a whole bunch of extra icons you may not even use).

Collectives™ on Stack Overflow

Dynamic require in nodejs & react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related