Import file in app.config.ts

[zRelux]

Build/Submit details page URL

No response

Summary

I was trying to cleanup my config, and doing so I had created a config folder with some TS files. I tried to import them in the app.config but I started getting weird error

Managed or bare?

bare

Environment

  expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 14.0
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    Managers:
      CocoaPods: 1.14.3 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0
    IDEs:
      Android Studio: 2021.2 AI-212.5712.43.2112.8815526
      Xcode: 15.0/15A240d - /usr/bin/xcodebuild
    npmPackages:
      @expo/metro-config: ~0.17.1 => 0.17.3 
      expo: ^50.0.6 => 50.0.6 
      expo-router: ^3.4.7 => 3.4.7 
      react: 18.2.0 => 18.2.0 
      react-dom: 18.2.0 => 18.2.0 
      react-native: 0.73.2 => 0.73.2 
      react-native-web: ^0.19.10 => 0.19.10 
    npmGlobalPackages:
      eas-cli: 7.1.2
    Expo Workflow: bare

✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check dependencies for packages that should not be installed directly
✔ Check for issues with metro config
✔ Check for common project setup issues
✔ Check npm/ yarn versions
✔ Check Expo config (app.json/ app.config.js) schema
✖ Check that packages match versions required by installed Expo SDK
✔ Check that native modules do not use incompatible support packages
✔ Check for legacy global CLI installed locally
✔ Check that native modules use compatible support package versions for installed Expo SDK

Detailed check results:

The following packages should be updated for best compatibility with the installed expo version:
  @react-native-community/[email protected] - expected version: 11.1.0
  [email protected] - expected version: 0.73.4
  [email protected] - expected version: 4.8.2
  [email protected] - expected version: ~50.0.2
Your project may not work correctly until you install the correct versions of the packages.
Found outdated dependencies
Advice: Use 'npx expo install --check' to review and upgrade your dependencies.

One or more checks failed, indicating possible issues with the project.

Error output

Error reading Expo config at /Users/relux/Documents/Discovertsy/app/app.config.ts:

Unexpected token 'export' /Users/relux/Documents/Discovertsy/app/test.ts:5 export default config;

Reproducible demo or steps to reproduce from a blank project

app.config.ts

import config from './test.ts';

export default {
  name: config.name,
};

test.ts

const config = {
  name: 'hello',
};

export default config;

[szdziedzic]

Hi,

Does the config work for you just fine when working with expo cli?

[zRelux]

Yes I had faced no issues when trying to develop locally, I only noticed when our CI started to fail. To notice that with commonjs imports seems to work, but other issue arise

[feledori]

Just bumped into the same issue, trying to import a ts file which has import won't work and gives the error Cannot use import statement outside a module and the trace shows the cjs loader doing its thing. Shouldn't this file and import first be resolved by typescript?

P.S. Not experiencing this with eas cli but local expo server.

[andrew-hossack]

Any fixes to this problem?

[pkreissel]

Do you use ts-node? I also first missed that in the docs.

[uyend]

Do you use ts-node? I also first missed that in the docs.

Nice this helped fix our issues

[DiazIgnacio]

I'm using ts-node but still not being able to import expo-updates, I'm having the following error when doing import * as Updates from "expo-updates":

SyntaxError: Error reading Expo config at /Users/nacho/Programming/Barkbus/apps/expo-groomers/app.config.ts:

Unexpected token 'export' /.../node_modules/expo-updates/build/index.js:1 export * from './Updates'; ^^^^^^

[nickwb]

If anyone is still having trouble with this, it may be that your tsconfig.json, which is usually set up for metro, is preventing ts-node from loading local modules.

I was able to solve this issue for my usage by putting the following at the beginning of my app.config.ts:

import { register } from 'ts-node';
register({
  // Metro isn't used when resolving app.config.json, so override tsconfig.json module resolution settings
  compilerOptions: { module: 'nodenext', moduleResolution: 'nodenext' },
});

This replaces the following line that appears in the expo documentation: import 'ts-node/register'; // Add this to import TypeScript files

[Devlab-Archimage]

import { register } from 'ts-node'; register({ // Metro isn't used when resolving app.config.json, so override tsconfig.json module resolution settings compilerOptions: { module: 'nodenext', moduleResolution: 'nodenext' }, });

This worked for me, thanks a lot ✌

[radekzz]

If anyone is still having trouble with this, it may be that your tsconfig.json, which is usually set up for metro, is preventing ts-node from loading local modules.

I was able to solve this issue for my usage by putting the following at the beginning of my app.config.ts:

import { register } from 'ts-node'; register({ // Metro isn't used when resolving app.config.json, so override tsconfig.json module resolution settings compilerOptions: { module: 'nodenext', moduleResolution: 'nodenext' }, }); This replaces the following line that appears in the expo documentation: import 'ts-node/register'; // Add this to import TypeScript files

This also helped me to solve ERR_IMPORT_ASSERTION_TYPE_MISSING after upgrade to Expo SDK 54 where i was importing package.json to get version and buildNumber.

My code now is:

import { withPlugins } from '@expo/config-plugins';
import type { ConfigContext, ExpoConfig } from 'expo/config';
import { register } from 'ts-node';
register({
  compilerOptions: { module: 'nodenext', moduleResolution: 'nodenext' },
});
import packageJson from './package.json' assert { type: 'json' };

const VERSION = packageJson.version;
const BUILD_NUMBER = packageJson.buildNumber;