Error, when dynamically import a react js module with webpack

Question

I want to dynamically import a react js module. The module is not component it is an object of data, so I cannot use react code splitting. In the webpack docs there is an example with a promise. When I use it like that in a react component, it throws an error because the component tries to render before the promise hadd been resolved. I want to import it in that way in case the data does not exist, I could provide default data.

const dataProps = import(`./dataObject.js`).then(data=> data);

...
 render() {
  <SomeComponente data={data} />
}

apokryfos · Accepted Answer · 2019-10-19 10:37:50Z

1

I think the best way to do this is something like:

const dataProps = import(`./dataObject.js`); // Start the importing 

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state {
            data: null
        }
    }

    componentDidMount() {
        dataProps.then(data => this.setState({ data });
    }

    render() {
       if (this.state.data !== null) {
           return <SomeComponent data={this.state.data} />
       }
       return null;
    }
}

This way when the import is done only then will you actually render anything

answered Oct 19, 2019 at 10:37

apokryfos

40.9k11 gold badges85 silver badges128 bronze badges

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

1 Comment

user2952265 Over a year ago

Thank you, I tried it, but although provinding a catch bock it throws an error, causing the app to crash: Module not found: Can't resolve '

Collectives™ on Stack Overflow

Error, when dynamically import a react js module with webpack

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related