Upgrade Babel 6 to Babel 7 (major) (#4050)

Upgrade Babel 6 to Babel 7 (major)

.babelrc

@@ -1,19 +1,22 @@
 {
   "presets": [
-    "env",
-    "react",
-    "flow"
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-flow"
   ],
   "plugins": [
-    "transform-object-rest-spread",
-    "transform-class-properties",
-    "transform-runtime"
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime"
   ],
   "env": {
     "test": {
       "presets": [
-        "es2015",
-        "./babel"
+        ["./babel", {
+          "preset-env": {
+            "modules": "commonjs"
+          }
+        }]
        ]
     }
   }

examples/with-apollo-and-redux-saga/components/PageCount.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 

examples/with-fela/FelaProvider.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import { Component } from 'react'
 import PropTypes from 'prop-types'
 

examples/with-redux-wrapper/components/AddCount.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React, {Component} from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "6.0.0-canary.2",
+  "version": "5.0.1-canary.17",
   "description": "Minimalistic framework for server-rendered React applications",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -52,22 +52,23 @@
     "bin/*": "standard"
   },
   "dependencies": {
+    "@babel/core": "7.0.0-beta.42",
+    "@babel/plugin-proposal-class-properties": "7.0.0-beta.42",
+    "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.42",
+    "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.42",
+    "@babel/plugin-transform-react-jsx-source": "7.0.0-beta.42",
+    "@babel/plugin-transform-runtime": "7.0.0-beta.42",
+    "@babel/preset-env": "7.0.0-beta.42",
+    "@babel/preset-react": "7.0.0-beta.42",
+    "@babel/runtime": "7.0.0-beta.42",
+    "@babel/template": "7.0.0-beta.42",
     "@zeit/check-updates": "1.1.1",
     "@zeit/source-map-support": "0.6.2",
     "ansi-html": "0.0.7",
-    "babel-core": "6.26.0",
-    "babel-loader": "7.1.2",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-loader": "8.0.0-beta.2",
     "babel-plugin-react-require": "3.0.0",
-    "babel-plugin-syntax-dynamic-import": "6.18.0",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "babel-plugin-transform-react-jsx-source": "6.22.0",
-    "babel-plugin-transform-react-remove-prop-types": "0.4.8",
-    "babel-plugin-transform-runtime": "6.23.0",
-    "babel-preset-env": "1.6.0",
-    "babel-preset-react": "6.24.1",
-    "babel-runtime": "6.26.0",
-    "babel-template": "6.26.0",
+    "babel-plugin-transform-react-remove-prop-types": "0.4.13",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "cross-spawn": "5.1.0",
     "del": "3.0.0",
@@ -77,7 +78,7 @@
     "fresh": "0.5.2",
     "friendly-errors-webpack-plugin": "1.6.1",
     "glob": "7.1.2",
-    "hoist-non-react-statics": "2.5.0",
+    "hoist-non-react-statics": "2.3.1",
     "htmlescape": "1.1.1",
     "http-errors": "1.6.2",
     "http-status": "1.0.1",
@@ -106,7 +107,8 @@
     "write-file-webpack-plugin": "4.2.0"
   },
   "devDependencies": {
-    "@taskr/babel": "1.1.0",
+    "@babel/preset-flow": "7.0.0-beta.43",    
+    "@taskr/babel": "1.1.0-next.1",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
     "@taskr/watch": "1.1.0",
@@ -115,8 +117,6 @@
     "babel-jest": "21.2.0",
     "babel-plugin-istanbul": "4.1.5",
     "babel-plugin-transform-remove-strict-mode": "0.0.2",
-    "babel-preset-es2015": "6.24.1",
-    "babel-preset-flow": "6.23.0",
     "benchmark": "2.1.4",
     "cheerio": "0.22.0",
     "chromedriver": "2.32.3",

server/build/babel/find-config.js

@@ -1,16 +0,0 @@
-import { join } from 'path'
-import buildConfigChain from 'babel-core/lib/transformation/file/options/build-config-chain'
-
-export default function findBabelConfig (dir) {
-  // We need to provide a location of a filename inside the `dir`.
-  // For the name of the file, we could be provide anything.
-  const filename = join(dir, 'filename.js')
-  const options = { babelrc: true, filename }
-
-  // First We need to build the config chain.
-  // Then we need to remove the config item with the location as "base".
-  // That's the config we are passing as the "options" below
-  const configList = buildConfigChain(options).filter(i => i.loc !== 'base')
-
-  return configList[0]
-}

server/build/babel/plugins/handle-import.js

@@ -1,7 +1,7 @@
 // Based on https://github.com/airbnb/babel-plugin-dynamic-import-webpack
 // We've added support for SSR with this version
-import template from 'babel-template'
-import syntax from 'babel-plugin-syntax-dynamic-import'
+import template from '@babel/template'
+import syntax from '@babel/plugin-syntax-dynamic-import'
 import { dirname, resolve, sep } from 'path'
 import Crypto from 'crypto'
 

server/build/babel/preset.js

@@ -25,10 +25,10 @@ function styledJsxOptions (opts) {
 
 const envPlugins = {
   'development': [
-    require.resolve('babel-plugin-transform-react-jsx-source')
+    require('@babel/plugin-transform-react-jsx-source')
   ],
   'production': [
-    require.resolve('babel-plugin-transform-react-remove-prop-types')
+    require('babel-plugin-transform-react-remove-prop-types')
   ]
 }
 
@@ -36,23 +36,23 @@ const plugins = envPlugins[process.env.NODE_ENV] || envPlugins['development']
 
 module.exports = (context, opts = {}) => ({
   presets: [
-    [require.resolve('babel-preset-env'), {
+    [require('@babel/preset-env'), {
       modules: false,
       ...opts['preset-env']
     }],
-    require.resolve('babel-preset-react')
+    require('@babel/preset-react')
   ],
   plugins: [
-    require.resolve('babel-plugin-react-require'),
-    require.resolve('./plugins/handle-import'),
-    require.resolve('babel-plugin-transform-object-rest-spread'),
-    require.resolve('babel-plugin-transform-class-properties'),
-    [require.resolve('babel-plugin-transform-runtime'), opts['transform-runtime'] || {
+    require('babel-plugin-react-require'),
+    require('./plugins/handle-import'),
+    require('@babel/plugin-proposal-class-properties'),
+    require('@babel/plugin-proposal-object-rest-spread'),
+    [require('@babel/plugin-transform-runtime'), opts['transform-runtime'] || {
       helpers: false,
       polyfill: false,
       regenerator: true
     }],
-    [require.resolve('styled-jsx/babel'), styledJsxOptions(opts['styled-jsx'])],
+    [require('styled-jsx/babel'), styledJsxOptions(opts['styled-jsx'])],
     ...plugins
   ]
 })

server/build/webpack.js

@@ -5,13 +5,16 @@ import UglifyJSPlugin from 'uglifyjs-webpack-plugin'
 import CaseSensitivePathPlugin from 'case-sensitive-paths-webpack-plugin'
 import WriteFilePlugin from 'write-file-webpack-plugin'
 import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin'
+import {loadPartialConfig, createConfigItem} from '@babel/core'
 import {getPages} from './webpack/utils'
 import PagesPlugin from './plugins/pages-plugin'
 import NextJsSsrImportPlugin from './plugins/nextjs-ssr-import'
 import DynamicChunksPlugin from './plugins/dynamic-chunks-plugin'
 import UnlinkFilePlugin from './plugins/unlink-file-plugin'
 import PagesManifestPlugin from './plugins/pages-manifest-plugin'
-import findBabelConfig from './babel/find-config'
+
+const presetItem = createConfigItem(require('./babel/preset'), {type: 'preset'})
+const hotLoaderItem = createConfigItem(require('react-hot-loader/babel'), {type: 'plugin'})
 
 const nextDir = path.join(__dirname, '..', '..', '..')
 const nextNodeModulesDir = path.join(nextDir, 'node_modules')
@@ -29,29 +32,26 @@ function babelConfig (dir, {isServer, dev}) {
     cacheDirectory: true,
     presets: [],
     plugins: [
-      dev && !isServer && require.resolve('react-hot-loader/babel')
+      dev && !isServer && hotLoaderItem
     ].filter(Boolean)
   }
 
-  const externalBabelConfig = findBabelConfig(dir)
-  if (externalBabelConfig) {
+  const filename = path.join(dir, 'filename.js')
+  const externalBabelConfig = loadPartialConfig({ babelrc: true, filename })
+  if (externalBabelConfig && externalBabelConfig.babelrc) {
     // Log it out once
     if (!isServer) {
       console.log(`> Using external babel configuration`)
-      console.log(`> Location: "${externalBabelConfig.loc}"`)
+      console.log(`> Location: "${externalBabelConfig.babelrc}"`)
     }
-    // It's possible to turn off babelrc support via babelrc itself.
-    // In that case, we should add our default preset.
-    // That's why we need to do this.
-    const { options } = externalBabelConfig
-    mainBabelOptions.babelrc = options.babelrc !== false
+    // By default babel-loader will look for babelrc, so no need to set it to true
   } else {
     mainBabelOptions.babelrc = false
   }
 
   // Add our default preset if the no "babelrc" found.
   if (!mainBabelOptions.babelrc) {
-    mainBabelOptions.presets.push(require.resolve('./babel/preset'))
+    mainBabelOptions.presets.push(presetItem)
   }
 
   return mainBabelOptions

server/document.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import htmlescape from 'htmlescape'

test/integration/basic/pages/fragment-syntax.js

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import React from 'react'
+
+export default () => <>My component!</>

test/integration/basic/test/index.test.js

@@ -36,6 +36,7 @@ describe('Basic Features', () => {
       renderViaHTTP(context.appPort, '/link'),
       renderViaHTTP(context.appPort, '/stateful'),
       renderViaHTTP(context.appPort, '/stateless'),
+      renderViaHTTP(context.appPort, '/fragment-syntax'),
       renderViaHTTP(context.appPort, '/custom-extension'),
       renderViaHTTP(context.appPort, '/styled-jsx'),
       renderViaHTTP(context.appPort, '/with-cdm'),

test/integration/basic/test/rendering.js

@@ -15,6 +15,11 @@ export default function ({ app }, suiteName, render, fetch) {
       expect(html.includes('My component!')).toBeTruthy()
     })
 
+    test('renders with fragment syntax', async () => {
+      const html = await render('/fragment-syntax')
+      expect(html.includes('My component!')).toBeTruthy()
+    })
+
     test('renders a stateful component', async () => {
       const $ = await get$('/stateful')
       const answer = $('#answer')