admin管理员组文章数量:1335624
I'm using react-loadable v4.0.4 and webpack v3.5.1.
Here is my code,
import Dashboard from '../../scenes/dashboard/dashboard';
import ReactLoadable from 'react-loadable';
...
const yoPath = 'src/ponents/scenes/dashboard/dashboard';
const DashboardWrap = ReactLoadable({
loading: Dashboard,
loader: () => {
return new Promise((resolve, reject) =>
require.ensure(
[],
(require) => resolve(require(yoPath)),
(error) => reject(error),
'dashboardChunk'
)
)
}
});
And using react-router-dom v4.1.2, I've set Route as follows,
<Switch>
...
<Route exact path='/dashboard' ponent={DashboardWrap} />
...
</Switch>
I'm able to build the chunks for the respective ponent with the name dashboardChunk.
But while loading that ponent I'm getting the issues as follows.
In the console,
And the chunkfile,
Please let me know if I'm doing anything wrong.
I'm using react-loadable v4.0.4 and webpack v3.5.1.
Here is my code,
import Dashboard from '../../scenes/dashboard/dashboard';
import ReactLoadable from 'react-loadable';
...
const yoPath = 'src/ponents/scenes/dashboard/dashboard';
const DashboardWrap = ReactLoadable({
loading: Dashboard,
loader: () => {
return new Promise((resolve, reject) =>
require.ensure(
[],
(require) => resolve(require(yoPath)),
(error) => reject(error),
'dashboardChunk'
)
)
}
});
And using react-router-dom v4.1.2, I've set Route as follows,
<Switch>
...
<Route exact path='/dashboard' ponent={DashboardWrap} />
...
</Switch>
I'm able to build the chunks for the respective ponent with the name dashboardChunk.
But while loading that ponent I'm getting the issues as follows.
In the console,
And the chunkfile,
Please let me know if I'm doing anything wrong.
Share Improve this question asked Aug 22, 2017 at 12:32 Aniruddha ShevleAniruddha Shevle 4,9194 gold badges27 silver badges40 bronze badges2 Answers
Reset to default 4I basically wanted to do code splitting, for that I've just done the following and it works fine.
I've created a mon ponent(wrapper ponent) as follows,
import React, { Component } from 'react';
class Async extends Component {
ponentWillMount = () => {
this.props.load.then((Component) => {
this.Component = Component
this.forceUpdate();
});
}
render = () => (
this.Component ? <this.Component.default /> : null
)
}
export default Async;
Then I've used above ponent as follows,
export const AniDemo = () => <Async load={import(/* webpackChunkName: "aniDemoChunk" */ "../../scenes/ani-demo/AniDemo.js")} />
export const Dashboard = () => <Async load={import(/* webpackChunkName: "dashboardChunk" */ "../../scenes/dashboard/Dashboard.js")} />
And using the above, I've made the changes in route as follows,
<Route exact path="/ani-demo" ponent={AniDemo} />
<Route exact path="/dashboard" ponent={Dashboard} />
With the help of the above changes that I made, I'm able to create chunks properly with the names that I've mentioned in the ments inside import statements ie aniDemoChunk.js and dashboardChunk.js respectively.
And these chunks load only when the respective ponent is called ie aniDemoChunk.js is loaded on browser only when AniDemo ponent is called or requested. Similarly for the Dashboard ponent respectively.
Note: If anyone is getting error re:Unexpected token import. So to support import()
syntax just replace import to System.import()
or else use babel-plugin-syntax-dynamic-import.
Webpack must be able to determine the imported path during static analysis. If you pass an argument into require, this is not possible.
It is best to put the actual path into require.ensure
, i.e.
require.ensure(
['src/ponents/scenes/dashboard/dashboard']
require =>
resolve(require('src/ponents/scenes/dashboard/dashboard').default)
error => reject(error),
'dashboardChunk'
)
or use the newer dynamic import syntax. With the newer syntax you could simplify the above into:
Loadable({
loader: () => import(/* webpackChunkName: "dashboardChunk" */ 'src/ponents/scenes/dashboard/dashboard')
loading: MyLoader
})
Also, the loading
argument should be a ponent to display while your asynchronous load is taking place, e.g. some kind of loading animation.
本文标签: javascriptCode Splitting with reactloadable gives ErrorCannot find module quotquotStack Overflow
版权声明:本文标题:javascript - Code Splitting with react-loadable gives Error : Cannot find module "." - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742245780a2439385.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论