Full dynamic import using function argument destructuring breaks on production builds

🐛 Bug Report

For example on a create-react-app, if i use function argument destructuring on a full dynamic import, the props are seen as undefined, only on production build ( probably minifier optimizations going on… )

What’s funny is that if i use “lazy” instead of “loadable” it seems to work…

To Reproduce

Steps to reproduce the behavior:

For example having a Sidebar for each type of user role ( normal and admin for example ) const Sidebar = loadable(({ role }) => import(./${role}));

myRole being “admin”

const Layout => ( … <Sidebar role={myRole}/> … )

Expected behavior

if a component called admin.js or a folder admin with index.js exists on that path, it should be loaded, and in fact… on development mode, it is loaded…

on production build “role” inside the import function is undefined.

If i change this: const Sidebar = loadable(({ role }) => import(./${role})); to this: const Sidebar = loadable((props) => import(./${props.role}));

It works… using lazy instead of loadable works both ways

Link to repl or repo (highly encouraged)

Please provide a minimal repository on GitHub.

Issues without a reproduction link are likely to stall.

Run npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboard

Paste the results here:

I’ll add the reproduction link soon as I have more time, sorry

[theKashey]

• lazy == React.lazy 😅
• arguments seems to display something wrong. Look like these are “module” variables.

Anyway, the best way to tackle this problem is to add your case to babel plugin tests cases.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.