Use preset-react's development option + enable modules transform in test env (#5081)

## Minor changes

When `NODE_ENV=test` is used we'll now apply the `'auto'` configuration for modules transformation. Which causes Babel to check if the current environment needs to be transformed or not. In practice this means that the following `.babelrc` is not needed anymore:

**OLD**:

```json
{
  "env": {
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    },
    "test": {
      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
    }
  }
}
```

**NEW**:

```
{
  "presets": ["next/babel"]
}
```

## Patches

`@babel/preset-react` has a `development` option that automatically applies a development-time plugin we manually applied before (`@babel/plugin-transform-react-jsx-source`). It also adds another development-time plugin that is said to make debugging/errors clearer: `@babel/plugin-transform-react-jsx-self` which we didn't apply before. Overall this means we can take advantage of preset-react to provide these plugins.

build/babel/preset.js

@@ -1,3 +1,8 @@
+const env = process.env.NODE_ENV
+const isProduction = env === 'production'
+const isDevelopment = env === 'development'
+const isTest = env === 'test'
+
 // Resolve styled-jsx plugins
 function styledJsxOptions (opts) {
   if (!opts) {
@@ -25,11 +30,18 @@ function styledJsxOptions (opts) {
 
 module.exports = (context, opts = {}) => ({
   presets: [
-    [require('@babel/preset-env'), {
-      modules: false,
+    [require('@babel/preset-env').default, {
+      // In the test environment `modules` is often needed to be set to true, babel figures that out by itself using the `'auto'` option
+      // In production/development this option is set to `false` so that webpack can handle import/export with tree-shaking
+      modules: isDevelopment && isProduction ? false : 'auto',
       ...opts['preset-env']
     }],
-    require('@babel/preset-react')
+    [require('@babel/preset-react'), {
+      // This adds @babel/plugin-transform-react-jsx-source and
+      // @babel/plugin-transform-react-jsx-self automatically in development
+      development: isDevelopment || isTest,
+      ...opts['preset-react']
+    }]
   ],
   plugins: [
     require('babel-plugin-react-require'),

build/webpack/loaders/next-babel-loader.js

@@ -2,7 +2,6 @@ import babelLoader from 'babel-loader'
 
 module.exports = babelLoader.custom(babel => {
   const presetItem = babel.createConfigItem(require('../../babel/preset'), {type: 'preset'})
-  const reactJsxSourceItem = babel.createConfigItem(require('@babel/plugin-transform-react-jsx-source'), {type: 'plugin'})
 
   const configs = new Set()
 
@@ -36,11 +35,6 @@ module.exports = babelLoader.custom(babel => {
         options.presets = [...options.presets, presetItem]
       }
 
-      options.plugins = [
-        ...options.plugins,
-        dev && reactJsxSourceItem
-      ].filter(Boolean)
-
       return options
     }
   }

package.json

@@ -66,7 +66,6 @@
     "@babel/plugin-proposal-class-properties": "7.0.0",
     "@babel/plugin-proposal-object-rest-spread": "7.0.0",
     "@babel/plugin-syntax-dynamic-import": "7.0.0",
-    "@babel/plugin-transform-react-jsx-source": "7.0.0",
     "@babel/plugin-transform-runtime": "7.0.0",
     "@babel/preset-env": "7.0.0",
     "@babel/preset-react": "7.0.0",

test/.babelrc

@@ -1,9 +1,5 @@
 {
   "presets": [
-    ["next/babel", {
-      "preset-env": {
-        "modules": "commonjs"
-      }
-    }]
+    "next/babel"
   ]
-}
+}