Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(compiler): don't mistake aliased paths for collections imports #5620

Merged
merged 1 commit into from Apr 4, 2024

Conversation

rwaskiewicz
Copy link
Member

@rwaskiewicz rwaskiewicz commented Apr 3, 2024

What is the current behavior?

See 'new behavior`
GitHub Issue Number: #2319

What is the new behavior?

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:

{
    paths: {
        "@utils/*": ["src/utils/*"]
    }
}

the import alias would be used as such:

// 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

Documentation

N/A

Does this introduce a breaking change?

  • Yes
  • No

Testing

Note: This requires a Windows machine

Clone the following repo: https://github.com/liamdebeasi/blank-stencil-repro/tree/windows-name-alias

Steps to reproduce:

  1. Make sure you are on the windows-name-alias branch
  2. Run npm install to install dependencies
  3. Run npm run build
  4. Run npm run start. Observe that the reported error appears.
  5. Run npm i @stencil/core@4.14.0-dev.1712175610.74a443e
  6. Run npm run build
  7. Run npm run start. Observe that the reported error no longer appears.

Other information

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
@rwaskiewicz rwaskiewicz force-pushed the rw/fix-win-builds-collections branch from 88168f2 to 7104b05 Compare April 3, 2024 21:27
@rwaskiewicz rwaskiewicz changed the title fix(build): don't mistake aliased paths for collections imports fix(compiles): don't mistake aliased paths for collections imports Apr 3, 2024
Copy link
Contributor

github-actions bot commented Apr 3, 2024

--strictNullChecks error report

Typechecking with --strictNullChecks resulted in 1138 errors on this branch.

That's the same number of errors on main, so at least we're not creating new ones!

reports and statistics

Our most error-prone files
Path Error Count
src/dev-server/index.ts 37
src/dev-server/server-process.ts 32
src/compiler/prerender/prerender-main.ts 22
src/testing/puppeteer/puppeteer-element.ts 21
src/runtime/client-hydrate.ts 20
src/screenshot/connector-base.ts 19
src/runtime/vdom/vdom-render.ts 17
src/dev-server/request-handler.ts 15
src/compiler/prerender/prerender-optimize.ts 14
src/compiler/sys/stencil-sys.ts 14
src/sys/node/node-sys.ts 14
src/compiler/prerender/prerender-queue.ts 13
src/compiler/sys/in-memory-fs.ts 13
src/runtime/connected-callback.ts 13
src/runtime/set-value.ts 13
src/compiler/output-targets/output-www.ts 12
src/compiler/transformers/test/parse-vdom.spec.ts 12
src/compiler/transformers/transform-utils.ts 12
src/compiler/transpile/transpile-module.ts 12
src/mock-doc/test/attribute.spec.ts 12
Our most common errors
Typescript Error Code Count
TS2322 361
TS2345 345
TS18048 204
TS18047 82
TS2722 37
TS2532 24
TS2531 21
TS2454 14
TS2790 11
TS2352 9
TS2769 8
TS2538 8
TS2416 7
TS2493 3
TS18046 2
TS2684 1
TS2430 1

Unused exports report

There are 14 unused exports on this PR. That's the same number of errors on main, so at least we're not creating new ones!

Unused exports
File Line Identifier
src/runtime/bootstrap-lazy.ts 21 setNonce
src/screenshot/screenshot-fs.ts 18 readScreenshotData
src/testing/testing-utils.ts 198 withSilentWarn
src/utils/index.ts 145 CUSTOM
src/utils/index.ts 269 normalize
src/utils/index.ts 7 escapeRegExpSpecialCharacters
src/compiler/app-core/app-data.ts 25 BUILD
src/compiler/app-core/app-data.ts 115 Env
src/compiler/app-core/app-data.ts 117 NAMESPACE
src/compiler/fs-watch/fs-watch-rebuild.ts 123 updateCacheFromRebuild
src/compiler/types/validate-primary-package-output-target.ts 61 satisfies
src/compiler/types/validate-primary-package-output-target.ts 61 Record
src/testing/puppeteer/puppeteer-declarations.ts 485 WaitForEventOptions
src/compiler/sys/fetch/write-fetch-success.ts 7 writeFetchSuccessSync

Copy link
Contributor

github-actions bot commented Apr 3, 2024

PR built and packed!

Download the tarball here: https://github.com/ionic-team/stencil/actions/runs/8545750046/artifacts/1382799134

If your browser saves files to ~/Downloads you can install it like so:

unzip -d ~/Downloads ~/Downloads/stencil-core-4.14.0-dev.1712179720.fab6fb8.tgz.zip && npm install ~/Downloads/stencil-core-4.14.0-dev.1712179720.fab6fb8.tgz

@rwaskiewicz rwaskiewicz changed the title fix(compiles): don't mistake aliased paths for collections imports fix(compiler): don't mistake aliased paths for collections imports Apr 3, 2024
@rwaskiewicz rwaskiewicz marked this pull request as ready for review April 3, 2024 21:31
@rwaskiewicz rwaskiewicz requested a review from a team as a code owner April 3, 2024 21:31
@rwaskiewicz rwaskiewicz added this pull request to the merge queue Apr 4, 2024
Merged via the queue into main with commit af22bb8 Apr 4, 2024
121 checks passed
@rwaskiewicz rwaskiewicz deleted the rw/fix-win-builds-collections branch April 4, 2024 11:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants