Build fails when imported npm packages use browser section in package.json (Windows only)

Open
#2,931 2 comments 0 reactions 0 assignees View on GitHub

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

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

Bug: Validated Has Workaround

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):

  1. Create a new component project with npm init stencil.
  2. Execute npm install
  3. Execute npm install @amcharts/amcharts4
  4. Modify "src/components/my-component/my-component.tsx" (see "Related code").
  5. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from stenciljs/core

All issues in stenciljs/core

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.