[TypeScript] Path aliases with Expo Web

[elie222]

🐛 Bug Report

Using TypeScript paths works fine on mobile, but not with Expo web.

Environment

Web

Steps to Reproduce

Add paths and baseUrl to your tsconfig.json file.

For example:

    "baseUrl": "./",
    "paths": {
      "@src/*": ["./src/*"],
      "@kitten/*": ["./node_modules/react-native-ui-kitten/*"]
    },

And then import a file using the @src/ syntax syntax. eg:

import { EmailIconFill } from '@src/assets/icons';

Expected Behavior

The project should run on web. (It does work on iOS simulator).

Actual Behavior

The project fails to compile, with an error similar to this:

Error:

.../kittenTricks/src/core/navigation/navigationParams.tsx
Module not found: Can't resolve '@src/assets/icons' in '.../kittenTricks/src/core/navigation'

Reproducible Demo

git clone git@github.com:elie222/kittenTricks.git
yarn web

[ide]

This seems unrelated to TypeScript if I understand it correctly. You need to tell TS about the aliases so that the type checks will pass, but the bundlers use separate configurations. On web you will need to configure webpack. How is this working with Metro?

[EvanBacon]

Agree with @ide, I'm not sure how this works in the first place.
You can add aliases to Webpack like so:

1. expo customize:web
2. Generate a webpack.config.js
3. Add the aliases:

// webpack.config.js

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.resolve.alias['moduleA'] = 'moduleB';

  // Finally return the new config for the CLI to use.
  return config;
};

Please refer to the Webpack guide in the expo docs for more info: https://docs.expo.io/versions/v33.0.0/guides/customizing-webpack/

[artyorsh]

There is one more thing I had to do to get this working.
For example, we have a project which contains a module and a demo app which depends on this module. In a development mode we want to build this module locally, but in a production I want to use it from node_modules. Both module and app are written in typescript.

I had to configure my webpack.config.js to resolve this module with ts-loader. I think that would be a good note in your documentation.

Example code:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

const aliases = {
  'module-of-interest': path.resolve('../packages/module-of-interess'),
};

const tsLoaderRules = {
  test: /\.tsx?$/,
  loader: 'ts-loader',
  options: {
    configFile: `tsconfig.dev.json`
  }
};

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.resolve.alias = {
    ...config.resolve.alias,
    ...aliases,
  };

  config.module.rules = [
    ...config.module.rules,
    tsLoaderRules,
  ];

  // Other configuration options

  return config;

[artyorsh]

Sorry guys for disinformation

const babelLoaderRules = {
  test: /\.tsx?$/,
  loader: 'babel-loader',
  options: {
    presets: ['babel-preset-expo'],
  },
};

const config = await createExpoWebpackConfigAsync(env, argv);
config.module.rules = [
    ...config.module.rules,
    babelLoaderRules,
];

Setting the code above made the things working :)

[EvanBacon]

This has been fixed upstream for a bit now, verified with:

• expo init
• choose TS blank template
• expo start:web