bug: dist-custom-elements with customElementsExportBehavior: "single-export-module" does not execute globalScript

[0m4r]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.16.0

Current Behavior

When configuring stencil using the following configuration, the code in the file set to globalScript is not executed. The outputTargets dist-custom-elements has set includeGlobalScripts: true

import { reactOutputTarget } from '@stencil/react-output-target';

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'stencil-library',
  sourceMap: true,
  globalScript: "./src/global.js",
  extras: {
    enableImportInjection: true,
  },
  outputTargets: [
    {
      type: "dist-custom-elements",
      generateTypeDeclarations: true,
      includeGlobalScripts: true,
      customElementsExportBehavior: "single-export-module",
      minify: false,
    },
    reactOutputTarget({
      componentCorePackage: "stencil-library/dist/",
      proxiesFile: "../react-library/lib/components/stencil-generated/index.ts",
      includeImportCustomElements: true,
      includeDefineCustomElements: undefined,
    }),
  ],
  testing: {
    browserHeadless: "new",
  },
};

Expected Behavior

when globalScript is properly set the outputTargets dist-custom-elements has set includeGlobalScripts: true the code specified in globalScript is executed (as documented here: The outputTargets dist-custom-elements has set includeGlobalScripts: true )

System Info

System: node 20.9.0
    Platform: darwin (23.3.0)
   CPU Model: Apple M2 Pro (12 cpus)
    Compiler: [REDACTED]/stencil-single-export-module/node_modules/@stencil/core/compiler/stencil.js
       Build: 1713191202
     Stencil: 4.16.0 🚛
  TypeScript: 5.4.5
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.30.3

Steps to Reproduce

The issue can be replicated with the code at this git repo: https://github.com/0m4r/stencil-single-export-module-global-script-bug

Once cloned:

• npm install
• from stencil-library: npm run build
• from react-library: npm run build
• from react-app: npm run dev
• open up the browser, check if the code in https://github.com/0m4r/stencil-single-export-module-global-script-bug/blob/main/packages/stencil-library/src/global.js is executed.

Code Reproduction URL

https://github.com/0m4r/stencil-single-export-module-global-script-bug

Additional Information

No response

[christian-bromann]

@0m4r thanks for raising the issue.

This is indeed a weird behavior which I believe has to be fixed in the stencil-ds-output-targets project. As far as I can see, Stencil correctly creates a main entry bundle in packages/stencil-library/dist/components/index.js that, when imported, would execute the global script for the components. From what I see the issue is within the React output target that imports the components directly and therefore ignores the global script from the main entry file.

I will ingest this into our backlog for the team to take a look at.

[0m4r]

is it possible to track the progress of the injected ticket? would you be able to share a timeline for it to be worked on and possibly resolved and released? It has quite an impact for the project I am working on and the more information I can collect the better.

Of course, I am also available for any other kind of help I can provide.

[christian-bromann]

Of course, I am also available for any other kind of help I can provide.

I can't give you any ETAs on when this will be resolved and released. If you like to take a stab at this we are happy to review changes and schedule them into our next release.

[0m4r]

I would love to, but I am afraid I do not have enough knowledge to contribute. I will see what I can do :) thanks for your reply!

[Loic57]

@0m4r I have exactly the same config that you but a totally different issue. Nothing related to your issue. But I would like to know if you could help me a bit?

I've checked my network tab in the browser console and I noticed that all my web components are loaded in angular whereas I only need one.

import { Component2 } from 'component-library';

I import only Component2 but in my network tab I can see component1, 3, 4, ... and it makes the page very heavy.

Do you have something similar or only the right component is called ?

[0m4r]

@ Loic57 this is offtopic here, but the behavior expected by this type of configuration, so it is working as expected. If you need a different behavior, refer to this for configure it differently: https://stenciljs.com/docs/angular#adding-the-angular-output-target