[v5] cannot do truly dynamic import: Property value expected type of string but got null

Describe the bug

This works:

    componentDidMount = () => {
      import('../Test.mdx').then(Thing =>
        this.setState({ Thing: Thing.default })
      );
    };

but this doesnt work

    componentDidMount = () => {
      const path = '../Test.mdx';
      import(path).then(Thing =>
        this.setState({ Thing: Thing.default })
      );
    };

It generates this opaque compile error:

Failed to build! Fix any errors and try again!
./src/containers/Home.js
Module build failed: TypeError: /Users/swyx/Work/react-static-mdx/src/containers/Home.js: Property value expected type of string but got null

I assume it has something to do with this babel plugin: https://github.com/airbnb/babel-plugin-dynamic-import-node/issues/15

Is this “truly dynamic” kind of import supported? or am I doing something wrong?

Desktop (please complete the following information):

• OS: ios
• Browser: chrome
• Version: v5.9.12

Additional context just trying to make dynamically importing components based on route data

[ScriptedAlchemy]

Alrighty! Good luck! I know context switching can get to us when the quantity starts increasing.

Here if you need me!

[montezume]

@sw-yx if this helps, this seems to work.

const path = "components/MyComponent";

const MyComponent = universal(import(`../${path}`), {
  loading: Loading,
  error: Failed
});

or more similar to your example

  componentDidMount() {
    const path = "info/test.json";
    import(`../${path}`).then(response => {
      console.log(response);
    });
  }