Expo Web unable to resolve path aliases

Hi, following this article I have arranged my project to use aliases to tidy up imports and increase portability i.e.;

import { BottomTabNav } from "_navigations";

My directory structure is along the lines of;

src/navigations
src/scenes
src/components/atoms
src/components/molecules
src/components/organisms
...

I have configured these aliases in .babelrc:

{
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "_navigations": "./src/navigations",
...

.eslintrc:

module.exports = {
  root: true,
  extends: '@react-native-community',
  plugins: ['import'],
  settings: {
    'import/resolver': {
      node: {
        paths: ['src'],
        alias: {
          _navigations: './src/navigations',
...

and jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "_navigations": ["src/navigations/*"],
...

When I attempt to run expo web I get the error;

Module not found: Can't resolve '_navigations' in '/Users/admin/DevProjects/MyProject/src'

I then tried to resolve this by adding these aliases to my webpack.config.js file (created with expo customize:web). I have added all of my aliases in here but they are not resolving.

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

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // Customize the config before returning it.

  config.resolve.alias['_assets'] = './src/assets';
  config.resolve.alias['_constants'] = './src/constants';
  config.resolve.alias['_components'] = './src/components';
  config.resolve.alias['_atoms'] = './src/components/atoms';
  config.resolve.alias['_molecules'] = './src/components/molecules';
  config.resolve.alias['_organisms'] = './src/components/organisms';
  config.resolve.alias['_navigations'] = './src/navigations';
  config.resolve.alias['_scenes'] = './src/scenes';
  config.resolve.alias['_services'] = './src/services';
  config.resolve.alias['_styles'] = './src/styles';
  config.resolve.alias['_utils'] = './src/utils';

  return config;
};

I have tried omitting the “./” component of the paths i.e. “src/navigations” but no luck.

I can’t seem to find any references for how to add these aliases to webpack.config.js - can anyone assist?

Thank you!

I have the same problem.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.