Build fails when imported npm packages use browser section in package.json (Windows only)
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 38/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- typescript
- Domain
- build-system, tooling
Research direction
Reproduce the Windows-only failure with @amcharts/amcharts4 and inspect the builtin nodeResolver in ./node_modules/@stencil/core/compiler, focusing on browserMapCache lookup and path normalization. Verify the behavior against the provided my-component.tsx import, then confirm that the Stencil build completes without the Node Polyfills Required error on Windows.
Written by the indexing model from the issue text.
Description
Stencil version:
@stencil/core@2.6.0
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:
Build fails in Windows when you import a package that uses browser section in its package.json. The build fails with messages like:
[ ERROR ] Node Polyfills Required
For the import "crypto" to be bundled from crypto?commonjs-external, ensure the
"rollup-plugin-node-polyfills" plugin is installed and added to the stencil config plugins (client). Please
see the bundling docs for more information. Further information: https://stenciljs.com/docs/module-bundling
Expected behavior:
Builds success with no error messages.
Steps to reproduce:
Only in Windows (osx or linux works):
- Create a new component project with
npm init stencil. - Execute
npm install - Execute
npm install @amcharts/amcharts4 - Modify "src/components/my-component/my-component.tsx" (see "Related code").
- Execute npm run start.
Related code:
src/components/my-component/my-component.tsx
import { Component, Prop, h } from '@stencil/core';
import { format } from '../../utils/utils';
import * as am4core from "@amcharts/amcharts4/core";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
am4core.useTheme(am4themes_animated);
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true,
})
export class MyComponent {
/**
* The first name
*/
@Prop() first: string;
/**
* The middle name
*/
@Prop() middle: string;
/**
* The last name
*/
@Prop() last: string;
private getText(): string {
return format(this.first, this.middle, this.last);
}
render() {
return <div>Hello, World! I'm {this.getText()}</div>;
}
}
Other information:
I've been debugging the source code ./node_modules/@stencil/core/compiler and I think the problem is in the browserMapCache of the builtin nodeResolver plugin.
You're inserting the importer in the cache with normalized backslash ("/") but when you are getting the brower for an importer (from the browserMapCache ), you're using the Windows backslash:
...
const browser = browserMapCache.get(importer); // <- importer is not normalized
if (useBrowserOverrides && browser) {
...
If you normalize importer:
...
const browser = browserMapCache.get(normalizePath$1(importer));
if (useBrowserOverrides && browser) {
...
The build works as expected.
Linux/osx works because the backslash is the normalized one.
Thanks
- Dominant language
- TypeScript
- Stars
- 13.1k
- Forks
- 855
- Avg merge
- 4h 7m
- Merged PRs (30d)
- 44
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from stenciljs/core
-
Stencil v5
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
Stencil v5
Difficulty 4/5 3-5 days Newbie friendliness 55/100
-
Bug: Validated Stencil v5
Difficulty 4/5 3-5 days Newbie friendliness 48/100
-
Feature: Want this? Upvote it!
Difficulty 5/5 Over a week Newbie friendliness 25/100
-
Feature: Want this? Upvote it!
Difficulty 4/5 3-5 days Newbie friendliness 48/100
Similar issues
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 76/100
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
langchain-ai/deepagents#6450 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
vercel/react-tweet#225 ·