Named import

[SammyM]

Is there a way to get this working with named imports?

[olehreznichenko]

const What = loadable(async () => {
  const { Books } = await import('./Books')

  return props => <Books {...props} />
})

[gregberge]

@olegreznichenko is right, thanks for answer.

[benkermode]

const What = loadable(async () => {
  const { Books } = await import('./Books')

  return props => <Books {...props} />
})

This only works for me when the module in ./Books has a named export AND a default export, which seems really odd. It doesn't seem to work when there is only a named export. Can you guys replicate that?

[benkermode]

Also if it worked I believe you could just do:

const What = loadable(async () => {
  const {Books} = await import('./Books')
  return Books;
})

[theKashey]

No, it would work only for the clientside. And not for long - #483 will introduce a change in babel plugin, preventing situations like this.

DO NOT USE ANYTHING EXCEPT IMPORT, in the "import" block.

[chriszrc]

Seems like this doesn't work without default exports, I get this error in the webpack build:

See our docs page for more info on this error: https://gatsby.dev/debug-html 68 | // don't hoist over string (html) components 69 | if (objectPrototype) { 70 | var inheritedComponent = getPrototypeOf(sourceComponent); | ^ 71 | 72 | if (inheritedComponent && inheritedComponent !== objectPrototype) { 73 | hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);

WebpackError: TypeError: Cannot convert undefined or null to object

• hoist-non-react-statics.cjs.js:70 node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js:70:1

• loadable.esm.js:128 node_modules/@loadable/component/dist/loadable.esm.js:128:27

• loadable.esm.js:279 node_modules/@loadable/component/dist/loadable.esm.js:279:1

• loadable.esm.js:173 node_modules/@loadable/component/dist/loadable.esm.js:173:1

So is using named imports a no go here?

[theKashey]

named imports are working, but only if you use build-in loadable components functionality, not any promise-based code you can write around import.

[chriszrc]

Ah, I see, can you point to an example just so we know how to do this then?

On Thu, Sep 2, 2021 at 4:41 AM Anton Korzunov @.***> wrote:

named imports are working, but only if you use build-in loadable components functionality, not any promise-based code you can write around import.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/gregberge/loadable-components/issues/97#issuecomment-911325171, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGEBMKLUJAEJRYUYUABKJULT74TARANCNFSM4FDUFPMQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

-- -- Chris Marx Senior Software Engineer ZevRoss - Know Your Data Data Science & Spatial Analysis 209 N. Aurora St, 2nd Floor Ithaca, NY 14850 www.zevross.com

[theKashey]

https://loadable-components.com/docs/api-loadable-component/#optionsresolvecomponent