Issue with Phoenix 1.3

[abitdodgy]

I'm trying to use this lib with Phoenix 1.3 and I get the following error on npm install:

enoent ENOENT: no such file or directory, open '/Users/mohamad/Code/example/assets/deps/react_phoenix'

I'm assuming this is to do with assets moving into the root in Phoenix 1.3. What's the best way to solve this?

[abitdodgy]

OK, figured it out a minute later (duhhh)... it's the package.json file that needs to change to reflect Phoenix 1.3. structure:

It needs to be this:

"react-phoenix": "file:../deps/react_phoenix"

Instead of this:

"react-phoenix": "file:deps/react_phoenix"

[geolessel]

I'll reopen this as a reminder to update the docs (when I have the time) to be more clear.

[abitdodgy]

@geolessel actually, it might be a good idea to keep this open for another reason. I can't get the installation to work. I followed the steps in the Readme and in the moduledoc, but I'm getting an endless output in the console each time I try to launch the Phoenix server:

/bin/sh: node_modules/.bin/react-stdio: No such file or directory

I did change my config.exs to this:

config :react_phoenix,
    compiled_path: Path.join(["priv", "static", "js", "components"]),
    react_stdio_path: Path.join(["assets", "node_modules", ".bin", "react-stdio"])

PS: Also, why do we need to add react manually to our dependencies in package.json? Aren't these already a dependency of the lib? I mean this lines:

  "dependencies": {
    "babel-preset-react": "^6.23.0",  <- This line here one
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "react": "^15.4.2",   <- And this one
    "react-dom": "^15.4.2",  <- And this one
    "react-phoenix": "file:../deps/react_phoenix"

[abitdodgy]

After some investigation, it seems like configuring react_stdio_path in config.exs doesn't do anything. The default value from lib/react_phoenix/react_io.ex is always used.

[scmx]

I'm experiencing the same thing as @abitdodgy regarding /bin/sh: node_modules/.bin/react-stdio: No such file or directory and overriding with react_stdio_path: Path.join(["assets", "node_modules", ".bin", "react-stdio"])

[abitdodgy]

@scmx I managed to get client side rendering working on my fork. I'll submit a pull request here once I get it fully working (if you or @geolessel can help me get to the bottom of an error for server side rendering, I would appreciate it). But I made some adjustments.

You want to change a few things to the following:

1. The deploy key paths in package.json:

   "deploy": "brunch build --production babel assets/js/components --out-dir ../priv/static/js/components --presets=env,react",
   

2. The path for react-phoenix key in package.json:

   "react-phoenix": "file:../deps/react_phoenix"
   

3. The paths watchers in dev.exs and the cd command (not sure if this is necessary, but I needed it to get it working)

   watchers: [
     node: ["node_modules/.bin/brunch", "watch", "--stdin",
                   cd: Path.expand("../assets", __DIR__)],
     node: ["node_modules/babel-cli/bin/babel.js", "--watch",
           "js/components",
           "--out-dir", "../priv/static/js/components",
           "--presets=env,react",
       cd: Path.expand("../assets", __DIR__)
   ]
   

4. The compiled_paths in config.exs

   config :react_phoenix,
     compiled_path: Path.join(["..", "priv", "static", "js", "components"])
   

At this point client side rendering is working. But server side rendering produces this error:

Failed to call to json service Elixir.ReactPhoenix.ReactIo Cannot load component: priv/static/js/components/media.js

But the file does exist in that location and it is compiled. I'm assuming it's something to do with compiled_path: Path.join(["..", "priv", "static", "js", "components"]) in config.exs.

Any ideas?

PS: @scmx I'm using my form, where I changed react-phoenix/lib/react_phoenix/react_io.ex to this:

use StdJsonIo, otp_app: :react_phoenix, script: Application.get_env(:react_phoenix, :react_stdio_path, "assets/node_modules/.bin/react-stdio")

I just appended an assets/ to the default path in the config.

[geolessel]

@abitdodgy @scmx As for the compiled_path not being recognized, make sure you are mix deps.clean react_phoenix && mix deps.get before you are starting up your server again. Your local copy of the module has already been compiled with the default settings.

I'm thinking through a separate section of the README for Phoenix 1.3 and 1.2 since there are so many changes.

[geolessel]

@abitdodgy @scmx I also figured out the "Cannot load component" failure. I struggled quite a bit to figure this one out and did so mainly in the command line and outside of Phoenix/Elixir since it was mainly a node/js issue.

It turns out this is the answer to @abitdodgy's question about why we need to require react in our own package.json manifest. I'm not a javascript expert (especially when it comes to node), but manually adding react to my package.json file did the trick and made the server-side rendering work without the "Cannot load component" error message (which comes from the react-stdio npm package). I had to dig around in react-stdio's code to see exactly how that error comes up. After adding some debugging output, react-stdio couldn't find react when it was run in a project without react in it's package.json file (even if it was already in node_modules).

Hopefully that clears up the remaining questions for you guys. I think that plus making sure you mix deps.clean react_phoenix && mix deps.get if you change the config fixes them up. Let me know if otherwise and I'll work on the README.

[abitdodgy]

@geolessel thanks for digging around for this issue. I added the lines to package json. It's now identical to that in the readme, except with Phoenix 1.3 paths. I also cleaned up the deps, but I'm still having the same issue. Did you make the same changes I did, or did you do something differently?

[geolessel]

@abitdodgy 🤔 I'm not exactly sure what errors your getting at the moment nor the cause without looking at your app code. In order to help get you going (and others having similar issues), I've created a new repo that contains an example Phoenix 1.3 app that uses both server-side and client-side rendering. Check it out here: https://github.com/geolessel/react-phoenix-example-1.3

If you'd like, look at each commit (https://github.com/geolessel/react-phoenix-example-1.3/commits/master) as I step through each step of the setup from phx.new through rendering client- and server-side.

Is that helpful?

[abitdodgy]

@geolessel I just forked your example repo (thanks for creating it) and had the same issue. I can only imagine this is a problem with my node installation? I deleted and reinstalled node using homebrew and had the same issue. I'm a but stumped to be honest.

[geolessel]

@abitdodgy hmm, that's too bad. What version of node are you running (node -v)? What version of npm (npm -v)? What is the exact error that you are getting in my example app?

[geolessel]

@abitdodgy I think I figured it out and it's an issue on my end. I don't think server-side rendering is consistently working at the moment. I'll update you when I figure it out.

[abitdodgy]

@geolessel thanks for the heads up. Please keep me posted if you find something new. Thanks!

[vestimir]

@geolessel any news on that? Can you share any clues, where to search for the problem, so we can poke around and try to provide solution.

[jpinnix]

@geolessel Did you ever figure out the issue with server-side rendering?

[BenMusch]

I am having the issue that displays:

/bin/sh: node_modules/.bin/react-stdio: No such file or directory

I'm quite confident my installation is correct. assets/node_modules/.bin/ contains react-stdio

Any idea what's going on?

[geolessel]

@abitdodgy @scmx @vestimir @jpinnix @BenMusch

I apologize for my absence from this thread. I would blame it on the fact that I cannot stand Github's notification system (please just email me when something happens in my repo), but that doesn't excuse me for not popping in here every once in a while to see what's up.

In the end, I decided that server-side rendering was causing more issues than was reasonable for a current Elixir package, so I have removed it in #24 (v0.5.0).

FWIW, I honestly had it working when I created the server-side rendering code. However, subsequent attempts were touchy at best. I think what I have surmised is that for every time I did get it working, I had react_stdio installed in the same directory as my react components.

If you'd like to continue trying to get server-side rendering working, please update me on your progress. If we can get it working and documented well, I'd love to add it back in. v0.5.0 only removes all the old server-side code and updates the README for Phoenix 1.3. No new features or changes are there except for deleting server-side stuff, so feel free to continue to experiment with v0.4.3.