为什么Webpack在我的主目录中寻找预设？

Question

In the Webpack for a project I'm working on, I have Webpack set to do Babel transpiling so I can use Flow-typed JavaScript. However, when I run Webpack, which has this rule,

  {
    test: /\.js/,
    exclude: ['/node_modules/'],
    use: [{
      loader: 'babel-loader',
      options: {
        presets: ['env'],
        plugins: ['transform-flow-strip-types']
      }
    }]
  }

I'm getting:

Module build failed: Error: Couldn't find preset "transform-flow-strip-types"
relative to directory "/home/andy"

Last time I was working on this, Webpack worked correctly and was searching for transform-flow-strip-types in my node_modules folder, but now it's looking in my home directory. Why would Webpack all of a sudden by looking in my home directory, or how would I be able to diagnose why that is?

Answer 1

This is an unfortunate footgun in Babel's config file parsing. It has traversed all the way out of your project and found an unrelated .babelrc file that is in your home directory.

There's pretty much never a reason to have a .babelrc there, so your best bet would be to delete /home/andy/.babelrc . Alternatively if that's actually something your wanted (if so, please reconsider :P), you could create a no-op .babelrc in your project with just an empty object in it, which would also fix the issue.

I'm currently working to make Babel stop searching for .babelrc files as soon as it finds any package.json but that has yet to land and would only apply to Babel 7.x, not the current 6.x release. https://github.com/babel/babel/pull/7358