bug: Requiring ts-node in app.config.ts makes app crash

[2Senn]

Provide environment information

System:
OS: Linux 6.10 Fedora Linux 39 (KDE Plasma)
CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
Memory: 9.34 GB / 15.47 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 20.12.0 - ~/.nvm/versions/node/v20.12.0/bin/node
npm: 10.8.3 - ~/.nvm/versions/node/v20.12.0/bin/npm
pnpm: 9.9.0 - ~/.local/share/pnpm/pnpm

Describe the bug

I have a custom plugin that I want to call in my app.config.ts like so:

// import "ts-node/register";

import type { ConfigContext, ExpoConfig } from "expo/config";

/**
 * @param config ExpoConfig coming from the static config app.json if it exists
 *
 * You can read more about Expo's Configuration Resolution Rules here:
 * https://docs.expo.dev/workflow/configuration/#configuration-resolution-rules
 */
module.exports = ({ config }: ConfigContext): Partial<ExpoConfig> => {
  const existingPlugins = config.plugins ?? [];

  return {
    ...config,
    plugins: [
      ...existingPlugins,
      require("./plugins/withSplashScreen").withSplashScreen,
    ],
  };
};

I need to import ts-node to be able to use the plugin but the app crashes when I do that with this error:

value.replace is not a function

What am i doing wrong?

Link to reproduction

just spin up a create t3 turbo app and install ts-node then try adding it to the app.config.ts

To reproduce

.

Additional information

No response

[juliusmarminge]

Is this monorepo related?CI don't see how this is relevant to this repo.

I suggest opening a support request at one of Expo's forums

[2Senn]

I assumed it is since the project works just fine outside the monorepo structure

[juliusmarminge]

i still don't know what to register and where?

it's a ts file, why do you even need to load ts-node? historically i've never gotten ts-node to work ootb for anything lol...

[2Senn]

Ugh I never want to use it either. I wish I never need to see "require" too.

If you heard of the ignite template for native apps this is how their file looks like and it has ts-node imported. I am not really sure why but it is necessary to make the splashscreen (native module) plugin to work.

I am trying to use the ignite template along with the turbo repo and here we are.

[Wundero]

@2Senn You can try using @swc-node/register as a drop-in replacement, or tsx, but I haven't gotten any typescript importing systems to work personally.

The issue with ts-node in this case is here: TypeStrong/ts-node#2000, and it seems like a wontfix because ts-node hasn't updated in a year.

I have been trying for some time to figure out how to import values from packages in the monorepo, mainly to standardize constants like the url schema:

Expo Config

// app.config.ts

import "@swc-node/register";
// Or import "ts-node/register";
// Or import "tsx";
// Or import "tsx/esm";
// None seem to work

import type { ConfigContext, ExpoConfig } from "expo/config";

import {
  ANDROID_IDENTIFIER,
  IDENTIFIER,
  IOS_IDENTIFIER,
  TITLE,
} from "@acme/constants"; // TODO this doesn't work
// Error: Cannot access 'IDENTIFIER' before initialization
// Require hasn't really worked for me either.

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: TITLE,
  description: "", // TODO translations
  slug: IDENTIFIER,
  scheme: IDENTIFIER,
  version: "0.1.0", // TODO: get from package.json
  orientation: "portrait",
  icon: "./assets/icon.png", // TODO shared assets?
  userInterfaceStyle: "automatic",
  splash: {
    image: "./assets/icon.png",
    resizeMode: "contain",
    backgroundColor: "#1F104A", // TODO this
  },
  updates: {
    fallbackToCacheTimeout: 0,
  },
  assetBundlePatterns: ["**/*"],
  ios: {
    bundleIdentifier: IOS_IDENTIFIER,
    supportsTablet: true,
    infoPlist: {
      NSFaceIDUsageDescription: `Allow ${TITLE} to access your Face ID biometric data.`,
    },
    config: {
      usesNonExemptEncryption: false,
    },
  },
  android: {
    package: ANDROID_IDENTIFIER,
    adaptiveIcon: {
      foregroundImage: "./assets/icon.png",
      backgroundColor: "#1F104A",
    },
  },
  experiments: {
    tsconfigPaths: true,
    typedRoutes: true,
    reactCompiler: true,
  },
  plugins: [
    "expo-router",
    "expo-localization",
    [
      "expo-secure-store",
      {
        faceIDPermission: `Allow ${TITLE} to access your Face ID biometric data.`,
      },
    ],
    "react-native-webassembly",
    "expo-sqlite",
  ],
});

I haven't had any luck getting this to work, and its unclear what is even wrong. I don't really want to write weird interop layers to get stuff like this to work, and I am hoping to go further and add translations to support publishing different descriptions based on the language of the user, but that will not work if I can't get this to work.