Static component import not working

[theonelucas]

According to this line of code, the component can either be a string or a component:

typeof page === 'string' ? import(`./${page}`) : () => page()

But when we try to import the component:

import Page1 from '../components/Page1'

const components = {
  HOME: 'Home',
  PAGE1: Page1,
  [NOT_FOUND]: 'NotFound'
}

An error is being returned:

Error: load is not a function

How the component should be imported?

[tstirrat15]

Where is your import statement?

[theonelucas]

Where is your import statement?

import Page1 from '../components/Page1'

[tstirrat15]

Right, that's a synchronous import that isn't covered by this component. The import() function and the import x from 'y' statement are two different things. To use this component, you need to be using the function:

const ListingPage = universal(import('./listing/components/Root'), { onError: exceptionHandler });

That sort of thing.

[theonelucas]

So, basically I cannot pass a component already imported to Universal?

[tstirrat15]

I'm not completely certain of whether you can or not, but I'd question why you'd want to.

An import foo from 'bar' statement says "load this code when this statement is encountered." For a bundler, that means "add this code to the current bundle," and in an environment like node, that means "go get this code right now if it hasn't already been gotten." import statements are hoisted to the top of the file and are executed on the first walk of the code tree.

An import('bar') call says "create a placeholder for an asynchronous import." For a bundler, this means that it marks that spot as the start of a new bundle, and includes code to go fetch that new bundle. In an environment like node, it's an asynchronous require statement, more or less.

My guess is that you're wanting to use this library for code splitting. In that case, if you're using the import statement, you're losing out on the whole reason that you'd want to use this library. Does that make sense?

[theonelucas]

That makes sense, but what I'm aiming here is to do an incremental code splitting. Some routes, which I would explicitly pass an previously imported component, would just use it, but the other routes with a string as the component would fetch it at runtime. That way I can really leverage the power of code splitting, bundling some pages that will always be used and fetching the others as needed.

[tstirrat15]

You'll need to refactor the calling code in that case. One way to do it with your example given above would be to replace the string references to components above with the RUC instances.