Compiling of 'web/static/js/app.js' failed due to "es2015"

[conradwt]

For context, I'm working through the example on page 37 of "Programming Phoenix" PDF section "Creating the Project". In order to reproduce this issue, I performed the following:

$ mix phoenix.new rumbl

Fetch and install dependencies? [Yn] y
* running npm install && node node_modules/brunch/bin/brunch build * running mix deps.get
We are all set! Run your Phoenix application:
    $ cd rumbl
    $ mix ecto.create
    $ mix phoenix.server

Error

[info] Running Rumbl.Endpoint with Cowboy on http://localhost:4000
16 Dec 16:39:59 - error: Compiling of 'web/static/js/app.js' failed. Couldn't find preset "es2015" relative to directory "web/static/js" ; Compiling of 'web/static/js/socket.js' failed. Couldn't find preset "es2015" relative to directory "web/static/js" ; Compiling of 'deps/phoenix/web/static/js/phoenix.js' failed. Couldn't find preset "es2015" relative to directory "deps/phoenix/web/static/js" ; Compiling of 'deps/phoenix_html/web/static/js/phoenix_html.js' failed. Couldn't find preset "es2015" relative to directory "deps/phoenix_html/web/static/js"

[bryansray]

You just need to install the babel es2015 preset.

https://www.npmjs.com/package/babel-preset-es2015

npm install --save-dev babel-preset-es2015

[chrismccord]

babel-preset-s2015 fixed an issue I had, but then I blew away my ~/.npm dir with rm -rf ~/.npm. Then I deleted my rm -rf node_modules in the phoenix project and $ npm install. And it worked without having the preset (node stuff). Give that a shot first.

[conradwt]

@chrismccord @bryansray The following option worked for me being that I wasn't ready to pull the trigger with rm -rf ~/.npm:

$ npm install --save-dev babel-preset-s2015

Will babel-preset-s2015 NPM package be added to a future release of the Phoenix app creation process or is this something that will get sorted as part of the babel-brunch package?

[chrismccord]

Will babel-preset-s2015 NPM package be added to a future release of the Phoenix app creation process or is this something that will get sorted as part of the babel-brunch package?

I don't believe there is anything for us to add. Like I said, I had to do this on one project, but not another. When I blew away my ~/.npm directory I no longer needed babel-preset on any project. Please give this a shot and report back:

1. remove babel-preset from your package.json
2. rm -rf ~/.npm
3. cd my_app
4. rm -rf node_modules/
5. npm install

[conradwt]

@chrismccord For step 2, one can also use the following command:

$ npm cache clean

I'm up and operational without the preset.

[chrismccord]

Glad to hear it, but bizarre nonetheless. I'm sure we'll be pointing folks to the npm cache clean solution often :)

[smeevil]

Actually you need to have node 5.x , (5.1.0 ? )
Before i was running 4.1.2 and could not fix the problem unless I added babel-preset-es2015 by hand

After updating to 5.1.0, removing the node_modules dir and running npm install again, everything was fine.

[chrismccord]

Leaving this open as I'm sure we'll get folks running into it. It does appear node v5 is now required, but it's not immediately clear why. In any case, node v5 and npm cache clean is the solution. Thanks for verifying!

[timhabermaas]

Leaving this open as I'm sure we'll get folks running into it.

I'm one of them and upgrading from node v4 to v5 indeed fixes the problem.

The official guide (which I was following along) mentions you need node >= 0.5.0 (http://www.phoenixframework.org/docs/installation#section-node-js-0-5-0-). Is this meant to be >= 5.0?

[chrismccord]

yes, sorry, will fix. Thanks!

[timhabermaas]

Thanks for fixing it (that was quick!). And no worries, the guides have been great so far.

[chrismccord]

paging @paulmillr hoping he can shed some light on this. Anything we're missing here around babel-brunch issues with node < 0.5?

[paulmillr]

No ideas. Let's investigate this.

[realistschuckle]

TL;DR

(Edited to be really clear about what needs done)

1. Update your npm to version 3.X
2. rm your node_modules directory
3. Run npm install

Not a node problem, but an npm problem

It looks less about node >= 5.0 and more about npm >= 3.

npm 3 installs (by default) dependencies flat rather than deep. Due to this, when brunch runs and uses babel-brunch, node finds es2015 in the node_modules directory just as if you had installed it by hand. You can see the output differences of the directory structure below.

The npm team decided to do this for two reasons, AFAIK:

1. To reduce the amount of duplication in dependencies; and,
2. To allow Windows developers to use npm without the dreaded "your file path is too long" error that crept up for them.

If someone runs sudo npm install npm -g (or however they do package management) then npm will update to its "current" version of 3.5.2.

Example node_modules of npm v2.X with babel-brunch and brunch installed

.
└── node_modules
    ├── babel-brunch
    └── brunch

Example node_modules of npm v3.X with babel-brunch and brunch installed

.
└── node_modules
    ├── accepts
    ├── acorn
    ├── amdefine
    ├── ansi-color
    ├── ansi-green
    ├── ansi-regex
    ├── ansi-styles
    ├── ansi-wrap
    ├── anymatch
    ├── anysort
    ├── array-flatten
    ├── array-unique
    ├── arr-diff
    ├── arr-flatten
    ├── arrify
    ├── ast-types
    ├── async-each
    ├── babel-brunch
    ├── babel-code-frame
    ├── babel-core
    ├── babel-generator
    ├── babel-helper-call-delegate
    ├── babel-helper-define-map
    ├── babel-helper-function-name
    ├── babel-helper-get-function-arity
    ├── babel-helper-hoist-variables
    ├── babel-helper-optimise-call-expression
    ├── babel-helper-regex
    ├── babel-helper-replace-supers
    ├── babel-helpers
    ├── babel-messages
    ├── babel-plugin-check-es2015-constants
    ├── babel-plugin-syntax-async-functions
    ├── babel-plugin-transform-es2015-arrow-functions
    ├── babel-plugin-transform-es2015-block-scoped-functions
    ├── babel-plugin-transform-es2015-block-scoping
    ├── babel-plugin-transform-es2015-classes
    ├── babel-plugin-transform-es2015-computed-properties
    ├── babel-plugin-transform-es2015-destructuring
    ├── babel-plugin-transform-es2015-for-of
    ├── babel-plugin-transform-es2015-function-name
    ├── babel-plugin-transform-es2015-literals
    ├── babel-plugin-transform-es2015-modules-commonjs
    ├── babel-plugin-transform-es2015-object-super
    ├── babel-plugin-transform-es2015-parameters
    ├── babel-plugin-transform-es2015-shorthand-properties
    ├── babel-plugin-transform-es2015-spread
    ├── babel-plugin-transform-es2015-sticky-regex
    ├── babel-plugin-transform-es2015-template-literals
    ├── babel-plugin-transform-es2015-typeof-symbol
    ├── babel-plugin-transform-es2015-unicode-regex
    ├── babel-plugin-transform-regenerator
    ├── babel-plugin-transform-strict-mode
    ├── babel-preset-es2015
    ├── babel-register
    ├── babel-runtime
    ├── babel-template
    ├── babel-traverse
    ├── babel-types
    ├── babylon
    ├── balanced-match
    ├── batch
    ├── binary-extensions
    ├── brace-expansion
    ├── braces
    ├── browser-resolve
    ├── brunch
    ├── 
    ├── truncated because it's really long...
    ├── 
    ├── utils-merge
    ├── vary
    └── wrap

[paulmillr]

@realistschuckle does this mean we can close the issue and point folks to this solution?

[josevalim]

@paulmillr it feels like so. We are keeping this open in any case to help folks find the solution. :)

[Inconditus]

This doesn't seem to be working for me. I'm on mac 10.11.2.

➜  hello_phoenix  node -v
v5.1.1
➜  hello_phoenix  npm cache clean
➜  hello_phoenix  rm -rf node_modules
➜  hello_phoenix  npm install
npm WARN package.json @ No license field.
➜  hello_phoenix  mix phoenix.server
[info] Running HelloPhoenix.Endpoint with Cowboy on http://localhost:4000
19 Dec 22:46:57 - error: Compiling of 'web/static/js/app.js' failed. Couldn't find preset "es2015" relative to directory "web/static/js" ; Compiling of 'web/static/js/socket.js' failed. Couldn't find preset "es2015" relative to directory "web/static/js" ; Compiling of 'deps/phoenix_html/web/static/js/phoenix_html.js' failed. Couldn't find preset "es2015" relative to directory "deps/phoenix_html/web/static/js" ; Compiling of 'deps/phoenix/web/static/js/phoenix.js' failed. Couldn't find preset "es2015" relative to directory "deps/phoenix/web/static/js"

[jimbeaudoin]

@Inconditus what is your npm version?

[Inconditus]

Seems like homebrew has node 5.1.1, but npm 2.14. Uninstalling node from homebrew and downloading it from the official nodejs website fixed the problem.

[sevenseacat]

Homebrew here has installed node 5.1.1 and npm 3.3.12. With those versions installed, blowing away node_modules, npm cache clean, etc. has fixed the problem :)

[realistschuckle]

@Inconditus homebrew uses the official node distributions from node.js which contain both node and npm, together. Here's the formula for it: node.rb. Your machine may have had some different installations of node which may have caused the node executable to come from one package and npm from another. I'd really recommend not losing faith in brew and continue to use it. (I have no affiliation with them, blah, blah, blah.)

@paulmillr @josevalim Is there anything else I can do to make this better for a brighter tomorrow?

[mcade]

I had this issue initially on my local machine but followed this answer on SO and overcame it. I've run into the problem again with running on Heroku. I've included node_version=5.3.0 in my phoenix_static_buildpack.config file.

This updates the version of node to 5.3. Once it's updated, how do I go about removing the node modules and clearing the cache/resetting the remote environment on Heroku?

edit: A crude workaround to get it working on Heroku - destroy the app and remake it. All works as intended when using the correct version of Node from the start.

[danschultz]

I'm able to repro this using npm 3.5.2 and node 5.3.0. I also blew away my ~/.npm and node_modules directory without any luck.

[realistschuckle]

@danschultz, can you give me a little more information like your OS, top-level contents of your node_modules directory, and maybe your brunch config?

[danschultz]

@realistschuckle here you go:

OS: Mac OS 10.11.1
NPM: 3.5.2
Node: 5.3.0
node_modules, brunch config: https://gist.github.com/danschultz/915444062b9c5663f934

Update

Also, not sure if it matters, but I'm using a umbrella Mix project.

[danschultz]

@realistschuckle it seems my issue may be related to using an umbrella project. I created a new Phoenix app outside my umbrella project and the assets compile fine.

[chrismccord]

The babelrc is strictly for phoenix-core development, not for generated projects. The .babelrc should not be required for any projects on latest node/npm/brunch versions

[Eein]

Just to document my workflow - i've done this twice with two fresh machines:

node - v5.5.0
npm - v3.7.3
Phoenix - v1.1.4
MacOS - v 10.11.2

brew install elixir
mix local.hex
mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez
mix phoenix.new test
cd test
mix phoenix.server

• (y) proceed to update/install deps
  and finally

[info] Running Bacon.Endpoint with Cowboy using http on port 4000
24 Feb 19:57:14 - error: Compiling of web/static/js/app.js failed. Couldn't find preset "es2015" relative to directory "/Users/username" ; Compiling of web/static/js/socket.js failed. Couldn't find preset "es2015" relative to directory "/Users/username" 

Confirmed, adding a .babelrc to root does indeed fix this issue for both machines.

I've also tried:

• babel-brunch master (6.0.1)
• brunch master (2.4.2)

Update/FIX:
I noticed I had a .babelrc in my home directory. What is happening is that babel crawls up directories until root and looks for a .babelrc file and uses that file... (similar to how eslint functions) but when it finds the file, it tries using node_modules in the directory it found the babelrc, so it can't find the preset.

Deleting ~/.babelrc fixes the issue for me.

There isn't really any good documentation on the proper use case of .babelrc, but to fix this issue for people who are improperly configured, you can simply tell babel-brunch not to look for a babelrc and it works great. In my opinion its a partially sensible default - but it might be confusing for someone who wants to use a babelrc in this case.

I think the main problem stems from a misconception on how babelrc works, in comparison to the likes of eslintrc, where its permissible to set your global configuration in your home directory.

[mos8580]

I had a .babelrc in the parent directory from the phoenix project. Deleting it indeed resolved the issue.

[Eein]

@mos8580 I actually asked you to try making that in the pheonix project directory so that was probably my fault :(

ideally its not having one at all that eventually fixed my issue.

Unless you mean the parent direct above the pheonix directory - ex: I keep my code in ~/Code, so my parent directory would be ~/

I'm at guilt for following a guide somewhere or automatically assuming the .babelrc as a global configuration was a good option as well :(

[mos8580]

@Eein To be honest I tried just about everything anyway. I think that behaviour of Babel is a bit sneaky, but that's my bad for not knowing the tooling.

Thank you for for finding the real solution =]

[Lubmes]

I have the exact same issue as described by Eein 28 days ago.

[paulmillr]

Make sure you're on Brunch 2.5, node 4+ and npm 3+.

[dokuboyejo]

you can also do the following

1. add babel-preset-es2015 as a requirement in your package.json
2. update your brunch-config.json like so plugins: { babel: { presets: ['es2015'], ... } }
3. from the root of your project run npm install
4. from the root of your project run mix phoenix.server and you should be good to go

[paulmillr]

Could we close the issue? I think that's been long resolved since be we don't have new comments @chrismccord

[chrismccord]

<3 <3 <3

[suprafly]

Just had the issue, and this was the quick fix: npm install --save-dev babel-preset-es2015

Thanks!

[mikekreuzer]

Adding "babel-preset-es2015": "^6.9.0", or similar to the devDependencies in package.json is still required it seems, had to do this with a fresh install last night (Phoenix 1.2.0)

[Gazler]

@mikekreuzer Which versions of node/npm are you using?

I haven't encountered this with new projects for months.

[mikekreuzer]

Node's 6.3.0, npm was 3.10.3, 3.10.5 now, using nvm if that's significant. Node weirdness is why I'm using Phoenix. :-)

[Gazler]

The dependency should be provided by babel-brunch.

Can you run npm list babel-preset-es2015 on your repository that doesn't work?

If you can push your repository with this issue, that would also be helpful.

[mikekreuzer]

Working after adding it manually:
├─┬ babel-brunch@6.0.4
│ └── babel-preset-es2015@6.9.0
└── babel-preset-es2015@6.9.0

And also working out of the box now on another fresh project:
└─┬ babel-brunch@6.0.4
└── babel-preset-es2015@6.9.0

Neither's on a repo, I threw them up to test something unrelated... but it seems to be working for me now too (annoyingly).

[tiagodavi]

The only thing worked for me was running this command on ubuntu: sudo npm install --save-dev babel-preset-es2015

[jeffhorton]

As a late addition.

Deleted node_modules and used the new facebook Yarn tool and got a working result.

[peterwillcn]

Good topic for first use phoenix!

[alexwykoff]

Just wanted to leave a note that I can reproduce the issue with 1.3.0 rc2.

OS : MacOS 10.12.5
Node : 8.0.0
NPM : 5.0.1
Erlang : OTP 19
Elixir : 1.4.4

STR:

1. Clone the repo per : https://github.com/phoenixframework/phoenix
2. cd phoenix/installer
3. mix phx.new dev_app --dev

Actual result :
Brunch build fails on es2015 linking.

Expected result:
A phoenix app is ready to be developed.

Workaround:
On the 'Fetch and install dependencies? [Yn]' step, select N and run mix deps.get separately.

It should be noted that mix phoenix.new works without issue.

[wieczorek1990]

Managed to build a development app stored inside phoenix directory created with mix phx.new $app_name --dev by:

cd phoenix
npm install babel-preset-es2015