Undefined imports in production build with shared components #4083
Description
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.8Used 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.