Skip to content

Commit

Permalink
fix(compiler): don't mistake aliased paths for collections imports
Browse files Browse the repository at this point in the history
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
  • Loading branch information
rwaskiewicz committed Apr 3, 2024
1 parent c1a9f20 commit 7104b05
Showing 1 changed file with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions src/compiler/transformers/collections/add-external-import.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { isString, parsePackageJson } from '@utils';
import { isString, normalizePath, parsePackageJson } from '@utils';
import { dirname } from 'path';

import type * as d from '../../../declarations';
Expand Down Expand Up @@ -38,7 +38,9 @@ export const addExternalImport = (
pkgJsonFilePath = realPkgJsonFilePath.path;
}

if (pkgJsonFilePath === config.packageJsonFilePath) {
// realpathSync may return a path that uses Windows path separators ('\').
// normalize it for the purposes of this comparison
if (normalizePath(pkgJsonFilePath) === config.packageJsonFilePath) {
// same package silly!
return;
}
Expand Down

0 comments on commit 7104b05

Please sign in to comment.