Kysely support for react-native-web

[jasonlewicki]

Running on:

"@powersync/common": "0.0.0-dev-20240812065227",
"@powersync/react": "0.0.0-dev-20240812065227",
"@powersync/kysely-driver": "0.0.0-dev-20240812065227",
"@powersync/react-native": "0.0.0-dev-20240812065227",
"@powersync/attachments": "0.0.0-dev-20240812065227",
"@powersync/web": "0.0.0-dev-20240812065227"

Looks like the powersync kysely driver package is pointing to the esm build instead of cjs

remapping @powersync/web
error: node_modules/kysely/dist/esm/migration/file-migration-provider.js: node_modules/kysely/dist/esm/migration/file-migration-provider.js:Invalid call at line 32: import( /* webpackIgnore: true */this.#props.path.join(this.#props.migrationFolder, fileName))
Error: node_modules/kysely/dist/esm/migration/file-migration-provider.js:Invalid call at line 32: import( /* webpackIgnore: true */this.#props.path.join(this.#props.migrationFolder, fileName))
    at transformJS (/Users/*****/node_modules/@expo/metro-config/build/transform-worker/metro-transform-worker.js:251:23)
    at transformJSWithBabel (/Users/*****/node_modules/@expo/metro-config/build/transform-worker/metro-transform-worker.js:352:18)
remapping @powersync/web

[stevensJourney]

I tried adding a CommonJS export to our Kysely driver package, but in testing I noticed that the Metro bundler was still attempting to bundle the ESM export of the kysely package. We might be able to make this easier by bundling Kysely into our driver package.

For now the easiest solution is to configure the Metro bundler to use the CommonJS version of Kysely

in the metro.config.js file:

config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (platform === 'web') {
    if (['react-native-prompt-android', '@powersync/react-native'].includes(moduleName)) {
      return {
        type: 'empty'
      };
    }
    const mapping = {
      'react-native': 'react-native-web',
      '@powersync/web': '@powersync/web/dist/index.umd.js',
      kysely: 'kysely/dist/cjs/index.js'
    };
    if (mapping[moduleName]) {
      console.log('remapping', moduleName);
      return context.resolveRequest(context, mapping[moduleName], platform);
    }
  } else {
    if (['@powersync/web'].includes(moduleName)) {
      return {
        type: 'empty'
      };
    }
  }

  // Ensure you call the default resolver.
  return context.resolveRequest(context, moduleName, platform);
};

[jasonlewicki]

@stevensJourney Thanks again. Working perfectly.

[stevensJourney]

Thanks! I'll close this issue then.