How to import components with the same name but different path?

Question

I'm have the following code and so far so good:

import { Route } from '@vaadin/router';
import './views/object/list-view';
import './main-layout.ts';

export type ViewRoute = Route & {
  title?: string;
  children?: ViewRoute[];
};

export const views: ViewRoute[] = [
  {
    path: 'object',
    component: 'list-view',
    title: 'Objects',
  },
  {
    path: 'dashboard',
    component: 'dashboard-view',
    title: 'Dashboard',
    action: async () => {
      await import('./views/dashboard/dashboard-view');
    },
  },
];

export const routes: ViewRoute[] = [
  {
    path: '',
    component: 'main-layout',
    children: views,
  },
];

But when add the additional import './views/object2/list-view'; as below, it doesn't work:

import { Route } from '@vaadin/router';
import './views/object/list-view';
import './views/object2/list-view';
import './main-layout.ts';

export type ViewRoute = Route & {
  title?: string;
  children?: ViewRoute[];
};

export const views: ViewRoute[] = [
  {
    path: 'object',
    component: 'list-view',
    title: 'Object',
  },
  {
    path: 'object2',
    component: 'list-view',
    title: 'Object2',
  },
  {
    path: 'dashboard',
    component: 'dashboard-view',
    title: 'Dashboard',
    action: async () => {
      await import('./views/dashboard/dashboard-view');
    },
  },
];

export const routes: ViewRoute[] = [
  {
    path: '',
    component: 'main-layout',
    children: views,
  },
];

I assume it doesn't work because the name of the component imported. Is there a way to clarify the difference in this file without changing the names of the components?

I tried this:

component: './views/object2/list-view'

but it still doesn't work.

Answer 1

You haven't explained what exactly "doesn't work" so you are forcing me to guess. There is nothing illegal or conflicting about importing from two files with the same filename. What matters are the names of the exported items in each file that you want to import.

three of your import statements do not actually import any exports

Of your four import statements, only the first one imports an exported item, Route. The other three are "side-effect imports" only.

import { Route } from '@vaadin/router';
import './views/object/list-view';
import './views/object2/list-view';
import './main-layout.ts';

if your intention was to import everything from each file

import * as list-view from './views/object/list-view';
import * as list-view2 from './views/object2/list-view';
import * as main-layout from './main-layout.ts';

This imports the entire module into a single variable. You can then reference all the individual exports through that variable, e.g. list-view.model and list-view.item. As with any variable, make sure they have unique names.

to import individual exports that have the same name

import {list-object} from './views/object/list-view';
import {list-object as list-object2} from './views/object2/list-view';

This imports only the list-object export from each list-view file, and it renames the second one to list-object2 to give it a unique name within this file.

to import the default export with unique names:

Say both your list-view imports have a default export and that is all you want to import. This is how you import the default export:

import list-view from './views/object/list-view'
import list-view2 from './views/object2/list-view'

You can assign any name to the default export (they are not exported with any name). Just make them unique.

Answer 2

I did it with @customElement('object-list-view') on the list-view components @customElement('object2-list-view')

with this notation I can clarify the difference between components

now I can use

{
    path: 'object',
    component: 'object-list-view',
    title: 'Object',
  },

{
    path: 'object2',
    component: 'object2-list-view',
    title: 'Object2',
  }

Thanks a lot for the help with this.