-1

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
yeferson cordoba
  • 41
  • 8
  • You haven't explained what exactly "doesn't work". There is nothing illegal about importing from two files with the same filename. Tell us what is actually broken and then we can help you. I suggest you explain this just before the sentence "I assume it doesn't work because..." – Inigo Dec 18 '21 at 14:11
  • Name collision from imports can be solved. https://stackoverflow.com/questions/39610294/import-two-exported-classes-with-the-same-name https://stackoverflow.com/questions/40675222/name-collision-by-module-import-in-angular-2-is-there-a-way-to-prevent-it – Avec Dec 18 '21 at 14:15
  • @Inigo With this file I am creating the routes and rendering the components, since the components have the same name the routes are not working. – yeferson cordoba Dec 18 '21 at 14:19
  • @Avec will try this alias option and let you know – yeferson cordoba Dec 18 '21 at 14:20
  • The alias option will work only if you are importing individual items from each file. But you have not told us what you are trying to import (that is my question above). Because you have not told us, I was forced to guess in my answer below. In the future please be more specific. – Inigo Dec 18 '21 at 14:22
  • 1
    @halfer agreed. It was months ago but I'm guessing I couldn't resist the opportunity to use it as a teaching moment, this being such a male dominated field and the feedback loops that reinforce that. My answer is very technical :) – Inigo Apr 10 '22 at 16:22

2 Answers2

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.

Inigo
  • 12,186
  • 5
  • 41
  • 70
-1

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.

yeferson cordoba
  • 41
  • 8
  • The problem is, you have not explained exactly what wasn't working in your question, and now in your answer, it isn't clear how and what you actually fixed, so that this question and answer is unlikely to help other people in the future, which is the purpose of [so]. – Inigo Dec 18 '21 at 14:39
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 18 '21 at 14:57