Couldn't resolve phoenix framework - [ERROR] Cannot read directory "../..": operation not permitted

ammy

while I try to give the command (mix phx.server) in the vs code terminal
I am getting some errors.

You can mark the path "phoenix_live_view" as external to exclude it from the bundle, which will remove this error.

5 errors
[watch] build finished
[watch] build started (change: "../..")
✘ [ERROR] Cannot read directory "../..": operation not permitted

✘ [ERROR] Could not resolve "bootstrap"

    js/app.js:4:7:
      4 │ import "bootstrap"
        ╵        ~~~~~~~~~~~

  You can mark the path "bootstrap" as external to exclude it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "phoenix_html"

    js/app.js:23:7:
      23 │ import "phoenix_html"
         ╵        ~~~~~~~~~~~~~~

  You can mark the path "phoenix_html" as external to exclude it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "phoenix"

    js/app.js:25:21:
      25 │ import {Socket} from "phoenix"
         ╵                      ~~~~~~~~~

  You can mark the path "phoenix" as external to exclude it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "phoenix_live_view"

    js/app.js:26:25:
      26 │ import {LiveSocket} from "phoenix_live_view"
         ╵                          ~~~~~~~~~~~~~~~~~~~

  You can mark the path "phoenix_live_view" as external to exclude it from the bundle, which will remove this error.

5 errors
[watch] build finished
[watch] build started (change: "../..")
✘ [ERROR] Cannot read directory "../..": operation not permitted

3 comments

/phoenix #liveview

0 2147 3

2022-11-26 17:12:25 UTC

Showing Posts 1 to 3

Show Best Posts
Show All (oldest first)
Show All (newest first)

al2o3cr

It seems like the build tools aren’t finding a directory they’re supposed to - can you post the top part of your app.js, or wherever that ../.. path is coming from?

Post #1

ammy

yes sure

// We import the CSS which is extracted to its own file by esbuild.
// Remove this line if you add a your own CSS build pipeline (e.g postcss).
//import "../css/app.scss";

import "bootstrap"

// If you want to use Phoenix channels, run `mix help phx.gen.channel`
// to get started and then uncomment the line below.
// import "./user_socket.js"

// You can include dependencies in two ways.
//
// The simplest option is to put them in assets/vendor and
// import them using relative paths:
//
// import "../vendor/some-package.js"
//
// Alternatively, you can `npm install some-package --prefix assets` and import
// them using a path starting with the package name:
//
// import "some-package"
//
// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.

import "phoenix_html"

// Establish Phoenix Socket and LiveView configuration.

import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"
import topbar from "../vendor/topbar"

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})

// Show progress bar on live navigation and form submits
topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
window.addEventListener("phx:page-loading-start", info => topbar.show())
window.addEventListener("phx:page-loading-stop", info => topbar.hide())

// connect if there are any LiveViews on the page
liveSocket.connect()

// expose liveSocket on window for web console debug logs and latency simulation:
// >> liveSocket.enableDebug()
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket

Post #2

al2o3cr

General note: I’ve reformatted your post to use triple-backticks (```) for code formatting. This is especially important in this situation because otherwise Markdown converts .. to .. which is SUPER CONFUSING

I don’t think it’s related - but can you tell us more about whatever alternative CSS pipeline that’s being used here?

Back to your original question, I don’t see anything notably unexpected in your app.js which makes me suspect esbuild’s configuration. What does your configuration (generated in config/config.exs by default) look like? Here’s the version from the Phoenix generator:

https://github.com/phoenixframework/phoenix/blob/3cf1f1065ce11a906bd04b7841814cdced3f0df2/installer/templates/phx_single/config/config.exs#L34-L42

That NODE_PATH bit at the end is critical - it makes lines like import "phoenix_html" work correctly. If it was misconfigured, you’d see exactly the errors you are currently seeing.

Post #3

— All posts loaded —