Open DebugIsFalse opened 7 years ago
@DebugIsFalse please provide minimum reproducible test repo, it is difficult to search problem in code inside in github
issue post, thanks!
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;
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
npm install --save react-loadable
npm install --save-dev babel-plugin-syntax-dynamic-import
"syntax-dynamic-import"
to the plugins key of .babelrc
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>
);
@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
I also have this problem and it works with import * as HomeIndex from './router/homes/home';
instead of import HomeIndex from './router/homes/home';
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 = () => (
);
ReactDOM.render(
welcome to react
);
`
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 } }
}`