使用next.js入门示例获取babel构建错误

Question

Following along the getting started example from ZEIT for next.js, I'm getting this error:

error  in ./pages/index.js

Module build failed: ReferenceError: [BABEL] /Users/Projects/nextDemo/pages/index.js: Using removed Babel 5 option: /Users/Projects/.babelrc.optional - Put the specific transforms you want in the `plugins` option

What is this error - is it trying to use my globally installed babel? Is there a version mismatch or an update I should be doing?

This is the basic steps I did to get here:

$ npm install next --save
$ mkdir pages

//pages/index.js:
import React from 'react'
export default () => <div>Hello world!</div>

Add a script to the package.json like this:
{
  "scripts": {
    "dev": "next"
  }
}

$ npm run dev

and the installed packages:

└─┬ next@1.2.3
  ├── ansi-html@0.0.6
  ├── babel-core@6.18.2
  ├── babel-generator@6.19.0
  ├── babel-loader@6.2.8
  ├── babel-plugin-module-resolver@2.4.0
  ├── babel-plugin-react-require@3.0.0
  ├── babel-plugin-transform-async-to-generator@6.16.0
  ├── babel-plugin-transform-class-properties@6.19.0
  ├── babel-plugin-transform-object-rest-spread@6.19.0
  ├── babel-plugin-transform-runtime@6.15.0
  ├── babel-preset-es2015@6.18.0
  ├── babel-preset-react@6.16.0
  ├── babel-runtime@6.18.0
  ├── cross-spawn@5.0.1
  ├── del@2.2.2
  ├── domready@1.0.8
  ├── friendly-errors-webpack-plugin@1.1.1
  ├── glamor@2.20.8
  ├── glob-promise@2.0.0
  ├── htmlescape@1.1.1
  ├── is-windows-bash@1.0.2
  ├── json-loader@0.5.4
  ├── loader-utils@0.2.16
  ├── minimist@1.2.0
  ├── mkdirp-then@1.2.0
  ├── mz@2.6.0
  ├── path-match@1.2.4
  ├── react@15.4.1
  ├── react-dom@15.4.1
  ├── react-hot-loader@3.0.0-beta.6
  ├── read-pkg-up@2.0.0
  ├── send@0.14.1
  ├── source-map-support@0.4.6
  ├── strip-ansi@3.0.1
  ├── url@0.11.0
  ├── webpack@1.13.3
  ├── webpack-dev-middleware@1.8.4
  ├── webpack-hot-middleware@2.13.2
  └── write-file-webpack-plugin@3.4.2

Answer 1

It uses your .babelrc file from the parent directory because:

Babel will look for a .babelrc in the current directory of the file being transpiled. If one does not exist, it will travel up the directory tree until it finds either a .babelrc, or a package.json with a "babel": {} hash within.

Use "babelrc": false to stop lookup behavior.