Webpack 2 compile issues with phoenix/_html Couldn't find preset "env" relative to directory

Running into this error when trying to compile phoenix.js and phoenix_html from node_modules.

ERROR in ../deps/phoenix/priv/static/phoenix.js
Module build failed: Error: Couldn't find preset "env" relative to directory "...Dev/elixir/.../deps/phoenix/priv/static"
    at ...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (native)
    at OptionManager.resolvePresets (...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (...Dev/elixir/.../assets/node_modules/babel-loader/lib/index.js:46:20)
    at Object.module.exports (...Dev/elixir/.../assets/node_modules/babel-loader/lib/index.js:163:20)
 @ ./js/vendor.js 9:0-18

Same issue for phoenix_html

ERROR in ../deps/phoenix_html/priv/static/phoenix_html.js
Module build failed: Error: Couldn't find preset "env" relative to directory "...Dev/elixir/.../deps/phoenix_html/priv/static"
    at ...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (native)
    at OptionManager.resolvePresets (...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (...Dev/elixir/.../assets/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (...Dev/elixir/.../assets/node_modules/babel-loader/lib/index.js:46:20)
    at Object.module.exports (...Dev/elixir/.../assets/node_modules/babel-loader/lib/index.js:163:20)
 @ ./js/vendor.js 7:0-23

research says this is the result of not having babel-preset-env which sounds right but thats not my problem.

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "postinstall": "./post-install.sh",
    "deploy": "webpack -p",
    "watch": "webpack --watch-stdin --progress --color"
  },
  "dependencies": {
    "bootstrap": "v4.0.0-alpha.6",
    "font-awesome": "^4.7.0",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "tether": "^1.4.0"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-env": "^1.3.3",
    "bootstrap-loader": "^2.0.0",
    "clean-webpack-plugin": "^0.1.16",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "exports-loader": "^0.6.4",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "imports-loader": "^0.7.1",
    "node-sass": "^4.5.2",
    "postcss": "^5.2.17",
    "postcss-loader": "^1.3.3",
    "resolve-url-loader": "^2.0.2",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.3.3",
    "webpack-bundle-analyzer": "^2.3.1",
    "webpack-manifest-plugin": "^1.1.0"
  },
  "name": "digitalcakes",
  "version": "1.0.0",
  "main": "index.js",
  "author": "digitalcake <joshc@digitalcak.es>"
}

Any ideas?

For whatever reason(‡) back in May for my barebones experiment I chose to set up resolve.alias for both of them in addition to the references in package.json. Maybe look into that?

(‡ Possibly because phoenix.js and phoenix_html.js aren’t actually under node_modules)

I’m fairly certain its resolving the path of

"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",

correctly.

I’ve changed the path and seen the outcome complain about not being able to resolve the paths.

I wasn’t referring to the to the package.json but the webpack.config.js:

  resolve: {
    modules: ["node_modules"],
    extensions: [".js", ".json", ".css"],
    alias: {
      "phoenix": path.resolve(__dirname, "./deps/phoenix/priv/static/phoenix.js"),
      "phoenix_html": path.resolve(__dirname, "./deps/phoenix_html/priv/static/phoenix_html.js")
    }
  },

tried to resolve the path that way but still getting same errors. Also the error is resolving to the correct path.

IE

ERROR in ../deps/phoenix_html/priv/static/phoenix_html.js
Module build failed: Error: Couldn't find preset "env" relative to directory "/Users/.../Dev/elixir/.../deps/phoenix_html/priv/static"

Also shouldn’t

{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['env']
        }
      },

address this?

:frowning: not sure how I fixed it, but blowing away the node_modules dir a few times while trying different things look to have done the trick.

I guess I should feel happy but I still feel frustrated not know why it was doing that.

Finally got a version of babel-preset-env that works? :slight_smile:

The next thing I was going to suggest was to exclude both files alongside node_modules inside webpack’s babel-loader configuration as they shouldn’t need to be processed - however I don’t know if that would break something else downstream in your configuration.

1 Like

I had this same problem a few weeks ago. As dumb as this sounds, it was solved by using yarn to install the packages instead of npm.

It pisses me off that we haven’t found the true problem, it’s probably something to do with how npm is organizing the dependency tree, but I wasn’t in the mood to debug more than that. Only bad thing is that now everyone in the project has to use yarn for handling frontend packages.

EDIT: solved consistently, I will add. Removing npm lockfiles and reinstalling with it always broke, removing yarn lockfiles and reinstalling with it always worked.

2 Likes

Yeah that was the solution I think I ended up with @danielgracia
I was not 100% sure it was the solution, so I didn’t want to say just yet but I think you are collect.

I had this issue too, I belive I solved it excluding the phoenix deps dir from my jscompilation rule.

{
        test: /\.js$/,
        exclude: /(node_modules|deps)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env'],
          }
}
1 Like

Had the same problem, also solved it by excluding deps from the babel-loader