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

From today morning, I CAN’T generate a new Phoenix app, because it stops at command “npm install && node node_modules/webpack/bin/webpack.js --mode development” with error messages like below.

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

or;

ERROR in ./js/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Package exports for ‘/Users/Jupeter/hello/assets/node_modules/@babel/helper-compilation-targets’ do not define a ‘.’ subpath …

To solve this issue, I have spent a few hours including updating npm, webpack, and babel etc., but all efforts are in vain.

Any idea?
Thanks in advance.

PS> I asked it on stackoverflow with more details.

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.

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 https://hexdocs.pm/phoenix/installation.html)

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

Now another warning appears.

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

That new warning looks like you didn’t copy in the full command-line (truncated at --mod rather than --mode development)

Can you test (maybe with some other framework) that your node / webpack infrastructure is behaving?

Do you have another machine that you can try?

Have you tried updating all your npm dependencies to the latest?

I am sure Phoenix will work on another machine as it has worked until today without problem.

I have updated all my npm dependencies. First, I removed the default “assets/node_modules”, and then, reinstall the dependencies like;
$ npm install --prefix assets

But, the issue continues. I will remove all the node.js related items, and reinstall them.

I am a refugee from JS spagetti eco-system, and have enjoyed the wonderful elixir+phoenix land for two months until now. But, the nodejs ghost still follows me…

This is the full error message.

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
    at applyExports (internal/modules/cjs/loader.js:485:15)
    at resolveExports (internal/modules/cjs/loader.js:508:12)
    at Function.Module._findPath (internal/modules/cjs/loader.js:577:20)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:879:27)
    at Function.Module._load (internal/modules/cjs/loader.js:785:27)
    at Module.require (internal/modules/cjs/loader.js:956:19)
    at require (/Users/Jupeter/islands_interface/assets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/Users/Jupeter/islands_interface/assets/node_modules/@babel/preset-env/lib/debug.js:8:33)
    at Module._compile (/Users/Jupeter/islands_interface/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103:10)
    at Module.load (internal/modules/cjs/loader.js:914:32)
    at Function.Module._load (internal/modules/cjs/loader.js:822:14)
    at Module.require (internal/modules/cjs/loader.js:956:19)
    at require (/Users/Jupeter/islands_interface/assets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/Users/Jupeter/islands_interface/assets/node_modules/@babel/preset-env/lib/index.js:11:14)
    at Module._compile (/Users/Jupeter/islands_interface/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103:10)
    at Module.load (internal/modules/cjs/loader.js:914:32)
    at Function.Module._load (internal/modules/cjs/loader.js:822:14)
    at Module.require (internal/modules/cjs/loader.js:956:19)
    at require (/Users/Jupeter/islands_interface/assets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at requireModule (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/files/plugins.js:165:12)
    at loadPreset (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/files/plugins.js:83:17)
    at createDescriptor (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at /Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-chain.js:320:26)
    at /Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at Generator.next (<anonymous>)
    at buildRootChain (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-chain.js:120:29)
    at buildRootChain.next (<anonymous>)
    at loadPrivatePartialConfig (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/partial.js:95:62)
    at loadPrivatePartialConfig.next (<anonymous>)
 @ multi ./js/app.js

I have removed all node related files from my computer, then reinstall nodejs.
Problem solved. :joy:

Does Phoenix LiveView also need webpack, babel and other nodejs modules? I hope another world without JS stubs.

Thank you all.
I have really enjoyed learning elixir, phoenix, and ecto for the last two months, and today was the hardest day due to the nodejs stubs such as webpack and babel.

2 Likes

I was about to say that it’s likely your Node installation is old.

As far as I am aware, no. LiveView is supposed to require very minimal JS that basically maintains the WebSockets connection and encode/decode data in transit.

1 Like

@jejuro do you still want to learn how to use asdf?(I was away when you posted)

1 Like

Yes, please. I have googled it, but couldn’t find helpful tutorials or guides. The official site is too simple for beginners.

Thanks everyone. I really appreciate it.

So i have Ubuntu as a system but you have Mac so you will probably use brew to install things.

Read the Important section a the end before starting following this guide

So let’s get started:

Head down here first:

https://asdf-vm.com/#/core-manage-asdf-vm

Choose one of the two:

Using git(Recommended way)

git clone https://github.com/asdf-vm/asdf.git ~/.asdf
cd ~/.asdf
git checkout "$(git describe --abbrev=0 --tags)"

This is using brew

brew install asdf  - install asdf on Mac
brew install asdf --HEAD install asdf on Mac form the master repo with latest changes and fixes

Now if you use git do the following

Add to your Shell

echo -e '\n. $HOME/.asdf/asdf.sh' >> ~/.bash_profile
echo -e '\n. $HOME/.asdf/completions/asdf.bash' >> ~/.bash_profile

I personally use zsh with antigen (you can read more here Kubuntu against my old Bodhi Linux)
For zsh

echo -e '\n. $HOME/.asdf/asdf.sh' >> ~/.zprofile

For brew install use this

Add to shell

echo -e "\n. $(brew --prefix asdf)/asdf.sh" >> ~/.bash_profile
echo -e "\n. $(brew --prefix asdf)/etc/bash_completion.d/asdf.bash" >> ~/.bash_profile

For zsh

Find asdf.sh and add to zsh

Following this command but locating the file

echo -e '\n. $HOME/.asdf/asdf.sh' >> ~/.zprofile

Now to be able to install plugins add the following deps via homebrew or spack
Brew

brew install \
  coreutils automake autoconf openssl \
  libyaml readline libxslt libtool unixodbc \
  unzip curl

Spack

spack install \
  coreutils automake autoconf openssl \
  libyaml readline libxslt libtool unixodbc \
  unzip curl

Verify that asdf is a known command to your shell by typing asdf

Now we are ready to add the plugins:

Here are all the plugins available: https://asdf-vm.com/#/plugins-all

We will use the Erlang plugin the Elixir plugin

Erlang

So head down to: https://github.com/asdf-vm/asdf-erlang

Before installing the Erlang plugin

OSX

These packages you have to install in order for the Erlang plugin to compile:

Install the build tools brew install autoconf

For building with wxWidgets (start observer or debugger!) brew install wxmac

Dealing with OpenSSL issues on macOS

You may encounter an SSL error with an output along these lines:

crypto : No usable OpenSSL found
ssh : No usable OpenSSL found
ssl : No usable OpenSSL found

This issue has been documented on kerl . If you see this error, you can use the --with-ssl flag with a path (in this case, the path is 1.0.2p , you should verify the correct path) before installing Erlang. Here is an example that skips the java depency and also sets a specific (and existing) path for OpenSSL on macOS.

$ export KERL_CONFIGURE_OPTIONS="--without-javac --with-ssl=/usr/local/Cellar/openssl/1.0.2p"
$ asdf install erlang <version>

Now we are ready for the actual install

So use the following command:

asdf install erlang ref:master

Give it time to compile, you can even go drink a coffee, because it will take some time to do this.

After it is done

Let’s get elixir:

head down here:

then use this command:

asdf plugin-add elixir https://github.com/asdf-vm/asdf-elixir.git

After elixir is installed you can install phoenix normally and it should all work

Here is the guide: https://hexdocs.pm/phoenix/installation.html#content

  • So first install hex: mix local.hex if you already have it it will upgrade it to the latest version
  • Then mix archive.install hex phx_new 1.4.11 and yopu should be able now to use phoenix without worries.

!! Important

I wrote this guide without having access to a Mac OS so if there are any mistakes please correct them

I hope this will help you and others, that have issues with phoenix installation

2 Likes