react-router4, bundler-loader and typescript problem about bundle-loader

[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>
);

[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;

[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';