Phoenix not working - ERROR in ./js/app.js Module build failed

Hi @jejuro,
I don’t know much about webpack, but it is looking like the issue is in there. Are you able to put up a sample broken project on github (or similar)? These kinds of things are really hard to troubleshoot with a couple of error messages - there’s probably some conflicting packaging tool version or similar, but really hard to see without webpack.config.js, package.json, package-lock.json etc.

You could try with Phoenix 1.4.10. (You are using 1.4.0)

And then, You might also try to add a babel.config.js in assets/

module.exports = api => {
  api.cache(true);

  const presets = [
    "@babel/preset-env",
  ]
  const plugins = [
  ]

  return {
    presets,
    plugins
  };
}

If you do not care about the version of phoenix you are using then install asdf link(to isolate other system issues) then install Erlang and Elixir and install phoenix the latest version and it should work well. That is my current setup and i have no problems.

Also change npm with yarn, fewer errors and easy to add assets with these commands:

yarn add package_name         """add's package directly"""

yarn add -D package_name     """add's package to dev"""

yarn remove package_name     """no matter where it is in dev or not it will remove it"""

With these tools you shouldn’t have any problems in the future.

https://github.com/jejuro/broken_islands_interface

Would you see the files for a moment? Thank you

Thanks wolfiton
Would you explain how to use asdf in detail? I have read official docs of asdf, but still can’t grasp how to use it step by step. I tried;
$ asdf install erlang latest
$ asdf install elixir latest

There is no phoenix module, so “asdf install phoenix latest” is not working. I have set the current version as elixir 1.9.4.
$ asdf global elixir 1.9.4

Then, what is the next step?

Now…
$ asdf current
elixir 1.9.4 (set by /Users/Jupeter/.tool-versions)
erlang 22.2.1 (set by /Users/Jupeter/.tool-versions)

If I wanna start a new phoenix app, is the command below different from previous ones before using asdf?
$ mix phx.new islands_interface --no-ecto

Or, should I use asdf for babel, webpack too?

mix archive.install hex phx_new 1.4.11

(from Installation — Phoenix v1.8.8)

I already installed it before using asdf…

Anyway, I install it again, and try mix phx.new …

What’s your OS out of interest?

oh… Mac os 10.13.1

and, the same problem continues at “npm install && node node_modules/webpack/bin/webpack.js --mod”

ERROR in ./js/app.js
Module build failed: Error: Package exports for ‘/Users/Jupeter/islands_interface/assets/node_modules/@babel/helper-compilation-targets’ do not define a ‘.’ subpath