Dynamic path import for lazy loading of components using react-loadable

Question

I am creating an app using create-react-app and lazy loading the component using react-loadable.

What I want to do is import dynamic paths for the loader object or the Loadable function of react-loadble module.

Code:

const LoadableComponent = path =>
 Loadable({
  loader: () => import(`${path}`),
  loading: Loader,
 })

const Home = LoadableComponent('./../../pages/Home')
const User = LoadableComponent('./../../pages/User')

If I put the path string in the place of the path variable (Ex. import('./pages/Home')) and call the function it works. But when I use it like the code above Loader will load but it will not continue to load the component anymore. Why doesn't it work if I use the variable in import?

vhie · Accepted Answer · 2018-10-30 08:38:13Z

4

Found the answer here

"For Webpack to handle an import, it needs to be able to at least guess roughly what an import() is meant to be referencing."

Turns out your path cannot be too anonymous. Guess it is stacked to deep for Webpack to confidently know what I am importing.

answered Oct 30, 2018 at 8:38

vhie

2522 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike · Accepted Answer · 2018-10-30 08:38:27Z

1

As far as I know, the bundler (Webpack) needs to be able to process the file path upfront.

My question would be why is it required? Is there anything so bad about just writing?

const Home = Loadable({
  loader: () => import('./pages/Home'),
  loading: Loader,
})

const User = Loadable({
  loader: () => import('./pages/User'),
  loading: Loader,
})

Bonus point: Take a look at new React's lazy API, recently release in 16.6. The linked page also has some good information on code splitting.

answered Oct 30, 2018 at 8:38

Mike

17.3k2 gold badges21 silver badges25 bronze badges

1 Comment

vhie Over a year ago

Sorry. I just don't think it will be very efficient to do with multiple pages. Also I was planning to use it to multiple files but I guess it would be impossible to do unless they aren't stacked too deep for webpack to locate. Also my react is 16.5 so .lazy isn't included yet.

neo · Accepted Answer · 2020-06-20 07:13:35Z

To simplify config lazy loading,the solution likes below:

import React, {Component, lazy, Suspense} from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from "react-router-dom";
let routers={
    '/about': import('./pages/about'),
    '/contact':  import('./pages/contact'),
}

class Content() extends Component{
   render(){
     return (<Switch>
        {Object.keys(this.props.routers).map((path, idx) => {
            let Child = lazy(()=>this.props.routers[path])
            return (
                <Route path={path} key={idx}>
                    <Suspense fallback={<div>Loading...</div>}>
                        <Child></Child>
                    </Suspense>
                </Route>)
        })}
    </Switch>
   }
}

ReactDOM.render(
    (
    <BrowserRouter>
        <div>
            <ul>
                <li><Link to="/about"> About</Link></li>
                <li><Link to="/contact">Contact</Link></li>
            </ul>
            <Content routers={config.routers}></Content>
        </div>
    </BrowserRouter>
    ),
    document.getElementById('root') as HTMLElement
)

Collectives™ on Stack Overflow

Dynamic path import for lazy loading of components using react-loadable

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related