Code Monkey home page Code Monkey logo

Comments (8)

paul-mesnilgrente avatar paul-mesnilgrente commented on June 7, 2024 1

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.

ahangarha avatar ahangarha commented on June 7, 2024

Please follow https://github.com/reactjs/react-rails#server-side-rendering instructions for webpack config.

from react-rails.

paul-mesnilgrente avatar paul-mesnilgrente commented on June 7, 2024

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.

ahangarha avatar ahangarha commented on June 7, 2024

@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.

paul-mesnilgrente avatar paul-mesnilgrente commented on June 7, 2024

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.

ahangarha avatar ahangarha commented on June 7, 2024

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.

ahangarha avatar ahangarha commented on June 7, 2024

I will check your repo soon.

CC @Judahmeek @justin808 regarding the generator behavior.

from react-rails.

Judahmeek avatar Judahmeek commented on June 7, 2024

@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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.