react-router4, bundler-loader and typescript problem

[DebugIsFalse]

when i use typescript i set webpack module loaders { test : /\.tsx?$/, include: path.resolve(__dirname, './src/router/'), loaders : ['bundle-loader?lazy', 'babel-loader','ts-loader'] } and it will show me the error 'props.load is not a function';

App.tsx `import 'babel-polyfill'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { HashRouter, Route } from 'react-router-dom';

import Bundle from './bundle';

import HomeIndex from './router/homes/home';

const Home = () => ( <Bundle load={HomeIndex}> { (Home : any) => <Home /> } </Bundle> );

ReactDOM.render( <HashRouter>

welcome to react

<Route path="/index" component={Home} />

</HashRouter> ,document.getElementById('root') );

`

Bundle.tsx `import * as React from 'react'; export default class Bundle extends React.Component< any,any > { constructor( props?:any ) { super(props); this.state = { mod : null } }

componentWillMount() {
    this.load(this.props)
}

componentWillReceiveProps( nextProps : any ) {
    if (nextProps.load !== this.props.load) {
        this.load(nextProps)
    }
}

load( props:any) {
    this.setState({
        mod: null
    });
    props.load(( mod :any ) => {
        this.setState({
            mod: mod.default ? mod.default : mod
        });
    });
}

render() {
    return this.state.mod ? this.props.children(this.state.mod) : null;
}

}`

[alexander-akait]

@DebugIsFalse please provide minimum reproducible test repo, it is difficult to search problem in code inside in github issue post, thanks!

[DebugIsFalse]

when i use webpack3 + react-router4 + es6 +bundle-loader to do 'Load on demand', this is no problem; it can follow react-router4 website demo to do;

but is change to the typescript cannot to do and the code is more ,i cannot show the code; and if use import index from 'bundle-loader?lazy!./router/home/index'; it cannot reslove the path;

[jimthedev]

Hi @DebugIsFalse. It turns out that in version 4.2.2 of react-router they will be recommending to go to react-loadable and babel-plugin-syntax-dynamic-import. You can get it working with

1. npm install --save react-loadable
2. npm install --save-dev babel-plugin-syntax-dynamic-import
3. Add "syntax-dynamic-import" to the plugins key of .babelrc
4. Use the following in your app.js or whatever:

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';

const Loading = () => {
  return <div>Loading...</div>
}

const Index = Loadable({
  loader: () => import('../views/index/index'),
  loading: Loading,
});

const About = Loadable({
  loader: () => import('../views/about'),
  loading: Loading,
});

export default () => (
  <BrowserRouter>
    <Switch>
      <Route path="/" exact render={() => <Index name="Jim" value="Hi" />} />
      <Route path="/about/:name" component={About} />
    </Switch>
  </BrowserRouter>
);

[luqimin]

@DebugIsFalse Did you solve this? I also have this problem and dont know how to clear tsc compile error

update: Solved by add bundle-loader into webpack.config.json and set options.lazy with true

[Yan1]

I also have this problem and it works with import * as HomeIndex from './router/homes/home'; instead of import HomeIndex from './router/homes/home';