Dynamic Import Question: react-ace



I’m trying to understand how to do dynamic imports a little bit better. I used the round visualizer thing, and it turns out an rarely used package, react-ace, is quite resource heavy [being the react wrapper for the Ace Editor and all]. Its also used only for directly editing files, which is unusual for my use case (but a requirement from a business perspective).

To understand how to use dynamic imports, going to try with the below relatively simple component. What is the recommended way to dynamic something like this?

(a) create a parent component with the loader
(b) use an async componentWillMount() and do it there?
© i have been trying to do an async import, but not sure where to put the await, so I don’t know if this is possible.

Now lets say I want to do something interesting. The import brace from 'brace' is used to pick up the styling. I can work out what the file extension (of whatever I am loading from db is), so this example is just showing the brace for text files. There is a bunch of other modes apart from text. So, could I for example, parse the thing from the database and say it is a javascript file, hence dynamically import import 'brace/mode/javascript';. Would something like this be possible at all?

Some direction would be appreciated. Thanks so much.


Code for the component:

/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "brace" }]*/

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { observer } from 'mobx-react';

import brace from 'brace';
import AceEditor from 'react-ace';

import 'brace/mode/text';
import 'brace/theme/chrome';

import { getCLSuaArrayOption } from '../../../../../api/collections/accessHelpers.js';

import { styles } from '../../../styles.js';

export class DocMain extends Component {
  handleChangeRootStore(option, value) {
    this.props.onChangeRootStore(option, value);

  handleChangeDoc(option, value) {
    this.props.onChangeDoc(option, value);

  handleChange(value) {
    this.handleChangeRootStore('fileTmpContent', value);

  renderReadOnly(permissions) {
    const canEdit = permissions.includes('conEditDoc') && !this.props.doc.lock;

    return (!canEdit) ? true:false;

  render() {
    const permissions = getCLSuaArrayOption(this.props.rootStore.collectionSelection, this.props.rootStore.userId, 'actions');

    return (
        <div className="row" style={styles.paneInside}>
          <div className="col-12">
                $blockScrolling: true,

DocMain.propTypes = {
  rootStore: PropTypes.object.isRequired,
  onChangeRootStore: PropTypes.func.isRequired,
  doc: PropTypes.object.isRequired,
  onChangeDoc: PropTypes.func.isRequired,


Bump… C’mon - someone? This is like the exact use case for dynamic imports. Pointers appreciated, even if it is just to say this is impossible. Thanks so much.



Use React Loadable

Also search Meteor React Loadable


I had a similar thought about “dynamic, dynamic imports”: Dynamic Imports File Names