Comments (8)
Alright, I understand the confusion. The rails generate react-rails:install
gives you a server_rendering.js
but it's not actually working as is. It feels like the tool should provide an extra step like rails generate react-rails:install-ssr
and make it clearer in the docs.
I copied the webpack config files across from the dummy app and the server error keeps happening (I pushed the changes to the repo I provided). I read all the docs but unfortunately, I can't find what I am doing wrong. What's the next step?
from react-rails.
Please follow https://github.com/reactjs/react-rails#server-side-rendering instructions for webpack config.
from react-rails.
Thanks for your answer but what am I supposed to look at? I followed the README setup and so I used all the defaults which are described by what you pointed me at.
I tried a few different paths on config.react.server_renderer_directories
just in case. But the issue remains:
ActionView::Template::Error (No such file or directory @ rb_sysopen - /home/paul/Dev/blog/public/packs/server_rendering.js)
from react-rails.
@paul-mesnilgrente I mean this part in particular:
react-rails
must load your code. By convention, it uses server_rendering.js, which was created by the install task. This file must include your components and their dependencies (eg, Underscore.js).
Requires separate compilations for server & client bundles (see Webpack config)
from react-rails.
Ok, the step 4 'Install react-rails' in the README.md: https://github.com/reactjs/react-rails#get-started-with-shakapacker tells you to run rails generate react:install
which is generating the server_rendering.js
file which has this content:
// By default, this pack is loaded for server-side rendering.
// It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);
You will find it on the dummy repository I provided: https://github.com/paul-mesnilgrente/react-rails-shakapacker-bug/blob/main/app/javascript/packs/server_rendering.js
So that's not the problem, unfortunately, any other ideas?
from react-rails.
That is not enough. You need to make separate webpack configurations for client and server. Please follow the instruction and share the result.
from react-rails.
I will check your repo soon.
CC @Judahmeek @justin808 regarding the generator behavior.
from react-rails.
@paul-mesnilgrente Sorry for the confusion.
I believe the last bit you're missing is that, having updated your shakapacker configuration, you'll need to run bin/shakapacker
to compile the server-bundle (SERVER_BUNDLE_ONLY=yes bin/shakapacker
if you want to compile ONLY the server bundle).
bin/shakapacker-dev-server
only compiles client-code.
Generally, the easiest way to compile both server & client bundles at the same time is to use a Procfile and then run it with either Foreman or Overmind
Multiple terminal tabs work just as well though...
from react-rails.
Related Issues (20)
- Update to React 18 for embedded React HOT 2
- Server side rendering broken in 2.7 HOT 2
- `ReactDOM.version?.split` not transpiled? HOT 3
- Can't resolve 'react-dom/client' HOT 3
- Import react_component but it' shown HOT 2
- compare/contrast and migration steps to react_on_rails HOT 5
- Component doesn't render on jsbundling-rails webpacker HOT 5
- Component not loading in rails app HOT 5
- react-rails v3.1.0 is broken HOT 1
- Re-organize documentations in docs folder
- server_rendering.js not found following README HOT 1
- How do I handle styling?
- esbuild HOT 1
- Error related to server_rendering.js not found with SSR HOT 3
- Setup StrictMode for components HOT 2
- get started docs r-r version HOT 1
- Rails 7.1 Renders Partial Header HOT 1
- Server side rendering `window` behaves differently than Node.js? HOT 4
- Issues with Loading React Component for Cuprite in Rails 7.1
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 react-rails.