How to use regular async import in webpack for non-presentational modules

I’m using this module along with redux-first-router and react-universal-component. Besides splitting up my presentation components i really want to split up my redux middleware, epics and reducers.

I’ve made pretty good progress using the onLoad in react-universal-component to include the redux ware but really what I need is a way to import my redux dependencies during the thunk for the route. Then I can async include all my extra route specific redux deps, get the state, and then try to render with the universal component.

What I’ve found is that using this module the result of an import looks “wierd”. When I await it returns a function rather than the whole module. I’ve looked at the code for both react-universal-component and universal module and i just can’t wrap my head around the api that import with the plugin produces.

Is there a way to disable the babel plugin for only a few imports? I’m using webpack on both the server and the client… maybe here a short-hand way to use the result of the import ?

[faceyspacey]

Hey @phyllisstein I just moved this week, so I’ve been MIA. Honestly I’m super focused on getting the next version of Redux First Router out, and plan to circle back to this and give it a major revamp. It’s killing me inside to try to find the time for what will just be a temporary solution. In the next version we’ll circumvent this issue via the aforementioned usage of bindings or other similar solutions.

[buzinas]

My main problem is that I my project uses react-static, which uses babel-plugin-universal-import under the hood (only in production). I can use async/await in development, but when I deploy it, the problem underlined in this issue happens (the dynamic import returns a function, instead of a promise). If I workaround it by calling the function it returns, everything works – but only in production, and then my development environment breaks. So the only solution for my problem at this time is:

let myModule = await import('my-module')
if (typeof myModule === 'function') myModule = await myModule()

Then it works in both environment, but this is a very very ugly hack. Dynamic import should just work, I can’t see why it doesn’t at all.

If you can give me any guidance on how to proceed, I’ll definitely come up with a PR, but I can’t quite understand this plugin behavior, so I really need some kind of help.