How to dynamically import a module in Javascript / ReactJs / React Native

Question

I would like to dynamically import a module from a path importPath set via Props.

var importPath;

class MainComponent extends Component {
    state = {}
    render() {
        // Set var importPath = "path_to_module here;"
        // importPath = this.props.myModulePath
        return (
            <ComponentToImport myComponentPath="./ToastExample" />);
    }
}

export default MainComponent;

Then :

class ComponentToImport extends Component {
    ToastExample: (async () => {
        await import (this.props.revPath)
    })()

    async sayHiFromJava() {
        this.state.ToastExample.showJ('Awesome', ToastExample.SHORT);
    }

    render() {
        return (<ToastExample />);
    }
}

How can I go about this?

Thank you all in advance.

How do I attach ToastExample in import ToastExample from importPath; to await import("importPath"); so that I can return(<ToastExample />);

UPDATE

I have tried :

class ComponentToImport extends Component {
    ToastExample: (async () => {
        await import (this.props.revPath)
    })()

    async sayHiFromJava() {
        this.state.ToastExample.showJ('Awesome', ToastExample.SHORT);
    }

    render() {
        return (<ToastExample />);
    }
}

but I get the error :

error: bundling failed: index.js: index.js:Invalid call at line 28: import(_this.props.myComponentPath)

crtag · Accepted Answer · 2019-12-15 07:10:03Z

3

I guess this is the way:

import("importPath").then(() => {
    // your code
});

or

await import("importPath");

// your code

see more here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

answered Dec 15, 2019 at 7:10

crtag

2,3772 gold badges15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Program-Me-Rev Over a year ago

How do I attach ToastExample in import ToastExample from importPath;'' to await import("importPath");` so that I can return(<ToastExample />);

Program-Me-Rev Over a year ago

I tried that but I get an error: bundling failed: index.js: index.js:Invalid call at line 28: import(_this.props.revPath). Any suggestions? I did an update to the question.

Olcay Ertaş · Accepted Answer · 2021-12-23 07:23:08Z

3

Is it what your are looking for?

const ToastExample = await import('importPath');

EDIT: Please read the official doc to set up your webpack or Babel (https://reactjs.org/docs/code-splitting.html)

class ComponentToImport extends Component {
  constructor(props) {
    super(props);
    this.state = { module: null };
  }

  componentDidMount() {
    const { path } = this.props;
    import(`${path}`).then(module => this.setState({ module: module.default }));
  }
  render() {
    const { module: Component } = this.state;
    return <div>{Component && <Component />}</div>;
  }
}

edited Dec 23, 2021 at 7:23

Olcay Ertaş

6,2648 gold badges82 silver badges116 bronze badges

answered Dec 15, 2019 at 7:48

jbergeron

5553 silver badges8 bronze badges

3 Comments

Program-Me-Rev Over a year ago

I tried that but I get an error: bundling failed: index.js: index.js:Invalid call at line 28: import(_this.props.revPath). Any suggestions? I did an update to the question.

Program-Me-Rev Over a year ago

Thank you again for the reply, but how do I attach ToastExample in import ToastExample from importPath; to await import("importPath"); so that I can return(<ToastExample />);

jbergeron Over a year ago

@Program-Me-Rev by passing the "<ToastExample />" path to this component, you are returning your "<ToastExample />" but it is named "<Component />".

NiRUS · Accepted Answer · 2024-07-08 08:20:46Z

0

There are 2 options

Using React.lazy and <Suspense /> works both CSR and SSR.
I wrote a small hook that imports an external module on CSR. You can check this github example on the usage & explaination.

answered Jul 8, 2024 at 8:20

NiRUS

4,3092 gold badges32 silver badges52 bronze badges

Comments

Qubaish Bhatti · Accepted Answer · 2019-12-15 08:19:34Z

-2

If you want to pass component to child component one way is to pass through child props.

import myComponentPath from "./ToastExample"
<ComponentToImport>
  <myComponentPath />
<ComponentToImport/>

and then

class ComponentToImport extends Component {
    render() {
        return (this.props.children);
    }
}

May be this helps.

Thanks

answered Dec 15, 2019 at 8:19

Qubaish Bhatti

7486 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to dynamically import a module in Javascript / ReactJs / React Native

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Linked

Related