react-loadable

问题 I'm trying to introduce code splitting into my app using react-loadable. I tried it on a very simple component: const LoadableComponent = Loadable({ loader: () => import('components/Shared/Logo/Logo'), loading: <div>loading</div>, }); However, when this component is rendered, I get the following error: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of

来源： https://stackoverflow.com/questions/50176706/how-test-a-react-loadable-component

问题 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('.

问题 Please read this properly before marking as duplicate, I assure you I've read and tried everything everyone suggests about this issue on stackoverflow and github. I have a route within my app rendered as below; <div> <Header compact={this.state.compact} impersonateUser={this.impersonateUser} users={users} organisations={this.props.organisations} user={user} logOut={this.logout} /> <div className="container"> {user && <Route path="/" component={() => <Routes userRole={user.Role} />} />} </div>

问题 Please read this properly before marking as duplicate, I assure you I've read and tried everything everyone suggests about this issue on stackoverflow and github. I have a route within my app rendered as below; <div> <Header compact={this.state.compact} impersonateUser={this.impersonateUser} users={users} organisations={this.props.organisations} user={user} logOut={this.logout} /> <div className="container"> {user && <Route path="/" component={() => <Routes userRole={user.Role} />} />} </div>

问题 Please read this properly before marking as duplicate, I assure you I've read and tried everything everyone suggests about this issue on stackoverflow and github. I have a route within my app rendered as below; <div> <Header compact={this.state.compact} impersonateUser={this.impersonateUser} users={users} organisations={this.props.organisations} user={user} logOut={this.logout} /> <div className="container"> {user && <Route path="/" component={() => <Routes userRole={user.Role} />} />} </div>

问题 I am basically trying to do a poc on extracting the some part of my main application into a separate package.A Sample separate package I have built it in my git repo myapp-poc-ui. Now I am trying to access this in my main application. package.json : "dependencies": { "myapp-poc-ui": "git+https://github.com/prabhatmishra33/myapp-poc-ui#master", "react": "^16.10.1", "react-dom": "^16.10.1", "react-scripts": "3.2.0" }, I am accessing the exported module in my main app by: import React from

问题 I am currently trying to code split for react server side rendering. Everything works fine except the refreshing part. When I refresh the page, Everything shows in server side. However, the split second right before client side takes over the lazy loading component is gone then it show up when client side start rendering again. "webpack": "^4.4.0", "mini-css-extract-plugin": "^0.4.0", react-loadable.json part { "undefined": [ { "id": 2, "name": null, "file": "styles.css", "publicPath": "/dist

问题 I have a working react.js application, which works using npm start (app built using create-react-app). When I try to run npm run build, it builds the application. I serve it using serve -s build -l 3000 It loads the first dashboard page but does not communicate with the server. I have put console.log statements in server to check for any requests coming in, but it never logs anything... which means the client does not talk to the server. I have proxy statement in package.json to connect to

问题 This is essentially all my code. I am running Hapi and trying to use react-loadable to server render my React application. I have added a lot of the missing pieces to the code here. const location = req.url.pathname const context = {} const modules = [] const Router = () => ( <Switch> <Route exact path="/" component={Home} /> <Route path="/login" component={Login} /> <Route path="/me" component={Profile} /> <Route component={NotFound} /> </Switch> ) const App = () => ( <StaticRouter location=