Undefined imports in production build with shared components

Describe the bug

When building for production, several pages import from FontAwesome (import { faXXX } from '@fortawesome/sub/faXXX.js'). Some of those imports are shared between a lot of components. These shared imports in dist/assets are seen, after running npm run build, as a separate chunk of the form faXXX.hash.js, apparently empty. Example from the repo to reproduce issue:

$ cat faPlusCircle.ef7d87a6.js
var faPlusCircle = {};
export { faPlusCircle as f };
//# sourceMappingURL=faPlusCircle.ef7d87a6.js.map

Which produces following error in some pages:

Uncaught (in promise) TypeError: Cannot read property 'icon' of undefined
    at Object.$$self.$$.update (FaIcon.svelte:8)
    at init$1 (index.mjs:1671)
    at new FaIcon (FaIcon.svelte:12)
    at create_fragment (two.e78d4eea.js:8)
    at init$1 (index.mjs:1675)
    at new Two (two.svelte:8)
    at Array.create_default_slot (Route.svelte:114)
    at create_slot (index.mjs:61)
    at create_fragment$3 (index.js:174)
    at init$1 (index.mjs:1675)

Pages in which it does not result in error are those that concatenated the import code in its chunk as such:

import { f as faMinusCircle } from "./faMinusCircle.3d152943.js";
import { F as FaIcon } from "./FaIcon.2537ee2b.js";
(function(exports) {
  Object.defineProperty(exports, "__esModule", { value: true });
  var prefix = "fas";
  var iconName = "minus-circle";
  var width = 512;
  var height = 512;
  var ligatures = [];
  var unicode = "f056";
  var svgPathData = "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z";
  exports.definition = {
    prefix,
    iconName,
    icon: [
      width,
      height,
      ligatures,
      unicode,
      svgPathData
    ]
  };
  exports.faMinusCircle = exports.definition;
  exports.prefix = prefix;
  exports.iconName = iconName;
  exports.width = width;
  exports.height = height;
  exports.ligatures = ligatures;
  exports.unicode = unicode;
  exports.svgPathData = svgPathData;
})(faMinusCircle);

More information: https://github.com/cuiqui/vite-issue-repo#weird-bundling

Reproduction

https://github.com/cuiqui/vite-issue-repo

System Info

System:
    OS: Linux 4.15 Ubuntu 18.04.5 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i5-4300M CPU @ 2.60GHz
    Memory: 160.38 MB / 11.43 GB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 14.16.0 - /usr/bin/node
    npm: 6.14.11 - /usr/bin/npm
  Browsers:
    Chrome: 89.0.4389.114
    Firefox: 87.0
  npmPackages:
    vite: ^2.3.8 => 2.3.8

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[edisdev]

Hi ✋🏻 I have a the same problem.

import { DeviceUUID } from 'device-uuid'

DeviceUUID is undefined for after build. How can i solve this issue?

[zbigniewstefaniuk]

same issue with import { SelfieSegmentation, Results } from '@mediapipe/selfie_segmentation'; after build it’s undefined, on dev server it’s working perfectly fine