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

Created on 17 Dec 2015  ·  94Comments  ·  Source: phoenixframework/phoenix

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"
open for guidance
Source
picture conradwt

Most helpful comment

You just need to install the babel es2015 preset.

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

npm install --save-dev babel-preset-es2015
picture bryansray on 17 Dec 2015
👍19 🎉5

All 94 comments

You just need to install the babel es2015 preset.

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

npm install --save-dev babel-preset-es2015
bryansray picture bryansray on 17 Dec 2015
👍19 🎉5

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.

chrismccord picture chrismccord on 17 Dec 2015
👍2

@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?

conradwt picture conradwt on 17 Dec 2015

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
chrismccord picture chrismccord on 17 Dec 2015
👍2

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

$ npm cache clean

I'm up and operational without the preset.

conradwt picture conradwt on 17 Dec 2015
👍4

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

chrismccord picture chrismccord on 17 Dec 2015

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.

smeevil picture smeevil on 17 Dec 2015
👍3

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!

chrismccord picture chrismccord on 17 Dec 2015
👍2

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?

timhabermaas picture timhabermaas on 18 Dec 2015

yes, sorry, will fix. Thanks!

chrismccord picture chrismccord on 18 Dec 2015

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

timhabermaas picture timhabermaas on 18 Dec 2015

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

chrismccord picture chrismccord on 18 Dec 2015

No ideas. Let's investigate this.

paulmillr picture paulmillr on 18 Dec 2015

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
realistschuckle picture realistschuckle on 19 Dec 2015
👍8

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

paulmillr picture paulmillr on 20 Dec 2015

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

josevalim picture josevalim on 20 Dec 2015
👍1

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"
Inconditus picture Inconditus on 20 Dec 2015

@Inconditus what is your npm version?

jimbeaudoin picture jimbeaudoin on 20 Dec 2015

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.

Inconditus picture Inconditus on 20 Dec 2015
👍1

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 :)

sevenseacat picture sevenseacat on 20 Dec 2015

@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?

realistschuckle picture realistschuckle on 20 Dec 2015

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.

mcade picture mcade on 23 Dec 2015

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.

danschultz picture danschultz on 25 Dec 2015

@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?

realistschuckle picture realistschuckle on 26 Dec 2015

@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 picture danschultz on 26 Dec 2015

@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.

danschultz picture danschultz on 26 Dec 2015

Ah, it may be the case. I will investigate. Can you confirm your mix.exs
also has a deps_path configuration?

_José Valimwww.plataformatec.com.br
http://www.plataformatec.com.br/Founder and Director of R&D_

josevalim picture josevalim on 26 Dec 2015

@josevalim yes it does:

defmodule PhoenixDemo.Mixfile do
  use Mix.Project

  def project do
    [app: :phoenix_demo,
     version: "0.0.1",
     deps_path: "../../deps",
     lockfile: "../../mix.lock",
     elixir: "~> 1.0",
     elixirc_paths: elixirc_paths(Mix.env),
     compilers: [:phoenix, :gettext] ++ Mix.compilers,
     build_embedded: Mix.env == :prod,
     start_permanent: Mix.env == :prod,
     aliases: aliases,
     deps: deps]
  end

  ...
end
danschultz picture danschultz on 26 Dec 2015

I have tried an umbrella projects and it worked running from both root and inside the dependency. So I don't think it is something related to config, just npm still acting weird.

josevalim picture josevalim on 26 Dec 2015

My apologies, @danschultz. I have had no success in reproducing your problem in normal or umbrella projects. If you'd like to talk more freely on the matter, feel free to contact me directly at [email protected]. I should be in my office after 10am PT just hacking on my own Phoenix project. When we find a solution, we can come back and post it for the community.

realistschuckle picture realistschuckle on 26 Dec 2015

Any update on this? I believe I'm having the same issue. I'm on Windows 10, Elixir 1.1.1, Phoenix 1.1.1, Node 5.3.0, and NPM 3.5.3. I'm trying to build an umbrella application consisting of 3 applications: the public website, an admin backend, and an application with an Ecto.Repo, models, and migrations that the admin backend and public website will use (Aside: Is that a good way to keep the public website and admin backend separated? Just learning Elixir/Phoenix so there may be a better way to do it). These are the steps I took that produced the issue.

$ mix new app --umbrella
$ cd app/apps
$ mix phoenix.new admin --module App.Backend

And here is the error shown when running mix phoenix.server in the umbrella application and when creating the Phoenix app admin.

28 Dec 16:45:04 - error: 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"
chancedickson picture chancedickson on 28 Dec 2015

@chncdcksn I tried your steps on OS X and couldn't get the same error. Now, booting up a Windows 10 VM to try to reproduce. Thanks for the steps! Just to confirm:

  1. Create a new umbrella app
  2. cd down into the apps directory
  3. Create a new Phoenix app and let the mix task install all dependencies
  4. Run mix phoenix.server and get a sad, sad error

(Installing Erlang/Elixir, right now, into VM. This may take a while...:)

[19 minutes later]
All installed. Going to start looking at this, now.

realistschuckle picture realistschuckle on 29 Dec 2015

@realistschuckle you are my hero for taking on digging deeper into the windows issues :heart_eyes:

chrismccord picture chrismccord on 29 Dec 2015

@chrismccord It's really no problem. Thanks for Programming Phoenix. I've enjoyed watching the book mature over the last five beta releases.

realistschuckle picture realistschuckle on 29 Dec 2015

@realistschuckle Yup, those are the steps. With mix phoenix.server being run in the directory of the umbrella app, not the Phoenix app (that's probably what you mean, but I'm new to OTP so I figured I'd be explicit).

chancedickson picture chancedickson on 29 Dec 2015

I know how we can fix the es2015 issue. I'll submit the necessary patches to babel-brunch today

paulmillr picture paulmillr on 29 Dec 2015

@chncdcksn Totally reproduced and trying to figure it out, now. I think what's happening is that the working directory of the include gets changed to the relative path ../../deps/phoenix_html/web/static/js in babel which, then, kills the node search path. I'm trying to run down if its babel or brunch or brunch using babel.

@paulmillr Thanks! Really great!

realistschuckle picture realistschuckle on 29 Dec 2015

The quickfix for now:

# Execute
npm i -s babel-preset-es2015 babel-preset-react

# Add this to your brunch-config.coffee
plugins:
  babel:
    presets: ['es2015', 'react']
paulmillr picture paulmillr on 29 Dec 2015
👍2

@realistschuckle Did your tests also produce the other error I had (you must restart your server after changing the following configuration files)? Or should I move that to other issue?

@paulmillr Thanks!

chancedickson picture chancedickson on 29 Dec 2015

@paulmillr I tried your workaround, but now I'm getting an error when running brunch build:

dan$ node node_modules/brunch/bin/brunch build
/Users/dan/Development/elixir/brunch_demo/node_modules/acorn/dist/acorn.js:1747
  throw err;
  ^

SyntaxError: Unexpected token (2:10)
  at Parser.pp.raise (/Users/dan/Development/elixir/brunch_demo/node_modules/acorn/dist/acorn.js:1745:13)
  at Parser.pp.unexpected (/Users/dan/Development/elixir/brunch_demo/node_modules/acorn/dist/acorn.js:2264:8)
  at Parser.pp.semicolon (/Users/dan/Development/elixir/brunch_demo/node_modules/acorn/dist/acorn.js:2243:59)
  at Parser.pp.parseExpressionStatement (/Users/dan/Development/elixir/brunch_demo/node_modules/acorn/dist/acorn.js:2677:8)
  at Parser.pp.parseStatement (/Users/dan/Development/elixir/brunch_demo/node_modules/acorn/dist/acorn.js:2462:160)
  at Parser.pp.parseBlock (/Users/dan/Development/elixir/brunch_demo/node_modules/acorn/dist/acorn.js:2692:21)
  at Parser.pp.parseStatement (/Users/dan/Development/elixir/brunch_demo/node_modules/acorn/dist/acorn.js:2443:19)
  at Parser.pp.parseTopLevel (/Users/dan/Development/elixir/brunch_demo/node_modules/acorn/dist/acorn.js:2379:21)
  at Object.parse (/Users/dan/Development/elixir/brunch_demo/node_modules/acorn/dist/acorn.js:101:12)
  at parse (/Users/dan/Development/elixir/brunch_demo/node_modules/detective/index.js:9:18)
  at Function.exports.find (/Users/dan/Development/elixir/brunch_demo/node_modules/detective/index.js:44:15)
  at module.exports (/Users/dan/Development/elixir/brunch_demo/node_modules/detective/index.js:23:20)
  at /Users/dan/Development/elixir/brunch_demo/node_modules/deppack/index.js:83:12
  at tryToString (fs.js:414:3)
  at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:401:12)

Is there another dependency that I need to update? Here's my current package.json:

{
  "repository": {},
  "dependencies": {
    "babel-brunch": "^6.0.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "brunch": "^2.0.0",
    "clean-css-brunch": ">= 1.0 < 1.8",
    "css-brunch": ">= 1.0 < 1.8",
    "javascript-brunch": ">= 1.0 < 1.8",
    "uglify-js-brunch": ">= 1.0 < 1.8"
  }
}
danschultz picture danschultz on 29 Dec 2015

@danschultz try npm: enabled: false in your config

paulmillr picture paulmillr on 29 Dec 2015

@paulmillr setting npm enabled to false reverts back to the original error

error: 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"
danschultz picture danschultz on 29 Dec 2015

@danschultz any ideas on how I could get to the point of error with the default phoenix app?

paulmillr picture paulmillr on 29 Dec 2015

@paulmillr I've only been able to repro with an umbrella app.

Environment:

OS: Mac OSX 10.11.1
Node: 5.3.0 (installed via brew)
NPM: 3.5.2 (upgraded via sudo npm install npm -g)
Elixir/Mix: 1.1.1
Phoenix: 1.1.1

Steps to repro:

  1. mix new umbrella_app --umbrella
  2. cd umbrella_app/apps
  3. mix phoenix.new hello_phoenix
  4. cd hello_phoenix
  5. mix phoenix.server
  6. observe error: 
[info] Running HelloPhoenix.Endpoint with Cowboy using http on port 4000
29 Dec 20:14:41 - error: 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"

Steps to repro + your suggested workaround:

  1. npm i --save babel-preset-es2015 babel-preset-react
  2. Update brunch-config.js:
    plugins: { babel: { presets: ['es2015', 'react'], ignore: [/web\/static\/vendor/] } }
  3. mix phoenix.server
  4. observe error:
[info] Running HelloPhoenix.Endpoint with Cowboy using http on port 4000
/Users/dan/Development/elixir/umbrella_app/apps/hello_phoenix/node_modules/acorn/dist/acorn.js:1747
  throw err;
  ^

SyntaxError: Unexpected token (2:10)
  at Parser.pp.raise (/Users/dan/Development/elixir/umbrella_app/apps/hello_phoenix/node_modules/acorn/dist/acorn.js:1745:13)
  at Parser.pp.unexpected (/Users/dan/Development/elixir/umbrella_app/apps/hello_phoenix/node_modules/acorn/dist/acorn.js:2264:8)
  at Parser.pp.semicolon (/Users/dan/Development/elixir/umbrella_app/apps/hello_phoenix/node_modules/acorn/dist/acorn.js:2243:59)
  at Parser.pp.parseExpressionStatement (/Users/dan/Development/elixir/umbrella_app/apps/hello_phoenix/node_modules/acorn/dist/acorn.js:2677:8)
  at Parser.pp.parseStatement (/Users/dan/Development/elixir/umbrella_app/apps/hello_phoenix/node_modules/acorn/dist/acorn.js:2462:160)
  at Parser.pp.parseBlock (/Users/dan/Development/elixir/umbrella_app/apps/hello_phoenix/node_modules/acorn/dist/acorn.js:2692:21)
  at Parser.pp.parseStatement (/Users/dan/Development/elixir/umbrella_app/apps/hello_phoenix/node_modules/acorn/dist/acorn.js:2443:19)
  at Parser.pp.parseTopLevel (/Users/dan/Development/elixir/umbrella_app/apps/hello_phoenix/node_modules/acorn/dist/acorn.js:2379:21)
  at Object.parse (/Users/dan/Development/elixir/umbrella_app/apps/hello_phoenix/node_modules/acorn/dist/acorn.js:101:12)
  at parse (/Users/dan/Development/elixir/umbrella_app/apps/hello_phoenix/node_modules/detective/index.js:9:18)
  at Function.exports.find (/Users/dan/Development/elixir/umbrella_app/apps/hello_phoenix/node_modules/detective/index.js:44:15)
  at module.exports (/Users/dan/Development/elixir/umbrella_app/apps/hello_phoenix/node_modules/detective/index.js:23:20)
  at /Users/dan/Development/elixir/umbrella_app/apps/hello_phoenix/node_modules/deppack/index.js:83:12
  at tryToString (fs.js:414:3)
  at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:401:12)

Setting npm: false in brunch-config.js results in the original error.

Hope this helps!

danschultz picture danschultz on 30 Dec 2015

This is happening with umbrella apps, I confirm. This is, however, probably a separate issue.

The temporary workaround I found, is to generate the app outside of umbrella's main directory and move it manually inside umbrella app.

hubertlepicki picture hubertlepicki on 30 Dec 2015

Ok, just to confirm: who can reproduce the umbrella issue given @danschultz instructions? I certainly cannot.

  • Node: 5.3.0
  • NPM: 3.5.2
  • Phoenix: master
josevalim picture josevalim on 30 Dec 2015

I can.

Node: v5.3.0
NPM: 3.5.2
Phoenix: 1.1.1

I'll check with phoenix master and report back.

hubertlepicki picture hubertlepicki on 30 Dec 2015

I can too.

Node: v5.3.0
NPM: 3.5.2
Phoenix: 1.1.1
OS: Fedora 23
Elixir: 1.1.1
Erlang: 18

Generating app inside umbrella: errors like in this topic
Generating app outside umbrella and moving it inside: works like a charm

FunnyScarf picture FunnyScarf on 30 Dec 2015

An and I'm on Linux too. Maybe it's Mac vs Linux issue.

hubertlepicki picture hubertlepicki on 30 Dec 2015

Yes, I can confirm this is still an issue on Phoenix master.

hubertlepicki picture hubertlepicki on 30 Dec 2015

Ok. I was able to reproduce it. The issue is that, because phoenix and phoenix_html are in the parent directories, brunch/babel is unable to find the preset for those dependencies.

Here is the directory structure:

  your_app
    node_modules
    brunch-config.js
    package.json
deps
  phoenix_html
    web/static/js
  phoenix
    web/static/js

Because we are inside "/apps/your_app", importing a file defined at "/deps/phoenix_html/web/static/js", brunch/babel is looking for the es2015 preset at "/node_modules", however, the node modules is inside "/apps/your_app" which is from where we effectively run brunch.

@paulmillr is this something we can solve inside brunch? Can we tell it to always use the node_modules directory from the current working directory and not attempt to lookup one at the root of the files being imported? I will create a small project that reproduces the issue in a second.

josevalim picture josevalim on 30 Dec 2015

To clarify, I believe this is the bug because if I copy the "/apps/your_app/node_modules" to "/node_modules", everything works.

josevalim picture josevalim on 30 Dec 2015

Ok, here we go. To reproduce the bug:

  1. git clone https://github.com/josevalim/brunch-sample.git
  2. cd brunch-sample/apps/hello_phoenix
  3. npm install
  4. node_modules/brunch/bin/brunch build

The reason why it happens is because we are inside "apps/your_app" requiring files from "../../deps/phoenix". For some reason, npm/brunch/babel is expecting to find a node_modules at "../../node_modules" instead of using the one inside "apps/your_app".

josevalim picture josevalim on 30 Dec 2015

@paulmillr is there anything I can do to help this further? Should I open up an issue on brunch issues tracker? Thanks for all the help.

josevalim picture josevalim on 30 Dec 2015

Interesting. Let me check this

paulmillr picture paulmillr on 30 Dec 2015

Fixed in babel-brunch from github: https://github.com/babel/babel-brunch/pull/19. Just waiting for folks to accept the pull request & release 6.0.1 now.

We have been passing filename option into babel to preserve filenames in source maps. Babel searches for plugins in a dir relative to the filename: https://phabricator.babeljs.io/T2974

This is expected behaviour. You haven't specified a filename so it has no idea where to resolve presets and plugins from so it just uses the cwd.

Well that's pretty fucking stupid. Babel needs another option for "resolving presets and plugins".

paulmillr picture paulmillr on 30 Dec 2015

@paulmillr I saw that setting sourceRoot is commented out in your PR. Is it not yet supported then?

josevalim picture josevalim on 30 Dec 2015

sourceRoot is something different. I've just tried a few variables and none of them do the required job. Babel needs a new option for that.

paulmillr picture paulmillr on 30 Dec 2015

Awesome, thanks for clarifying and fixing @paulmillr !

josevalim picture josevalim on 30 Dec 2015

I am getting the following error on node 5.3.0:

error: Compiling of deps/phoenix/web/static/js/phoenix.js failed. deps/phoenix/web/static/js/phoenix.js: Duplicate declaration "channel"

This is my package.json:

{
  "repository": {},
  "devDependencies": {
    "testing": ">=0.2.3"
  },
  "dependencies": {
    "babel-brunch": "^6.0.0",
    "brunch": ">= 2.1.0",
    "clean-css-brunch": ">= 1.8.0",
    "closure-library": "Immortalin/closure-library",
    "css-brunch": ">= 1.0 < 1.8",
    "javascript-brunch": ">= 1.8.0",
    "node_erlastic": ">= 0.0.8",
    "uglify-js-brunch": ">= 1.0 < 1.8",
    "xmldom": "^0.1.19"
  }
}
Immortalin picture Immortalin on 2 Jan 2016

Still waiting for the PR to be accepted: https://github.com/babel/babel-brunch/pull/19

paulmillr picture paulmillr on 2 Jan 2016

Updating NPM from 2.X to 3.X fixed the issue for me.

Elixir: 1.2.0
Node: 4.2.4
NPM: 3.5.2 (before update was 2.14.12)
Phoenix: 1.1.1

luizpvas picture luizpvas on 5 Jan 2016

Updating from Node 4.2.6 to Node 5.5.0 solved the problem for me (NVM)

ghost picture ghost on 1 Feb 2016

@danschultz i'm running into the same issue as you, did you even find a way to make it work ?

xuorig picture xuorig on 6 Feb 2016

For people who have this error:

dan$ node node_modules/brunch/bin/brunch build
/Users/dan/Development/elixir/brunch_demo/node_modules/acorn/dist/acorn.js:1747
  throw err;
  ^

SyntaxError: Unexpected token (2:10)

If your phoenix version is before 1.1.2 you'll need to upgrade to >= 1.1.2.
Make sure to update your deps and you can use this guide https://gist.github.com/chrismccord/d5bc5f8e38c8f76cad33 to upgrade.

xuorig picture xuorig on 6 Feb 2016

Updating npm solved this issue for me as well. I assumed I was on the latest having done:

rumbl git:(master) ✗ brew upgrade npm      
Error: node 5.6.0 already installed

When running npm -v though, I noticed I was on a 2.x version. I ran

rumbl git:(master) ✗ npm update npm -g

And was then updated to npm 3.7.3 which seemed to resolve this for me :)

daveshah picture daveshah on 14 Feb 2016

I seem to be having a related issue:

14 Feb 14:01:26 - error: Compiling of web/static/js/socket.js failed. Couldn't find preset "stage-0" relative to directory "/Users/mos8580/dev" ; Compiling of web/static/js/app.js failed. Couldn't find preset "stage-0" relative to directory "/Users/mos8580/dev"

It's stage-0 instead of es2015 but it looks like the same issue. The project was created at ~/dev/hello_phoenix.

Node and npm installed with "brew install node".

OS: Mac OS X 10.11.3
Node: 5.6.0
Npm: 3.6.0
Phoenix: 1.1.4

I updated npm with "npm update -g npm" to 3.7.3, but no luck.

I tried in a Debian VM with same node et npm versions (5.6.0, 3.6.0) and didn't get the problem. Any ideas welcome.

mos8580 picture mos8580 on 14 Feb 2016

Can you reproduce it in a fresh project? Often the issue is cached npm files, so if you nuke node_modules and clean the cache, you should be golden.

josevalim picture josevalim on 14 Feb 2016

It is on a fresh project, I'm actually following the guide for phoenix, this is my first experience with it. I've even recreated the whole thing several times. I'll gladly provide more info if it can help.

mos8580 picture mos8580 on 14 Feb 2016

I still have this issue with an umbrella project. Notably, I'm experiencing this after migrating a standalone phoenix app into an umbrella project.

Edit: I've found that if I copy the node_modules directory into the project root before running ../../node_modules/brunch/bin/brunch build --production, it does indeed compile.

Edit (2): After speaking with @chrismccord over IRC, the issue in my case was that I'd not gone through the upgrade motions between 1.1.1 and 1.1.2: https://gist.github.com/chrismccord/d5bc5f8e38c8f76cad33

johnhamelink picture johnhamelink on 18 Feb 2016

node - v5.5.0
npm - v3.7.3
Phoenix - v1.1.4
My way of fixing the problem was putting a .babelrc in my apps root directory

{ "presets": ["es2015"] }

lazy copy paste (while in your pheonix apps root):
echo '{ "presets":["es2015"] }' > .babelrc

My guess would be to include this by default, as long as babel is being used.- but i'd like to see if this helps other people first.

Eein picture Eein on 22 Feb 2016
👍3

I confirm this fixes the problem for me. Completely forgot about .babelrc ...

Thanks!

mos8580 picture mos8580 on 23 Feb 2016

Apparently there has been a .babelrc in the master branch since 2270aaf21bd02c6a6a1022820564efb605a97655 - I'm going to try installing phoenix on a fresh machine and report back. I'm not sure if phoenix new includes this .babelrc by default, so the fix might be to make sure phoenix.new includes this file (if its skipping dotfiles)

Eein picture Eein on 24 Feb 2016

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

chrismccord picture chrismccord on 24 Feb 2016

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.

Eein picture Eein on 24 Feb 2016

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

mos8580 picture mos8580 on 24 Feb 2016
👍2

@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 :(

Eein picture Eein on 25 Feb 2016

@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 =]

mos8580 picture mos8580 on 25 Feb 2016

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

Lubmes picture Lubmes on 23 Mar 2016

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

paulmillr picture paulmillr on 24 Mar 2016

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
dokuboyejo picture dokuboyejo on 1 Apr 2016
❤1 👍1

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

paulmillr picture paulmillr on 1 Apr 2016

<3 <3 <3

chrismccord picture chrismccord on 1 Apr 2016

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

Thanks!

suprafly picture suprafly on 4 Apr 2016

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)

mikekreuzer picture mikekreuzer on 18 Jul 2016

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

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

Gazler picture Gazler on 18 Jul 2016

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. :-)

mikekreuzer picture mikekreuzer on 18 Jul 2016

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.

Gazler picture Gazler on 18 Jul 2016

Working after adding it manually:
├─┬ [email protected]
│ └── [email protected]
└── [email protected]

And also working out of the box now on another fresh project:
└─┬ [email protected]
└── [email protected]

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

mikekreuzer picture mikekreuzer on 18 Jul 2016

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

tiagodavi picture tiagodavi on 20 Jul 2016

As a late addition.

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

jeffhorton picture jeffhorton on 13 Oct 2016
👍1

Good topic for first use phoenix!

peterwillcn picture peterwillcn on 24 Mar 2017

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.

alexwykoff picture alexwykoff on 5 Jun 2017
👍2

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
wieczorek1990 picture wieczorek1990 on 24 Jun 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

tjsousa picture tjsousa  ·  4Comments
chrismccord picture chrismccord  ·  4Comments
mcampa picture mcampa  ·  3Comments
noam87 picture noam87  ·  3Comments
Tica2 picture Tica2  ·  3Comments