Comments (12)
https://github.com/webpack/react-proxy-loader
from webpack-howto.
Hi guys, it's 2020 and odysseyscience/react-router-proxy-loader hasn't been updated in 4 years.
Do you know what's today's best practice to set webpack with entrypoints detected from react router v5 routes and react 16 ?
from webpack-howto.
Or is this the recommended pattern?
https://github.com/rackt/react-router/blob/master/examples/partial-app-loading/app.js
from webpack-howto.
@blittle did you resolve this? Do you think this question should be asked in the React-Router community?
from webpack-howto.
@aarongreenlee I have moved on to other things at the moment, but plan to revisit this soon. Thanks @sokra for the link, I'll check it out!
from webpack-howto.
We adapted react-proxy-loader
to load modules on willTransitionTo
, and I just posted the code here: https://gist.github.com/seanadkinson/a1eb7d3a79b2036d0c5e
I didn't sanitize it to be the most reusable, but it could help others achieve what I was looking for, which is to asynchronously load page bundles when the page is requested. I have an unnecessary dependency on jquery
, but that should be able to be removed easily if someone doesn't want it.
I may clean this up and put on npm
soon.
UPDATE: Code published here: https://github.com/odysseyscience/react-router-proxy-loader
from webpack-howto.
Ok, I'll try your https://github.com/odysseyscience/react-router-proxy-loader
from webpack-howto.
I really like react-router-proxy-loader, however using it in an isomorphic app is giving me trouble, as the app cannot find "react-router-proxy" when processing on the server. I need a way for the serverside to understand, or ignore 'react-router-proxy' but webpack loader to still pick it up.
error: Sending 500 ("Server Error") response:
Error: Cannot find module 'react-router-proxy?name=campaigns!./Campaigns.react'
This is the route def:
<Locations path={this.props.path}>
<Location path="/" handler={MyEloqua} />
<Location path="/campaigns/" handler={require('react-router-proxy?name=campaigns!./Campaigns.react')} />
</Locations>
from webpack-howto.
Was just commenting on server-side rendering here: odysseyscience/react-router-proxy-loader#8
See comments there, but basically yes, we'd need to move the react-router-proxy!
prefix into a place where node doesn't see it, but webpack does. The only place for this would seem to be in the configuration file, possibly using an alias
, but I haven't tried this yet.
Not having built an isomorphic application yet, I'm curious what people do in situations with webpack-specific require statements (such as using the imports-loader
). Is there a common strategy?
Need some help from the community on how best to support isomorphic applications in react-router-proxy-loader
.
from webpack-howto.
Thanks for the response. I'd love to help work on a solution for this, and am happy to guide the development or help if needed. I've figured out two work arounds, one which came from you. The first work around I came up with is as follows:
handler={typeof require.ensure != 'undefined' ? require('react-router-proxy!./'+component) : require('./' + component)}
As you can see I am using require.ensure to figure out if the code is being reached through webpack or node (no require.ensure). Also note I am using webpack contexts, which allow dynamic requires.
This works but forces a re-draw on the client because the checksums do not match up, the error on the client is:
Uncaught Error: Invariant Violation: You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side.
After reading your reply, I decided to try out moving the loader part to the webpack config. Turns out alias does not work but has the same client error above, but you can do this:
module: {
loaders: [
{ test: /Users.react$/, loader: "react-router-proxy!jsx" },
{ test: /Contacts.react$/, loader: "react-router-proxy!jsx" },
{ test: /.react$/, loader: "jsx-loader" }
],
},
Then in the app, it's back to a simple require like require('./Users.react').
Also, dynamic contexts still work:
handler={require('./' + component)}
Again same client error, this comes from the fact that react-router-proxy-loader must write something different to the HTML that is different from rendering without react-router-proxy-loader on the server.
I can try to dig in more.
from webpack-howto.
@jregeimbal Let's continue the conversation here: odysseyscience/react-router-proxy-loader#8
Not really a "Multiple entry-points with React Router" issue for react-router-proxy-loader
to support server-side rendering.
from webpack-howto.
@blittle
Broken link
Or is this the recommended pattern?
https://github.com/rackt/react-router/blob/master/examples/partial-app-loading/app.js
from webpack-howto.
Related Issues (20)
- How to inject bundled script to existing html? HOT 1
- How to use cors with webpack? HOT 1
- Connecting the frontend with the backend
- How to use webpack async loading with Ionic 2 application ? HOT 1
- Worth adding requirement of having webpack installed?
- Error in main.js when running: Module build failed: ReferenceError: [BABEL] HOT 2
- Capitalisation significance?
- webpack.optimize.CommonsChunkPlugin optimizes common stylesheets to an unexpected file name HOT 1
- Feature flags for different entry points
- Multiple entrypoints: what about components? HOT 1
- Running webpack --watch on old React project gives me the following error
- npm start introduce error
- CSS files: Is there a difference between require() and import?
- webpack command fails with below error. HOT 2
- Add more on language/framework specific configs
- Update to webpack 2 HOT 1
- include css and js files into HTML HOT 1
- webpack inject production js files after all included js files.
- A line of Chinese translation is incorrect HOT 1
- Module build failed: ReferenceError: [BABEL] webpack-howto/example/modules/main.js: Unknown option: direct.presets
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack-howto.