Uncaught Error: Cannot find module 'web/static/js/app' from '/'

Question

When trying to follow this tutorial : Chat web-app using Phoenix and Vue.js — Part 1, I'm stuck where I should see this message in the browser console

Joined successfully Object {ob: Observer}

I have follow every single instructions:

Time to create the Phoenix project : SUCCESS
Let’s integrate Vue.js : SUCCESS
Time to initialize the Vue app and create our first component : SUCCESS
Vue.js and Phoenix sitting in a tree.. Time to hook these two up!: Whenever I run this command, I get

app.js:61 Uncaught Error: Cannot find module 'web/static/js/app' from '/' at require (app.js:61) at browser.js:190

I have tried everything I found on internet but still not able to do it

Below are my code and file location in the project:

web/static/app.js

import "phoenix_html"
import socket from "/js/socket"

web/static/js/socket.js

import {Socket} from "phoenix"
import Vue from 'vue'
import MyApp from "../components/my-app.vue"

let socket = new Socket("/socket", {params: {token: window.userToken}})
socket.connect()

// Create the main component
Vue.component('my-app', MyApp)

// And create the top-level view model:
new Vue({
  el: '#app',
  render(createElement) {
    return createElement(MyApp, {})
  }
});

web/channels/room_channel.ex

defmodule Vuechat.RoomChannel do
    use Vuechat.Web, :channel

    def join("room:lobby", payload, socket) do
        {:ok, socket}
    end

    def join("room:" <> _private_room_id, _params, _socket) do
        {:error, %{reason: "Unauthorized"}}
    end

    def handle_in("new_msg", %{"body" => body}, socket) do
        broadcast! socket, "new_msg", %{body: body}
        {:noreply, socket}
    end

    def handle_out("new_msg", payload, socket) do
        push socket, "new_msg", payload
        {:noreply, socket}
    end
end

Does anyone have a solution on this ?

The error message says you are expecting app.js in web/static/js/app, but yours seems to be in web/static/app.js. Try moving the file to the /js/ folder. — Gabriel Prá

memoricab memoricab · Accepted Answer · 2019-01-10T01:10:25

I don't know if it helps you but I could not comment.

You may have forgotten to run these commands:

npm install --save vue vue-router
npm install --save-dev vue-brunch babel-plugin-transform-runtime

Unless you don't install above dependencies the error will be the same as yours.

Uncaught Error: Cannot find module 'web/static/js/app' from '/'

1 Answers