Run build with external dependencies option outputs broken js

[stiff gulch]

Hello!
I'm sorry ahead if this is not your area of responsibility, but vite's one. However, I noticed a strange behaviour with imports and found this MR that removes _hW export embedding. I assume that these things could be connected and lead to the following bug.

What I'm trying to do is to share dependencies via an external option in vite config. In my codebase there is an importmap script which specifies the urls to resolve qwik and other possible shared packages - https://github.com/sashkashishka/qwik-containers/blob/bug-external-dep/host/src/root.tsx#L25-L31.

When I build a prod bundle and run it via showcase command, this results in an error (see the screenshot). Thus, all the interactibity doesn't work at all.

But at the same time, when I'm not marking qwik as external dep, everything works fine. What I noticed in output files is the single qwik import definition without sharing, and two imports of qwik with sharing (see the video). Perhaps it is connected with this MR?

If this should be filed as a github issue, just let me know and I’ll carry it out and we will continue there

[tepid yew]

That PR wasn't merged but in V2 it is removed. Are you mixing Qwik versions?
(Btw what's MR?)

[stiff gulch]

No, the versions are the same - 1.14.1

[tepid yew]

Can you paste the errors? Video on phone isn't very useful

[stiff gulch]

here is the actual error (screenshot 1)
screenshots 2 and 3 - the build output of clientside interactivity code. you can notice two imports of qwik and then code doesn't use _hW alias, but use actual _hW (which is not a defined variable)

[tepid yew]

Ok that looks like a rollup problem. The two builds don't use the same renames. Perhaps with federation you can't use minification

[stiff gulch]

I’m not using module federation at all
This is an out of the box behaviour

The way I wanna share is to tell rollup to make some deps as external
Then use importmap script to point where to fetch such external deps

You can see with the host’s vite config (which is generated by create qwik cli command). It isn’t changed significantly (except external dependencies setting)

https://github.com/sashkashishka/qwik-containers/blob/bug-external-dep/host/vite.config.ts

[tepid yew]

Well the bundling isn't working correctly, but that had nothing to do with qwik.

That _hW import error, can you show what's in the file?

[stiff gulch]

here is an output file

[tepid yew]

The one with the issue is q-C3p...
But it really is a build problem that has nothing to do with qwik

[stiff gulch]

Sorry, I agree. The aforementioned file isn't relevant.
I have a reproduction with the bare create-qwik-app https://github.com/sashkashishka/qwik-external-dep

node v22
pnpm v10

1. clone
2. install deps pnpm i
3. run preview pnpm run preview

and try to click on the counter

what's been done:

• add importmap script to the head
• make @builder.io/qwik as an external dependecy in vite config

[stiff gulch]

yes, the problem was in the esbuild itself. they create a new alias for named import/export to avoid name shadowing in a module. and this is a feature, not a bug https://github.com/evanw/esbuild/issues/1027#issuecomment-803509189

the problem really occurs when qwik adds export { _hW } from '@builder.io/qwik'; to the files. it creates a situation when this _hW is actually used, but it is simply exported and not available in the module. Thus, esbuild doesn't know anything about the imported _hW variable and leaves usage of it as is (object in defineProperty remains unchanged and _hW doesn't receive a reference to the imported value).

On the next steps of transpilation, esbuild transforms the aforementioned statement into this:

import { _hW as _hW2 } from '@builder.io/qwik';

C = Object.freeze(
  Object.defineProperty(
    {
      __proto__: null,
      _hW, // this variable isn't declared anywhere
      s_XL7jPS8ihuM: M
    },
    Symbol.toStringTag,
    { value: 'Module' }
  ),
);

export { _hW2 as _hW}

Here is the plugin that looks up for export { _hW } from '@builder.io/qwik' statements alongside other imports of qwik and merges them. this way the esbuild transpiles everything correctly. Works for qwik v1.

https://github.com/sashkashishka/qwik-containers/blob/bug-external-dep/vite.qwik-export-import-merger.plugin.js

[twin dove]

I think this export is removed entirely in qwik v2 if you want to check that