Alias support

[ghost]

I can't build my project as we used babel-plugin-module-resolver plugin for alias (src => ../root/src)

✘ [ERROR] [plugin react-native-asset-loader] ENOENT: no such file or directory, scandir '.../src/features/inspiration/Content/src/assets/icons'

    src/features/inspiration/Content/BrandRow.tsx:4:17:
      4 │ import logo from 'src/assets/icons/logo.png';
        ╵                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/react-native-esbuild/src/plugins/asset-loader.js:60:10:
      60 │     build.onResolve({ filter }, async (args) => {
         ╵           ~~~~~~~~~

[oblador]

Asset loader supports an alias config (although undocumented, and I might discontinue support) and for source files there are an alias plugin for esbuild you can use.

[ghost]

I added that plugin:

// react-native.config.js
const {
  createEsbuildCommands,
  esmCustomMainFieldResolverPlugin,
} = require('react-native-esbuild');
const alias = require('esbuild-plugin-alias');

const commands = createEsbuildCommands(({ plugins, ...rest }) => ({
  ...rest,
  plugins: [
    alias({
      src: '/home/i/all_work/<hidden>/app/src',
    }),
  ]
    .concat(plugins)
    .concat(esmCustomMainFieldResolverPlugin()),
}));

module.exports = {
  assets: ['./assets/fonts/'],
  commands,
};

and nothing's changed, I think problem inside react-native-asset-loader:

✘ [ERROR] [plugin react-native-asset-loader] ENOENT: no such file or directory, scandir '/home/i/all_work/thera/mobile-thera-app/src/components/common/InputArea/src/assets/icons'

[oblador]

Yeah, you need to switch out the asset loader too and add aliases option. That said, while it’s possible I’m not sure I want to support it officially as it’s not really standard and ideally would be solved by a separate plugin. Only reason i have it is because the alias plugin doesn’t seem to support RN assets.

[ghost]

Solution:

1. yarn add esbuild-plugin-alias

2. Update config:

const {
  createEsbuildCommands,
  esmCustomMainFieldResolverPlugin,
} = require('react-native-esbuild');
const alias = require('esbuild-plugin-alias');

const commands = createEsbuildCommands(({ plugins, ...rest }) => ({
  ...rest,
  plugins: [
    alias({
      // Full import => Full path
      'assets/images/archive.png': '/home/i/all_work/full_path/src/assets/images/archive.png',
      // ...
      'src/assets/premium/avatar_1.jpg': '/home/i/all_work/full_path/src/assets/premium/avatar_1.jpg',
      'src/assets/premium/avatar_2.jpg': '/home/i/all_work/full_path/src/assets/premium/avatar_2.jpg',
    }),
  ]
    .concat(plugins)
    .concat(esmCustomMainFieldResolverPlugin()),
}));

module.exports = {  commands };

Note: alist won't works for folder:

• ✘ 'src': '/home/i/all_work/full_path/src' // Bad
• ✔️ 'assets/images/archive.png': '/home/i/all_work/full_path/src/assets/images/archive.png', // Good

[luogao]

@oblador Is this means I need list all my assets file path => full path, in my alias config?