Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
TRACK

JavaScript Frameworks & Tools >

COURSE

Symfony UX: Stimulus >

CHAPTER

Async/Dynamic import()

Buy Access to Course
Next Chapter

Challenge #1 of 1

Q: 

We noticed that react-dom is being included in the JavaScript for every page... even though we only use it to render one component on a single page. What's the correct way to import that module dynamically?

Oh... and to be extra cool... we want to use await.

a) 
export default class extends Controller {
    connect() {
        import('react-dom').then((ReactDOM) => {
            ReactDOM.render(
                <FeatureProduct product={this.productValue} />,
                this.element
            )
        });
    }
}
b) 
export default class extends Controller {
    async connect() {
        const { default: ReactDOM } = await import('react-dom');
        ReactDOM.render(
            <FeatureProduct product={this.productValue} />,
            this.element
        );
    }
}
c) 
export default class extends Controller {
    async onInput() {
        const { default: ReactDOM } = await import('react-dom');
        ReactDOM.render(
            <FeatureProduct product={this.productValue} />,
            this.element
        );
    }
}
Rewatch Video
userVoice