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

[melenudo]

Stencil version:

 @stencil/[email protected]

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

[melenudo]

I've realized that the builtin nodeResolve of Stencil is bundled from Rollup and then the problem is with the version you're using in Stencil. If I install the last nodeResolve version and configure Stencil to use the plugin before the builtin one:

import { Config } from '@stencil/core';
import {nodeResolve} from '@rollup/plugin-node-resolve';

export const config: Config = {
  namespace: 'mycomps',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements-bundle',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
  rollupPlugins: {
    before: [nodeResolve({browser: true})],
  }
};

The build works as expected. The last version, when I've done the test, that works is:

    "@rollup/plugin-node-resolve": "^13.0.0",

Have you planned to update the builtin nodeResolve plugin?

Thank you very much!!

[rwaskiewicz]

Thanks for this! I've got a preliminary idea as to fix this based on your suggestions. I'm gonna label this so it gets ingested into our internal issue tracker to be scheduled to get worked on.