alias plugin: relative import replacements not working properly

[TheDanielMoli]

Hi! We have the following folder structure:

• project_folder/src contains TypeScript source code
• project_folder/ts_config.json defines "baseUrl": "src" and paths "~/*": ["./*"]
• project_folder/rollup.config.mjs uses the following configuration:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import json from '@rollup/plugin-json';
import dts from 'rollup-plugin-dts';
import { terser } from 'rollup-plugin-terser';
import image from '@rollup/plugin-image';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import alias from '@rollup/plugin-alias';
import copy from 'rollup-plugin-copy';

plugins: [
      image(),
      json(),
      peerDepsExternal(),
      resolve(),
      commonjs(),
      typescript({ tsconfig: './tsconfig.json' }),
      terser(),
      alias({
        entries: {
          '~': path.resolve(projectRootDir, './src'),
        },
      }),
      copy({
        targets: [{ src: 'src/assets/fonts/*', dest: 'fonts' }],
      }),
      copy({
        targets: [{ src: 'src/assets/icons/*.svg', dest: ['dist/cjs/assets/icons', 'dist/esm/assets/icons'] }],
      }),
],

and

    plugins: [
      image(),
      alias({
        entries: {
          '~': path.resolve(projectRootDir, './src'),
        },
      }),
      dts(),
    ],

• project_folder/src/components contains all our TypeScript components

Each TypeScript component is exported from components/index.ts.

Now, where is the problem?

There seems to be a problem when a sibling file imports code from another sibling through an absolute import.

Given this folder structure:

src
  components
    Box
      Box.tsx
      index.ts
    FlexLayout
      FlexLayout.tsx
      index.ts

When importing for example Box from Box.tsx into FlexLayout.tsx via an absolute import import { BoxProps } from '~/components' will cause problems, while importing directly will not import { BoxProps } from '../Box'. We have no idea why. Also, we are able to both run the project and render the component, but rollup won't work.

This problem does not affect non-sibling file imports.

Any ideas?

[BeKnowDo]

any luck on this one?

[TheDanielMoli]

I removed aliases from the project. Didn't like them anyways.

This means that:

1. I removed @rollup/plugin-alias.
2. I removed aliases from tsconfig.
3. I removed aliases from my eslint configuration.
4. I udpdated all imports to not use ~.