morphdom not found because phoenix_html imported w/o deps path

[simonmcconnell]

Environment

• Elixir version (elixir -v): 1.12.1 on OTP 24
• Phoenix version (mix deps): github master
• Phoenix LiveView version (mix deps): github master
• NodeJS version (node -v): 14.17.0
• NPM version (npm -v): 6.14.13
• Operating system: Windows 10
• Browsers you attempted to reproduce this bug on (the more the merrier): N/A
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

I tried pulling the master branch in to test out the webpack 5 build. I get this error when starting the app. I noticed in the changelog there is a bug fix with a description quite similar to what I'm experiencing but I can't see an issue or PR related.

I found this answer on stackoverflow which says to replace import "phoenix_html" import "../../deps/phoenix_html". I had to make this change and cd deps/phoenix_live_view/assets and run npm i for it to work.

I feel like I've missed a step somewhere...?

Module not found: Error: Can't resolve 'morphdom' in 'C:\Users\simon\code\logacy\deps\phoenix_live_view\assets\js\phresolve 'morphdom' in 'C:\Users\simon\code\logacy\deps\phoenix_live_view\assets\js\phoenix_live_view'
  using description file: C:\Users\simon\code\logacy\deps\phoenix_live_view\assets\package.json (relative path: ./js/phoenix_live_view)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\Users\simon\code\logacy\deps\phoenix_live_view\assets\js\phoenix_live_view\node_modules doesn't exist or is not a directory
      C:\Users\simon\code\logacy\deps\phoenix_live_view\assets\js\node_modules doesn't exist or is not a directory
      C:\Users\simon\code\logacy\deps\phoenix_live_view\assets\node_modules doesn't exist or is not a directory
      C:\Users\simon\code\logacy\deps\phoenix_live_view\node_modules doesn't exist or is not a directory
      C:\Users\simon\code\logacy\deps\node_modules doesn't exist or is not a directory
      C:\Users\simon\code\logacy\node_modules doesn't exist or is not a directory
      C:\Users\simon\code\node_modules doesn't exist or is not a directory
      C:\Users\simon\node_modules doesn't exist or is not a directory
      C:\Users\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
 @ ../deps/phoenix_live_view/assets/js/phoenix_live_view/view.js 5:0-35 316:20-28 495:24-32 521:20-28 816:8-24
 @ ../deps/phoenix_live_viiex(1)> ew/assets/js/phoenix_live_view/live_socket.js 76:0-26 357:19-23
 @ ../deps/phoenix_live_view/assets/js/phoenix_live_view/index.js 9:0-39 10:0-22
 @ ./js/app.js 28:0-47 61:21-31

webpack 5.37.1 compiled with 1 error in 8635 ms

Expected behavior

app runs

[bcardarella]

once #1507 is merged you need to clean your node_modules/ and remove your package-lock.json file then npm install

[simonmcconnell]

resolves the need to specify deps location for phoenix_html (or mix wasn't pulling the latest github project - I changed it to use specific refs as I noticed it didn't pull in latest lv from github) in app.js but it is still not finding or installing morphdom. It realises it is a dependency but expects it to be in ...\my_app\deps\phoenix_live_view\assets\js\phoenix_live_view\node_modules. I can npm install in /deps/phoenix_live_view to get it working 🤷 .

{
  "name": "assets",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
...
        "phoenix": "file:../deps/phoenix",
        "phoenix_html": "file:../deps/phoenix_html",
        "phoenix_live_view": "file:../deps/phoenix_live_view",
        "topbar": "^1.0.1"
      },
...
    "phoenix": {
      "version": "file:../deps/phoenix"
    },
    "phoenix_html": {
      "version": "file:../deps/phoenix_html"
    },
    "phoenix_live_view": {
      "version": "file:../deps/phoenix_live_view",
      "requires": {
        "morphdom": "2.6.1"
      }
    },
...

ERROR in ../deps/phoenix_live_view/assets/js/phoenix_live_view/dom_patch.js 5:0-32
Module not found: Error: Can't resolve 'morphdom' in 'C:\Users\simon\code\logacy\deps\phoenix_live_view\assets\js\phoenix_live_view'
resolve 'morphdom' in 'C:\Users\simon\code\logacy\deps\phoenix_live_view\assets\js\phoenix_live_view'
  Parsed request is a module
  using description file: C:\Users\simon\code\logacy\deps\phoenix_live_view\assets\package.json (relative path: ./js/phoenix_live_view)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\Users\simon\code\logacy\deps\phoenix_live_view\assets\js\phoenix_live_view\node_modules doesn't exist or is not a directory
      C:\Users\simon\code\logacy\deps\phoenix_live_view\assets\js\node_modules doesn't exist or is not a directory
      C:\Users\simon\code\logacy\deps\phoenix_live_view\assets\node_modules doesn't exist or is not a directory
      C:\Users\simon\code\logacy\deps\phoenix_live_view\node_modules doesn't exist or is not a directory
      C:\Users\simon\code\logacy\deps\node_modules doesn't exist or is not a directory
      C:\Users\simon\code\logacy\node_modules doesn't exist or is not a directory
      C:\Users\simon\code\node_modules doesn't exist or is not a directory
      C:\Users\simon\node_modules doesn't exist or is not a directory
      C:\Users\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
 @ ../deps/phoenix_live_view/assets/js/phoenix_live_view/view.js 5:0-35 316:20-28 495:24-32 521:20-28 816:8-24
 @ ../deps/phoenix_live_view/assets/js/phoenix_live_view/live_socket.js 76:0-26 357:19-23
 @ ../deps/phoenix_live_view/assets/js/phoenix_live_view/index.js 9:0-39 10:0-22
 @ ./js/app.js 28:0-47 63:21-31

webpack 5.37.1 compiled with 1 error in 2672 ms

[chrismccord]

npm v7 broke file-based dependency fetching. Either downgrading to npm v6, or referencing phoenix_live_view as a git/npm dep will bring things back to working:

To reference from GitHub:

    "phoenix_live_view": "phoenixframework/phoenix_live_view",