Migration code breaks React Native Hermes bundle due to unsupported dynamic import

[bviebahn]

When using Kysely in an Expo / React Native project, even without using migrations, Hermes fails to bundle because the migration provider includes a computed dynamic import. Since this code is included in the main export bundle, it’s parsed even if unused.

❌ (/Users/expo/Library/Developer/Xcode/DerivedData/mobile-buyqshytqhqhjxgzhdwtlgltoake/Build/Intermediates.noindex/ArchiveIntermediates/mobile/BuildProductsPath/Release-iphoneos/main.jsbundle:298184:37) ...ield import(/* webpackIgnore: true */(0, _classPrivateFieldLooseBase2.default)(this, _props)[_props].path.join((0, _classPrivateFieldLooseBase2.default)(this, _props)[_props].migrationF... ^ Invalid expression encountered

This seems to be the same issue: #751

[cwqt]

Glad to know I'm not the only one with this! Here's a patch-package workaround in the meantime - it just stubs out the FileMigrationProvider so none of the code with dynamic imports are included in the bundle.

kysely+0.27.6.patch

diff --git a/node_modules/kysely/dist/cjs/migration/file-migration-provider.js b/node_modules/kysely/dist/cjs/migration/file-migration-provider.js
index 260b482..0352bc6 100644
--- a/node_modules/kysely/dist/cjs/migration/file-migration-provider.js
+++ b/node_modules/kysely/dist/cjs/migration/file-migration-provider.js
@@ -1,52 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileMigrationProvider = void 0;
-const object_utils_js_1 = require("../util/object-utils.js");
+
 /**
- * Reads all migrations from a folder in node.js.
- *
- * ### Examples
- *
- * ```ts
- * import { promises as fs } from 'node:fs'
- * import path from 'node:path'
- *
- * new FileMigrationProvider({
- *   fs,
- *   path,
- *   migrationFolder: 'path/to/migrations/folder'
- * })
- * ```
+ * Stubbed FileMigrationProvider for React Native compatibility.
+ * Dynamic imports with path.join() are not supported in Metro bundler.
+ * Use a static migration provider instead.
  */
 class FileMigrationProvider {
-    #props;
     constructor(props) {
-        this.#props = props;
+        if (typeof __DEV__ !== 'undefined' && __DEV__) {
+            console.warn('FileMigrationProvider is stubbed out for React Native. Use a static migration provider instead.');
+        }
     }
     async getMigrations() {
-        const migrations = {};
-        const files = await this.#props.fs.readdir(this.#props.migrationFolder);
-        for (const fileName of files) {
-            if (fileName.endsWith('.js') ||
-                (fileName.endsWith('.ts') && !fileName.endsWith('.d.ts')) ||
-                fileName.endsWith('.mjs') ||
-                (fileName.endsWith('.mts') && !fileName.endsWith('.d.mts'))) {
-                const migration = await Promise.resolve(`${
-                /* webpackIgnore: true */ this.#props.path.join(this.#props.migrationFolder, fileName)}`).then(s => require(s));
-                const migrationKey = fileName.substring(0, fileName.lastIndexOf('.'));
-                // Handle esModuleInterop export's `default` prop...
-                if (isMigration(migration?.default)) {
-                    migrations[migrationKey] = migration.default;
-                }
-                else if (isMigration(migration)) {
-                    migrations[migrationKey] = migration;
-                }
-            }
-        }
-        return migrations;
+        return {};
     }
 }
 exports.FileMigrationProvider = FileMigrationProvider;
-function isMigration(obj) {
-    return (0, object_utils_js_1.isObject)(obj) && (0, object_utils_js_1.isFunction)(obj.up);
-}
diff --git a/node_modules/kysely/dist/esm/migration/file-migration-provider.js b/node_modules/kysely/dist/esm/migration/file-migration-provider.js
index f410a83..a7f83e4 100644
--- a/node_modules/kysely/dist/esm/migration/file-migration-provider.js
+++ b/node_modules/kysely/dist/esm/migration/file-migration-provider.js
@@ -1,49 +1,17 @@
 /// <reference types="./file-migration-provider.d.ts" />
-import { isFunction, isObject } from '../util/object-utils.js';
+
 /**
- * Reads all migrations from a folder in node.js.
- *
- * ### Examples
- *
- * ```ts
- * import { promises as fs } from 'node:fs'
- * import path from 'node:path'
- *
- * new FileMigrationProvider({
- *   fs,
- *   path,
- *   migrationFolder: 'path/to/migrations/folder'
- * })
- * ```
+ * Stubbed FileMigrationProvider for React Native compatibility.
+ * Dynamic imports with path.join() are not supported in Metro bundler.
+ * Use a static migration provider instead.
  */
 export class FileMigrationProvider {
-    #props;
     constructor(props) {
-        this.#props = props;
+        if (__DEV__) {
+            console.warn('FileMigrationProvider is stubbed out for React Native. Use a static migration provider instead.');
+        }
     }
     async getMigrations() {
-        const migrations = {};
-        const files = await this.#props.fs.readdir(this.#props.migrationFolder);
-        for (const fileName of files) {
-            if (fileName.endsWith('.js') ||
-                (fileName.endsWith('.ts') && !fileName.endsWith('.d.ts')) ||
-                fileName.endsWith('.mjs') ||
-                (fileName.endsWith('.mts') && !fileName.endsWith('.d.mts'))) {
-                const migration = await import(
-                /* webpackIgnore: true */ this.#props.path.join(this.#props.migrationFolder, fileName));
-                const migrationKey = fileName.substring(0, fileName.lastIndexOf('.'));
-                // Handle esModuleInterop export's `default` prop...
-                if (isMigration(migration?.default)) {
-                    migrations[migrationKey] = migration.default;
-                }
-                else if (isMigration(migration)) {
-                    migrations[migrationKey] = migration;
-                }
-            }
-        }
-        return migrations;
+        return {};
     }
 }
-function isMigration(obj) {
-    return isObject(obj) && isFunction(obj.up);
-}

[smoores-dev]

I also just ran into this. I think this is actually different from #751 — Metro supports webpackIgnore: true comments, but Hermes doesn't support the import function:

Many React libraries shipped the Webpack /* webpackIgnore: true */ comment to achieve similar behavior. To bridge the gap, we've also added support for Webpack's comment but recommend using the Metro equivalent in your app.

Avoid using this syntax for native bundles since import() is generally not available in React Native with Hermes enabled.

https://docs.expo.dev/versions/latest/config/metro/#magic-import-comments

The problem here (I think) is that Metro does follow the webpackIgnore comment, leaving the import statement in the bundle. Hermes then fails to parse the resulting bundle, because it includes import().

In order to resolve this, I think kysely would need to have an export that doesn't include FileMigrationProvider