Special case mapbox-gl 2 in babel config

lib/webpack-config/__snapshots__/create-webpack-config.test.js.snap

@@ -29,7 +29,7 @@ Object {
           },
           Object {
             "exclude": Array [
-              /\\[\\\\/\\\\\\\\\\\\\\\\\\]node_modules\\[\\\\/\\\\\\\\\\\\\\\\\\]/,
+              /\\[/\\\\\\\\\\\\\\\\\\]node_modules\\[/\\\\\\\\\\\\\\\\\\]/,
             ],
             "loader": "<PROJECT_ROOT>/node_modules/babel-loader/lib/index.js",
             "options": Object {
@@ -46,7 +46,9 @@ Object {
             "test": /\\\\\\.jsx\\?\\$/,
           },
           Object {
-            "exclude": /@babel\\(\\?:\\\\/\\|\\\\\\\\\\{1,2\\}\\)runtime/,
+            "exclude": Array [
+              /@babel\\(\\?:\\\\/\\|\\\\\\\\\\{1,2\\}\\)runtime/,
+            ],
             "loader": "<PROJECT_ROOT>/node_modules/babel-loader/lib/index.js",
             "options": Object {
               "babelrc": false,

lib/webpack-config/babel-loader-config.js

@@ -4,6 +4,7 @@ const fs = require('fs');
 const path = require('path');
 const browserslist = require('browserslist');
 const chalk = require('chalk');
+const semver = require('semver');
 
 const logger = require('../logger');
 
@@ -77,8 +78,7 @@ function getConfigForNodeModules(urc) {
 
   const loaderConfig = {
     test: /\.js$/,
-    // We want to avoid sending babel/runtime back to babel.
-    exclude: /@babel(?:\/|\\{1,2})runtime/,
+    exclude: getNodeModuleExclude({ urc }),
     loader: require.resolve('babel-loader'),
     options: {
       presets: [
@@ -116,6 +116,30 @@ function getConfigForNodeModules(urc) {
   return loaderConfig;
 }
 
+// getNodeModuleExclude does two things:
+// 1. Avoid sending babel/runtime back to babel.
+// 2. If the app uses mapbox-gl 2.0+, do not transpile. mapbox-gl 2.0+ is
+//    incompatible with babel without additional configuration beacuse it uses
+//    an inlined webworker.
+function getNodeModuleExclude({ urc }) {
+  const excludes = [/@babel(?:\/|\\{1,2})runtime/];
+
+  let usesMapboxGl2 = false;
+  try {
+    const pkg = JSON.parse(
+      fs.readFileSync(path.join(urc.rootDirectory, 'package.json'), 'utf8')
+    );
+    const glJsVer = pkg.dependencies['mapbox-gl'];
+    usesMapboxGl2 = semver.gte(semver.coerce(glJsVer), '2.0.0');
+  } catch (e) {} // eslint-disable-line
+
+  if (usesMapboxGl2) {
+    excludes.push(/[/\\\\]node_modules\/mapbox-gl\/dist.*\.js/);
+  }
+
+  return excludes;
+}
+
 // `babel-preset-mapbox` depends on the `browserslist` and
 // any change in its value would fail to change the default `cacheIdentifier` of `babel-loader`
 // hence leading to stale babel output. To mitigate this we need to create a more accurate `cacheIdentifier`

lib/webpack-config/create-webpack-config.test.js

@@ -46,6 +46,73 @@ test('Basic Test', () => {
   ).resolves.toMatchSnapshot();
 });
 
+test('Adds mapbox-gl to exclude if user is on 2.0.0 or above', () => {
+  getUserConfig.mockResolvedValueOnce({});
+  const tempDir = tempy.directory();
+  fs.writeFileSync(
+    path.join(tempDir, 'package.json'),
+    `{
+      "name": "fake",
+      "version": "0.0.0",
+      "dependencies": {
+        "mapbox-gl": "^2.0.0"
+      }
+    }`
+  );
+
+  fs.writeFileSync(
+    path.join(tempDir, 'babel.config.js'),
+    `module.exports = {}`
+  );
+
+  const urcPromise = config(
+    getCliOpts({
+      configPath: path.join(tempDir, 'underreact.config.js')
+    })
+  );
+
+  return urcPromise.then(urc => {
+    const config = createWebpackConfig(urc);
+    expect(config.module.rules[0].oneOf[1].exclude).toEqual([
+      /@babel(?:\/|\\{1,2})runtime/,
+      /[/\\\\]node_modules\/mapbox-gl\//
+    ]);
+  });
+});
+
+test('Does not add mapbox-gl to exclude if user is on a version below 2.0.0', () => {
+  getUserConfig.mockResolvedValueOnce({});
+  const tempDir = tempy.directory();
+  fs.writeFileSync(
+    path.join(tempDir, 'package.json'),
+    `{
+      "name": "fake",
+      "version": "0.0.0",
+      "dependencies": {
+        "mapbox-gl": "~1.9.0"
+      }
+    }`
+  );
+
+  fs.writeFileSync(
+    path.join(tempDir, 'babel.config.js'),
+    `module.exports = {}`
+  );
+
+  const urcPromise = config(
+    getCliOpts({
+      configPath: path.join(tempDir, 'underreact.config.js')
+    })
+  );
+
+  return urcPromise.then(urc => {
+    const config = createWebpackConfig(urc);
+    expect(config.module.rules[0].oneOf[1].exclude).toEqual([
+      /@babel(?:\/|\\{1,2})runtime/
+    ]);
+  });
+});
+
 test('Uses babel.config.js if it exists at project root', () => {
   getUserConfig.mockResolvedValueOnce({});
   const tempDir = tempy.directory();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapbox/underreact",
-  "version": "0.5.4",
+  "version": "0.6.0-dev.3",
   "description": "Minimal, extensible React app build system that you won't need to eject",
   "main": "index.js",
   "scripts": {
@@ -37,7 +37,7 @@
     "assets-webpack-plugin": "^3.8.4",
     "autoprefixer": "^8.6.5",
     "babel-loader": "^8.0.2",
-    "browserslist": "^4.0.2",
+    "browserslist": "^4.16.0",
     "chalk": "^2.4.1",
     "chokidar": "^2.0.4",
     "cpy": "^7.0.1",
@@ -55,6 +55,7 @@
     "promise": "^8.0.1",
     "remark-preset-davidtheclark": "^0.10.0",
     "resolve-pkg": "^1.0.0",
+    "semver": "^7.3.4",
     "serve-handler": "^5.0.5",
     "serve-static": "^1.13.2",
     "source-map-url": "^0.4.0",