issue with babel-root-import in .babelrc plugins

[foxhound87]

that's my .babelrc

{
  "presets": ["es2015", "react"],
  "plugins": [
    "babel-root-import"
  ],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

and this is what I get when I run the server:

❯ npm run server:dev

> [email protected] server:dev /Users/cla/Git Projects/bitbucket-foxhound87/we-must-react-ep-03
> NODE_ENV=development node server.js

Installing babel-plugin-babel-root-import...
npm ERR! Darwin 15.5.0
npm ERR! argv "/Users/cla/.nvm/versions/node/v6.2.2/bin/node" "/Users/cla/.nvm/versions/node/v6.2.2/bin/npm" "install" "babel-plugin-babel-root-import" "--save"
npm ERR! node v6.2.2
npm ERR! npm  v3.9.5
npm ERR! code E404

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/babel-plugin-babel-root-import
npm ERR! 404 
npm ERR! 404  'babel-plugin-babel-root-import' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

It's trying to install a npm package that doesn't exist: babel-plugin-babel-root-import

[ericclemmons]

Ah, it looks like it's because babel-root-import isn't following convention:

https://github.com/babel/babel/tree/master/packages

They should've named & published it as babel-plugin-root-import, so your babelrc would say:

{
  "plugins": [ "root-import" ]
}

However, if you're using Webpack (which is a yes), why not let Webpack handle the module resolution?

https://medium.com/@ericclemmons/dogfooding-your-open-source-projects-9e6dc1e7d1c8

IIRC, less-loader even relies on ~ for denoting node_modules, since @import "foo.css" is considered a relative path in LESS.

The only idea I have is to add an option for babel: false where the plugin doesn't try to auto-install .babelrc dependencies.

[foxhound87]

Yes a flag to disable it would be useful. This behavior is happening for others plugins too like react-hot-loader/babel. Anyway I tried to configure "resolve root path" on the webpack config but cannot get it working. Maybe because the server files should be compiled on the runtime by webpack?

[ericclemmons]

An option it is. I do webpack on the server, so I'm immune to some of these problems.

What I don't know is if it should be defaulted to false or true.

[foxhound87]

I think should be defaulted to false to avoid unexpected behaviors.

[ericclemmons]

Sucks. It's been sooo nice to not have to install anything in a new project :(

[foxhound87]

Then just provide the option, I use others libs that are not following the babel-plugin prefix

[ericclemmons]

@foxhound87 I will. I'd also like to know what other projects aren't following the prefix. In all of the projects we have at work this is a first for me.

[ericclemmons]

Careful using just. It's a loaded term, especially for development!

[foxhound87]

Thanks for your advice. I'm italian I didn't know it. In have this plugins in my project: https://github.com/foxhound87/rfx-stack/blob/master/.babelrc

[ericclemmons]

@foxhound87 Thanks for the list! It's more prevalent than I realized.

Also, no worries. I work with a lot of people with MBAs. "It's just a new form. What's the big deal?" ;)

[ericclemmons]

Wait, I just realized something much simpler: this plugin can check for babel-root-import as well as babel-plugin-babel-root-import before attempting to install it.

This way, if you already have dependencies installed, no problem, and no more erroneous installs.

But missing plugins/presets can still be auto-installed (assuming they follow convention).