fix(babel): fix crashes related to babel update

Author: ephys

src/exportables/babel-preset.js

@@ -1 +1,3 @@
-export * from '../internals/babel/local-babel-preset';
+/* eslint-disable import/no-commonjs */
+
+module.exports = require('../internals/babel/local-babel-preset');

src/framework/common/router/_find-routes.js

@@ -8,21 +8,22 @@
 const config = require('../../../../lib/shared/framework-config');
 const { asyncGlob } = require('../../../../lib/internals/util/util');
 
-module.exports = async function getRouteDeclarations() {
+module.exports = function getRouteDeclarations() {
 
   // config.routes
   const routeGlob = config.default.routes;
-  const routeFiles = await asyncGlob(routeGlob);
 
-  const requireArray = `[${routeFiles.map(fileName => `require(${JSON.stringify(fileName)})`).join(',')}]`;
-  let code = `const o = ${requireArray}; export default o;`;
+  return asyncGlob(routeGlob).then(routeFiles => {
+    const requireArray = `[${routeFiles.map(fileName => `require(${JSON.stringify(fileName)})`).join(',')}]`;
+    let code = `const o = ${requireArray}; export default o;`;
 
-  // add the list of file paths in dev for easier debugging.
-  if (process.env.NODE_ENV !== 'production') {
-    const fileNames = `[${routeFiles.map(fileName => JSON.stringify(fileName)).join(',')}]`;
+    // add the list of file paths in dev for easier debugging.
+    if (process.env.NODE_ENV !== 'production') {
+      const fileNames = `[${routeFiles.map(fileName => JSON.stringify(fileName)).join(',')}]`;
 
-    code += `o.__debugFileNames = ${fileNames}`;
-  }
+      code += `o.__debugFileNames = ${fileNames}`;
+    }
 
-  return { code };
+    return { code };
+  });
 };

src/internals/babel/global-babel-preset.js

@@ -19,11 +19,16 @@ module.exports = function buildPreset(api, opts = {}) {
     ],
 
     plugins: [
+      require('@babel/plugin-syntax-dynamic-import').default,
       [require('@babel/plugin-transform-runtime').default, {
         corejs: false,
         helpers: true,
         regenerator: true,
-        useESModules: true,
+
+        // https://github.com/webpack/webpack/issues/4039#issuecomment-273804003
+        // we can't have both `import` and `module.exports` in the same file.
+        // we can't
+        useESModules: false,
         ...opts['@babel/plugin-transform-runtime'],
       }],
     ],
@@ -32,8 +37,8 @@ module.exports = function buildPreset(api, opts = {}) {
   if (process.env.BABEL_ENV === 'production') {
     preset.plugins.push(
       require('babel-plugin-lodash'),
-      require('@babel/plugin-transform-react-constant-elements'),
-      [require('babel-plugin-transform-react-remove-prop-types'), {
+      require('@babel/plugin-transform-react-constant-elements').default,
+      [require('babel-plugin-transform-react-remove-prop-types').default, {
         mode: 'remove',
         removeImport: true,
         ...opts['babel-plugin-transform-react-remove-prop-types'],

src/internals/babel/internal-babel-preset.js

@@ -16,11 +16,16 @@ module.exports = function buildPreset(api, opts = {}) {
     '@babel/preset-env': buildEsModules ? {
       ...passDownOpts['@babel/preset-env'],
       targets: 'maintained node versions',
+      modules: 'commonjs',
     } : {},
+
+    '@babel/plugin-transform-runtime': {
+      useESModules: !buildEsModules,
+    },
   });
 
   preset.presets.push(
-    [require('@babel/preset-react'), {
+    [require('@babel/preset-react').default, {
       development: process.env.BABEL_ENV !== 'production',
       useBuiltIns: true,
       ...opts['@babel/preset-react'],
@@ -29,13 +34,14 @@ module.exports = function buildPreset(api, opts = {}) {
 
   preset.plugins.push(
     require('@babel/plugin-transform-flow-strip-types').default,
-    require('@babel/plugin-syntax-dynamic-import').default,
-    require('@babel/plugin-proposal-class-properties').default,
     [require('@babel/plugin-proposal-decorators').default, {
       // TODO: migrate to non-legacy decorators
       legacy: true,
       // decoratorsBeforeExport: true,
     }],
+    [require('@babel/plugin-proposal-class-properties').default, {
+      loose: true,
+    }],
   );
 
   if (buildEsModules) {

src/internals/babel/local-babel-preset.js

@@ -13,16 +13,17 @@ module.exports = function buildPreset(api, opts = {}) {
   const preset = buildGlobalPreset(api, opts);
 
   preset.presets.push(
-    [require('@babel/preset-react'), {
+    [require('@babel/preset-react').default, {
       development: process.env.BABEL_ENV !== 'production',
       useBuiltIns: true,
       ...opts['@babel/preset-react'],
     }],
   );
 
   preset.plugins.push(
-    require('@babel/plugin-react-intl-auto'),
-    require('@babel/plugin-syntax-dynamic-import'),
+    [require('babel-plugin-react-intl-auto').default, {
+      ...opts['babel-plugin-react-intl-auto'],
+    }],
     // TODO react-loadable-plugin
   );
 

src/internals/webpack/features/babel.js

@@ -24,36 +24,50 @@ export default class BabelFeature extends BaseFeature {
       test: BaseFeature.FILE_TYPE_JS,
       loader: 'babel-loader',
       exclude: /node_modules/,
-      options: this.getProjectBabelConfig(),
+      options: {
+        sourceType: 'module',
+        ...this.getProjectBabelConfig(),
+
+        babelrc: false,
+
+        // Cache build results in ./node_modules/.cache/reworkjs/babel.
+        // We use findCacheDir() because of:
+        // https://github.com/facebookincubator/create-react-app/issues/483
+        cacheDirectory: `${findCacheDir({
+          name: frameworkMetadata.name,
+        })}/babel`,
+      },
     });
 
     // this is ran exclusively on node_modules to transpile valid ES features based on browserslistrc.
     webpack.injectRules({
       test: BaseFeature.FILE_TYPE_JS,
       loader: 'babel-loader',
       include: /node_modules/,
+
+      // do not transpile @babel/runtime as it will try to inject @babel/runtime inside itself.
+      exclude: /@babel\/runtime/,
+
       options: {
+        sourceType: 'unambiguous',
         presets: ['@reworkjs/reworkjs/lib/internals/babel/global-babel-preset'],
+        babelrc: false,
+        cacheDirectory: `${findCacheDir({
+          name: frameworkMetadata.name,
+        })}/babel-on-deps`,
       },
     });
   }
 
   getProjectBabelConfig() {
     const config = this.getBabelConfig();
 
-    config.babelrc = false;
-
     if (this.isDev()) {
+      config.plugins = config.plugins || [];
+
       config.plugins.push('react-hot-loader/babel');
     }
 
-    // Cache build results in ./node_modules/.cache/reworkjs/babel.
-    // We use findCacheDir() because of:
-    // https://github.com/facebookincubator/create-react-app/issues/483
-    config.cacheDirectory = `${findCacheDir({
-      name: frameworkMetadata.name,
-    })}/babel`;
-
     return config;
   }