Cannot resolve 'react-dom' and 'react' in react-phoenix/priv/js

[buildWithSoul]

Successfully compiles, but when I start server I am seeing Webpack is watching the files…

Hash: 5d64ea7a3e7aaa72b63b Version: webpack 4.4.0 Time: 1083ms Built at: 1/29/2019 11:27:10 PM Asset Size Chunks Chunk Names ../css/app.css 10.6 KiB ./js/app.js [emitted] ./js/app.js app.js 85.2 KiB ./js/app.js [emitted] ./js/app.js ../favicon.ico 1.23 KiB [emitted]
../robots.txt 202 bytes [emitted]
../images/phoenix.png 13.6 KiB [emitted]
[../deps/phoenix_html/priv/static/phoenix_html.js] 2.17 KiB {./js/app.js} [built] [../deps/react_phoenix/priv/js/react_phoenix.js] 1.62 KiB {./js/app.js} [built] [./css/app.scss] 39 bytes {./js/app.js} [built] [./js/app.js] 644 bytes {./js/app.js} [built] [0] multi ./js/app.js 28 bytes {./js/app.js} [built]

• 8 hidden modules

ERROR in ../deps/react_phoenix/priv/js/react_phoenix.js Module not found: Error: Can't resolve 'react-dom' in '/${PATH}/deps/react_phoenix/priv/js'

Getting this as well as a similar issue for 'react'. Error is triggered during webpack compilation. I have added the .babelrc and followed documentation accurately. ${PATH} is a shorthand I mutated from original string since the URI was quite long

[geolessel]

That makes it sound like you haven't installed react or react-dom. Can you double check that you have run

cd assets && yarn add react react-dom

for me?

[buildWithSoul]

Yes I have followed all directions on the site and have installed both react & react-dom in my local package.json as well as imported react-phoenix right after the two imports.

[buildWithSoul]

Attached are webpack and deps file as well. Thanks for debugging effort on this.

[geolessel]

Do you have a repo I could clone and try out?

[buildWithSoul]

Yes, here it is- https://github.com/abhishekover9000/phoenix-react-test

[buildWithSoul]

For more context running Elixir 1.8.0 (compiled with Erlang/OTP 21), Phoenix v1.4.0 , and tried on both Node v10.10.0 and v11.8.0 locally

[buildWithSoul]

anyone able to reproduce the error?

[andrewmurph]

@abhishekover9000 - I had the same issue and was able to reproduce in your repo.

The issue appears to be related to how we link to a local file in package.json: "react-phoenix": "file:../deps/react_phoenix"

The issue and fix is described in this article.

To solve, add the following to module.exports in webpack.config.js:

resolve: {
  alias: {
      react: path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom')
  }
}

[geolessel]

@abhishekover9000 @andrewmurph I tried reproducing this and it worked fine for me. Then I had an idea. Are both of you using npm install or yarn install? I always use yarn install so when it worked fine for me, I removed package-lock.json and the node_modules directory and tried npm install. It finally failed and gave me the errors you describe. Once again, I removed package-lock.json and node_modules, ran yarn install again, and it all worked OK and I saw your Hello World react component render.

Can you both verify that you are using npm install?

[andrewmurph]

@geolessel I am indeed using npm install!

I removed package-lock.json and node_modules and used yarn install instead and can confirm it works perfectly (both with and without adding webpack aliases).

[andrewmurph]

@geolessel How would you like to proceed?

The Phoenix project references npm install (like in phx.new and the up and running guide), so I feel a good resolution would be to add a section in this project's docs for those using npm.

If you're happy with the webpack alias solution I can modify #40 to specify that it's only for those using npm.

p.s. Thank you for creating this project!

[buildWithSoul]

Thanks @andrewmurph and @geolessel for help in the debugging effort. Can confirm that npm i was the issue. IMO we should include andrewmurph PR to clarify for the non-yarn users. Happy hacking!

[geolessel]

@andrewmurph Thanks for the PR. I do have a request to make it more specific to npm users.