Undefined imports in production build with shared components

[cuiqui]

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.

[patak-cat]

As a workaround to this issue, you can use

  import { faMinusCircle } from "@fortawesome/free-solid-svg-icons";
  import { faPlusCircle } from "@fortawesome/free-solid-svg-icons";

instead of

  import { faMinusCircle } from "@fortawesome/free-solid-svg-icons/faMinusCircle";
  import { faPlusCircle } from "@fortawesome/free-solid-svg-icons/faPlusCircle";

[patak-cat]

@cuiqui it would be useful that you try to create a reproduction only using vanilla, so it is easier for others to check out.

[cuiqui]

Thanks for the reply @patak-js, I ended up building the icon library instead of importing an icon in each component:

import { library } from "@fortawesome/fontawesome-svg-core";
import { faMinusCircle, faPlusCircle } from "@fortawesome/free-solid-svg-icons";

library.add(faMinusCircle, faPlusCircle);

Which in essence is your workaround. I'll try to make some time to create a vanilla reproduction, but I'm sorry I can't promise anything right now.

[bluwy]

This still seems to happen in Vite 2.8.6

[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?

[pietrofxq]

Also facing the same problem with vite 3.0.9. Trying to import a class with static members from a private shared package, import is undefined in production build.

[pietrofxq]

I have code similar to this:

import {Session} from '@company/helpers'

export const mockUser = () => {
  Session.createEmptySession()
}

Session class:

export class Session {
  static createEmptySession() {
     //...
  }
}

I found a weird workaround: adding console.log(Session) in the file fixes it. So it looks like a tree shaking problem

[awebartisan]

Facing this problem with Shopify Polaris library and Vite.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

import { Provider } from '@shopify/app-bridge-react';

Provider component gets undefined in the production build.

[zbigniewstefaniuk]

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

EDIT: here is reproduction code https://github.com/zbigniewstefaniuk/vite-lib-on-build-resolving-issue
I've just scaffolded new project using yarn create vite with vue + typescirpt template, only installed this package @mediapipe/selfie_segmentation' and on dev server it's working however, prod import is undefined. Values are printed to the console as well as printed to the screen in <template />