Removes babel configuration from users project (#3719)

* WIP: playing with presets and jest babel config

* Only set preset env for jest

* Remove all babelconfig from users project, including
Load all babel config from rwjs/interal

* Whoops deleted the wrong rc

* Fix apiSide register

* Fix prerendering

* Try programatically generating babel config for project

* Fixes for linter config

* A few tweaks

* Config to configFile

* Lint the linter config...

* Separate out fw and project eslint config

* Standarise usage of babel options

* Remove reminder for me

* Switch ignores array to string array

* Update internal package dependency

* Add middleware to warn users about custom babel config

* Remove scary warning, only leave helpful error if using a babelrc file

* Add babelrc check to build command

* Add comment to explain presetEnv flag

* Consistent test pattern for cell and routes overrides

* Undo web jest env changes

* Make fast-glob explicit cli dependency

* Bump eslint config dep to 0.38.3 too

* Option A: remove polyfill plugin, only have transform-runtime
Also change framework config to make sure corejs isn't imported

* move framework ESlint settings 100% to ./.eslintrc.js

Co-authored-by: David Price <thedavid@thedavidprice.com>

.eslintrc.js

@@ -1,7 +1,24 @@
 const path = require('path')
 
+const findUp = require('findup-sync')
+
+// Framework Babel config is monorepo root ./babel.config.js
+// `yarn lint` runs for each workspace, which needs findup for path to root
+const findBabelConfig = (cwd = process.cwd()) => {
+  const configPath = findUp('babel.config.js', { cwd })
+  if (!configPath) {
+    throw new Error(`Eslint-parser could not find a "babel.config.js" file`)
+  }
+  return configPath
+}
+
 module.exports = {
   extends: path.join(__dirname, 'packages/eslint-config/shared.js'),
+  parserOptions: {
+    babelOptions: {
+      configFile: findBabelConfig(),
+    },
+  },
   ignorePatterns: [
     'dist',
     'fixtures',

__fixtures__/example-todo-main/api/src/lib/transform.js

@@ -0,0 +1,19 @@
+var sym = Symbol()
+
+var promise = Promise.resolve()
+
+var check = arr.includes('yeah!')
+
+console.log(arr[Symbol.iterator]())
+
+Promise.allSettled()
+
+console.log([].includes('bazinga'))
+
+Promise.any()
+
+
+Object.hasOwn({ x: 2 }, "x")
+
+var arr = [1, 2, 3];
+arr.at(0) === 1

__fixtures__/example-todo-main/babel.config.js

@@ -1,3 +1,18 @@
+// This is added as a test for prebuild;
+// check: packages/internal/**/build_api.test.ts
 module.exports = {
-  presets: ['@redwoodjs/core/config/babel-preset'],
+  plugins: [
+    [
+      'babel-plugin-auto-import',
+      {
+        declarations: [
+          {
+            // import kitty from 'kitty-purr'
+            default: 'kitty',
+            path: 'kitty-purr',
+          },
+        ],
+      },
+    ],
+  ]
 }

babel.config.js

@@ -55,6 +55,18 @@ module.exports = {
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     ['@babel/plugin-proposal-private-methods', { loose: true }],
     ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        // https://babeljs.io/docs/en/babel-plugin-transform-runtime/#core-js-aliasing
+        // Setting the version here also requires `@babel/runtime-corejs3`
+        corejs: { version: 3, proposals: true },
+        // https://babeljs.io/docs/en/babel-plugin-transform-runtime/#version
+        // Transform-runtime assumes that @babel/runtime@7.0.0 is installed.
+        // Specifying the version can result in a smaller bundle size.
+        version: packageJSON.devDependencies['@babel/runtime-corejs3'],
+      },
+    ],
   ],
   overrides: [
     // ** WEB PACKAGES **
@@ -93,18 +105,6 @@ module.exports = {
             ],
           },
         ],
-        [
-          '@babel/plugin-transform-runtime',
-          {
-            // https://babeljs.io/docs/en/babel-plugin-transform-runtime/#core-js-aliasing
-            // Setting the version here also requires `@babel/runtime-corejs3`
-            corejs: { version: 3, proposals: true },
-            // https://babeljs.io/docs/en/babel-plugin-transform-runtime/#version
-            // Transform-runtime assumes that @babel/runtime@7.0.0 is installed.
-            // Specifying the version can result in a smaller bundle size.
-            version: packageJSON.devDependencies['@babel/runtime-corejs3'],
-          },
-        ],
         // normally provided through preset-env detecting TARGET_BROWSER
         // but webpack 4 has an issue with this
         // see https://github.com/PaulLeCam/react-leaflet/issues/883

packages/api/package.json

@@ -10,8 +10,8 @@
   "types": "./dist/index.d.ts",
   "license": "MIT",
   "dependencies": {
+    "@babel/runtime-corejs3": "7.15.4",
     "@prisma/client": "3.3.0",
-    "core-js": "3.18.3",
     "crypto-js": "4.1.1",
     "jsonwebtoken": "8.5.1",
     "jwks-rsa": "2.0.5",

packages/cli/package.json

@@ -35,6 +35,7 @@
     "dotenv-defaults": "3.0.0",
     "envinfo": "7.8.1",
     "execa": "5.1.1",
+    "fast-glob": "3.2.7",
     "fs-extra": "10.0.0",
     "humanize-string": "2.1.0",
     "latest-version": "5.1.0",

packages/cli/src/commands/build.js

@@ -12,6 +12,7 @@ import { detectPrerenderRoutes } from '@redwoodjs/prerender/detection'
 import { getPaths } from '../lib'
 import c from '../lib/colors'
 import { generatePrismaCommand } from '../lib/generatePrismaClient'
+import checkForBabelConfig from '../middleware/checkForBabelConfig'
 
 import { getTasks as getPrerenderTasks } from './prerender'
 
@@ -71,6 +72,7 @@ export const builder = (yargs) => {
       default: false,
       description: 'Measure build performance',
     })
+    .middleware(checkForBabelConfig)
     .epilogue(
       `Also see the ${terminalLink(
         'Redwood CLI Reference',

packages/cli/src/commands/dev.js

@@ -8,6 +8,7 @@ import { getConfig, getConfigPath, shutdownPort } from '@redwoodjs/internal'
 import { getPaths } from '../lib'
 import c from '../lib/colors'
 import { generatePrismaClient } from '../lib/generatePrismaClient'
+import checkForBabelConfig from '../middleware/checkForBabelConfig'
 
 export const command = 'dev [side..]'
 export const description = 'Start development servers for api, and web'
@@ -34,6 +35,7 @@ export const builder = (yargs) => {
       type: 'boolean',
       description: 'Reload on changes to node_modules',
     })
+    .middleware(checkForBabelConfig)
     .epilogue(
       `Also see the ${terminalLink(
         'Redwood CLI Reference',

packages/cli/src/commands/test.js

@@ -103,7 +103,7 @@ export const handler = async ({
     collectCoverage ? '--collectCoverage' : null,
     '--passWithNoTests',
     ...jestFilterArgs,
-    '--runInBand',
+    '--runInBand', // @TODO always run in band, even for web as we get babel errors https://github.com/redwoodjs/redwood/issues/3646
   ].filter((flagOrValue) => flagOrValue !== null) // Filter out nulls, not booleans because user may have passed a --something false flag
 
   // If the user wants to watch, set the proper watch flag based on what kind of repo this is

packages/cli/src/middleware/checkForBabelConfig.js

@@ -0,0 +1,43 @@
+import boxen from 'boxen'
+import fg from 'fast-glob'
+
+import { getPaths } from '@redwoodjs/internal'
+
+import c from '../lib/colors'
+
+const isUsingBabelRc = () => {
+  return (
+    fg.sync('**/*/.babelrc(.*)?', {
+      cwd: getPaths().base,
+      ignore: 'node_modules',
+    }).length > 0
+  )
+}
+const BABEL_SETTINGS_LINK = c.warning('https://redwoodjs.com/docs/builds')
+
+const checkForBabelConfig = () => {
+  if (isUsingBabelRc()) {
+    const messages = [
+      "Looks like you're trying to configure one of your sides with a .babelrc file.",
+      'These settings will be ignored, unless you use a babel.config.js file',
+      '',
+      'Your plugins and settings will be automatically merged with',
+      `the Redwood built-in config, more details here: ${BABEL_SETTINGS_LINK}`,
+    ]
+
+    const errTitle = 'Incorrect project configuration'
+
+    console.log(
+      boxen(messages.join('\n'), {
+        title: errTitle,
+        padding: { top: 0, bottom: 0, right: 1, left: 1 },
+        margin: 1,
+        borderColor: 'red',
+      })
+    )
+
+    throw new Error(errTitle)
+  }
+}
+
+export default checkForBabelConfig