WINDOWS path aliases cause: [ ERROR ] Component Tag Name "my-component" Must Be Unique #2319
Comments
|
Some additional information. A guy on Slack attempted to reproduce the problem on his macOS computer but was unable to. So this might be a Windows specific bug. |
|
After further investigation, I was able to track down the cause of the problem. Stencil seems to be handling path aliases incorrectly. in v1.9 my project required a devDependency for "rollup-plugin-typescript-paths" because in my stencil.config file I had to use: In v1.10 and v1.11 this code would not even compile. On Slack I was told to remove this since typescriptPaths is now handled under the hood by Stencil. So to replicate the problem with a fresh stencil project do the following. npm init stencil edit the package.json file to use stencil v1.11.2 update my-component.tsx to have an aliased path to utils: edit the tsconfig.json file by adding: edit the stencil.config.ts to also include: lastly add an index.ts file into the src/utils directory. This file should contain: Now run: I get the error : |
mmakrzem
changed the title
|
Can you share your |
|
@manucorporat you can see the tsconfig.json file along with all the source code in my github https://github.com/mmakrzem/stencil1-11-error/blob/master/tsconfig.json |
|
@manucorporat This is what the tsconfig.json file looks like after modifying the fresh Stencil project |
|
an additional piece of information. It seems like executing npm run test is what causing things to go bad. I can start fresh, do npm run start multiple times with no problems. But as soon as I run npm run test, something changes and I can no longer run npm run start, nor can I run npm run test a second time without getting that error about component tag name must be unique. |
|
Still a problem with Stencil v1.14.0 |
|
Still a problem with Stencil v1.17.2 on Windows If I remove MacOS and Linux build process runs perfectly. |
mmakrzem
changed the title
|
Seeing this issue as well on one of our interns machines that is a Windows OS. Even with adding |
|
A little bump on this since I've just encounter the issue when trying to configure path aliases on a Windows 10 environment 😄 |
|
Is there any update on this? |
|
Also encounter this error today on Windows, issue was related to an import path. |
This works! |
This is the reason why one of our component repositories started to fail. I believe the reason for the project relative import was due to me using code actions such as alt+enter to add the imports when authoring the code in VSCode. This worked fine for months on my mac and on the build servers until a developer using a Windows box tried to build the repo. Searching through the repo for |
rwaskiewicz
added
Resolution: Needs Investigation
|
I had the same problem on OS X today. Could resolve it by replacing all absolute imports with relative ones in my project: Instead of: import { getClassNames } from 'src/lib/utils/getClassNames'I now use: import { getClassNames } from '../../utils/getClassNames'This seams to fix an issue where all of a sudden modules get imported from a wrong location, presumably the src folder. |
|
Here is a reproduction of the issue using the latest version of Stencil: https://github.com/liamdebeasi/blank-stencil-repro/tree/windows-name-alias Steps to reproduce:
|
this commit fixes an issue where stencil builds that followed a
successful build would result in the following error:
```
[ ERROR ] Component Tag Name "my-component" Must Be Unique
Please update the components so "my-component" is only used once:
./src/components/my-component/my-component.tsx ./dist/collection/components/my-component/my-component.js
```
this issue manifested on windows machines when building the ionic
framework after a successful build. we were able reproduce this with a
minimal stencil-component-starter that included the following in its
`tsconfig.json`:
```json
{
paths: {
"@utils/*": ["src/utils/*"]
}
}
```
the import alias would be used as such:
```ts
// src/utils/helpers.ts
export const foo = () => console.log('hello');
// src/utils/other-file.ts
import { foo } from '@utils/helpers';
export const bar = () => { foo(); }
```
where in the example above, `helpers.ts` is imported by `other-file.ts`,
and resolved via the `@utils/*` path alias. note that neither of these
files needed to be imported into a stencil component in order for the
error to be replicated - they just need to sit in the `src` directory of
the project.
the reason the project would fail to compile is that the first build
would create a `dist/collections` directory, as the `dist` output target
would synthetically inject (automatically decide the project should
also have) the collections output target in its output. on the second
compilation, stencil would attempt to reconcile `@utils/helpers` as a
collections output, and inadvertantly pull in `dist/collections/*` into
the build context. this caused previously compiled versions of any
components to be recommpiled.
when stencil tried to check for html tag uniqueness, it would detect
multiples components with the same tag, with the previously mentioned
error:
```
[ ERROR ] Component Tag Name "my-component" Must Be Unique
Please update the components so "my-component" is only used once:
./src/components/my-component/my-component.tsx ./dist/collection/components/my-component/my-component.js
```
Fixes: #2319
STENCIL-1252
this commit fixes an issue where stencil builds that followed a
successful build would result in the following error:
```
[ ERROR ] Component Tag Name "my-component" Must Be Unique
Please update the components so "my-component" is only used once:
./src/components/my-component/my-component.tsx ./dist/collection/components/my-component/my-component.js
```
this issue manifested on windows machines when building the ionic
framework after a successful build. we were able reproduce this with a
minimal stencil-component-starter that included the following in its
`tsconfig.json`:
```json
{
paths: {
"@utils/*": ["src/utils/*"]
}
}
```
the import alias would be used as such:
```ts
// src/utils/helpers.ts
export const foo = () => console.log('hello');
// src/utils/other-file.ts
import { foo } from '@utils/helpers';
export const bar = () => { foo(); }
```
where in the example above, `helpers.ts` is imported by `other-file.ts`,
and resolved via the `@utils/*` path alias. note that neither of these
files needed to be imported into a stencil component in order for the
error to be replicated - they just need to sit in the `src` directory of
the project.
the reason the project would fail to compile is that the first build
would create a `dist/collections` directory, as the `dist` output target
would synthetically inject (automatically decide the project should
also have) the collections output target in its output. on the second
compilation, stencil would attempt to reconcile `@utils/helpers` as a
collections output, and inadvertantly pull in `dist/collections/*` into
the build context. this caused previously compiled versions of any
components to be recommpiled.
when stencil tried to check for html tag uniqueness, it would detect
multiples components with the same tag, with the previously mentioned
error:
```
[ ERROR ] Component Tag Name "my-component" Must Be Unique
Please update the components so "my-component" is only used once:
./src/components/my-component/my-component.tsx ./dist/collection/components/my-component/my-component.js
```
Fixes: #2319
STENCIL-1252
…5620) this commit fixes an issue where stencil builds that followed a successful build would result in the following error: ``` [ ERROR ] Component Tag Name "my-component" Must Be Unique Please update the components so "my-component" is only used once: ./src/components/my-component/my-component.tsx ./dist/collection/components/my-component/my-component.js ``` this issue manifested on windows machines when building the ionic framework after a successful build. we were able reproduce this with a minimal stencil-component-starter that included the following in its `tsconfig.json`: ```json { paths: { "@utils/*": ["src/utils/*"] } } ``` the import alias would be used as such: ```ts // src/utils/helpers.ts export const foo = () => console.log('hello'); // src/utils/other-file.ts import { foo } from '@utils/helpers'; export const bar = () => { foo(); } ``` where in the example above, `helpers.ts` is imported by `other-file.ts`, and resolved via the `@utils/*` path alias. note that neither of these files needed to be imported into a stencil component in order for the error to be replicated - they just need to sit in the `src` directory of the project. the reason the project would fail to compile is that the first build would create a `dist/collections` directory, as the `dist` output target would synthetically inject (automatically decide the project should also have) the collections output target in its output. on the second compilation, stencil would attempt to reconcile `@utils/helpers` as a collections output, and inadvertantly pull in `dist/collections/*` into the build context. this caused previously compiled versions of any components to be recommpiled. when stencil tried to check for html tag uniqueness, it would detect multiples components with the same tag, with the previously mentioned error: ``` [ ERROR ] Component Tag Name "my-component" Must Be Unique Please update the components so "my-component" is only used once: ./src/components/my-component/my-component.tsx ./dist/collection/components/my-component/my-component.js ``` Fixes: #2319 STENCIL-1252
rwaskiewicz
added
Bug: Validated
|
The fix for this issue has been released as a part of today's Stencil v4.14.1 release. I'm going to close this issue as a result. If you're still running into this issue after upgrading to v4.14.1, please feel free to open a new issue. Thanks! |
Stencil version:
I'm submitting a:
[X ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/
Current behavior:
I am seeing the error:
[ ERROR ] Component Tag Name "my-component" Must Be Unique
This error has started showing up since updated my code from stencil v1.9.2. I tried v1.10.0, v.1.10.1, v1.10.2, v1.10.3, v.1.11.0, v1.11.1, v1.11.2 All versions after 1.9 seem to exhibit the same problem.
I have taken the starter project from stencil and updated it to contain one alias pointing to the utils directory. I also created a second component in the sample project. Now I'm able to see this error message in the starter project.
I am running this on Windows 10.
Expected behavior:
Expecting no error so that I'm able to run the code
Steps to reproduce:
grab the source code from here: https://github.com/mmakrzem/stencil1-11-error
execute the following commands in order
run npm install
npm run start //it runs fine
npm run test //it runs fine
npm run start //now getting an error messages
Here is my Windows console output:
The text was updated successfully, but these errors were encountered: