[BUG] Fluent UI v8.x import error with latest Snowpack

[alinflorin]

Bug Report Quick Checklist

• I am on the latest version of Snowpack & all plugins.
• I use package manager npm.
• I run Snowpack on OS Windows 10
• I run Snowpack on Node.js v12+

Describe the bug

When creating a simple, blank Fluent UI app, using the latest Fluent version (8.x), the development build works just fine, but, at runtime, we get the following error:
Unhandled Runtime Error Uncaught SyntaxError: The requested module '/_snowpack/pkg/@fluentui.date-time-utilities.lib.dateMath.dateMath.v8.0.2.js' does not provide an export named 'BaseExtendedPeoplePicker'

Everything is working fine on Snowpack 3.0.11.
The People Picker component doesn't have to be used at all in the code.

Thank you.

[joelspadin]

I'm getting the same error even with snowpack dev. Did you ever find a way to fix this?

[joelspadin]

The output of snowpack build seems to be fine, but snowpack dev generates broken code. I'm seeing this line in @fluentui.react.v8.18.0.js:

export { BaseExtendedPeoplePicker, BaseExtendedPicker, BaseFloatingPeoplePicker, BaseFloatingPicker, BasePeoplePicker, BasePeopleSelectedItemsList, BasePicker, BasePickerListBelow, BaseSelectedItemsList, BaseSlots, CheckboxVisibility, CollapseAllVisibility, ColorPickerGridCell, ColorPickerGridCellBase, ColumnActionsMode, ColumnDragEndLocation, CompactPeoplePicker, CompactPeoplePickerBase, ConstrainMode, DATAKTP_ARIA_TARGET, DATAKTP_EXECUTE_TARGET, DATAKTP_TARGET, DEFAULT_CELL_STYLE_PROPS, DEFAULT_MASK_CHAR, DEFAULT_ROW_HEIGHTS, DetailsColumnBase, DetailsHeader, DetailsHeaderBase, DetailsList, DetailsListBase, DetailsListLayoutMode, DetailsRow, DetailsRowBase, DetailsRowCheck, DetailsRowFields, DetailsRowGlobalClassNames, Dialog, DialogBase, DialogContent, DialogContentBase, DialogFooter, DialogFooterBase, DialogType, DocumentCard, DocumentCardActions, DocumentCardActivity, DocumentCardDetails, DocumentCardImage, DocumentCardLocation, DocumentCardLogo, DocumentCardPreview, DocumentCardStatus, DocumentCardTitle, DocumentCardType, DragDropHelper, Dropdown, DropdownBase, DropdownMenuItemType, ExpandingCard, ExpandingCardBase, ExpandingCardMode, ExtendedPeoplePicker, ExtendedSelectedItem, Fabric, FabricBase, FabricSlots, Facepile, FacepileBase, FloatingPeoplePicker, FocusTrapZone, FontIcon, GroupFooter, GroupHeader, GroupShowAll, GroupSpacer, GroupedList, GroupedListBase, GroupedListSection, HoverCard, HoverCardBase, HoverCardType, Icon, IconBase, IconType, Image, ImageBase, ImageCoverStyle, ImageFit, ImageIcon, ImageLoadState, KTP_ARIA_SEPARATOR, KTP_FULL_PREFIX, KTP_LAYER_ID, KTP_PREFIX, KTP_SEPARATOR, KeyboardSpinDirection, Keytip, KeytipData, KeytipEvents, KeytipLayer, KeytipLayerBase, KeytipManager, Label, LabelBase, Layer, LayerBase, LayerHost, Link, LinkBase, List, ListPeoplePicker, ListPeoplePickerBase, MarqueeSelection, MaskedTextField, MeasuredContext, MemberListPeoplePicker, MessageBar, MessageBarBase, MessageBarType, Modal, ModalBase, Nav, NavBase, NormalPeoplePicker, NormalPeoplePickerBase, OpenCardMode, OverflowButtonType, OverflowSet, OverflowSetBase, Overlay, OverlayBase, Panel, PanelBase, PanelType, PeoplePickerItem, PeoplePickerItemBase, PeoplePickerItemSuggestion, PeoplePickerItemSuggestionBase, Persona, PersonaBase, PersonaCoin, PersonaCoinBase, PersonaInitialsColor, PersonaPresence, PersonaSize, Pivot, PivotBase, PivotItem, PivotLinkFormat, PivotLinkSize, PlainCard, PlainCardBase, Popup, Position, PositioningContainer, ProgressIndicator, ProgressIndicatorBase, Rating, RatingBase, RatingSize, RectangleEdge, ResizeGroup, ResizeGroupBase, ResizeGroupDirection, ResponsiveMode, SELECTION_CHANGE, ScrollToMode, ScrollablePane, ScrollablePaneBase, ScrollablePaneContext, ScrollbarVisibility, SearchBox, SearchBoxBase, SelectAllVisibility, SelectableOptionMenuItemType, SelectedPeopleList, Selection, SelectionDirection, SelectionMode, SelectionZone, SemanticColorSlots, Separator, SeparatorBase, Shimmer, ShimmerBase, ShimmerCircle, ShimmerCircleBase, ShimmerElementType, ShimmerElementsDefaultHeights, ShimmerElementsGroup, ShimmerElementsGroupBase, ShimmerGap, ShimmerGapBase, ShimmerLine, ShimmerLineBase, ShimmeredDetailsList, ShimmeredDetailsListBase, Slider, SliderBase, SpinButton, Spinner, SpinnerBase, SpinnerSize, SpinnerType, Stack, StackItem, Sticky, StickyPositionType, SuggestionActionType, SuggestionItemType, Suggestions, SuggestionsControl, SuggestionsController, SuggestionsCore, SuggestionsHeaderFooterItem, SuggestionsItem, SuggestionsStore, SwatchColorPicker, SwatchColorPickerBase, TagItem, TagItemBase, TagItemSuggestion, TagItemSuggestionBase, TagPicker, TagPickerBase, TeachingBubble, TeachingBubbleBase, TeachingBubbleContent, TeachingBubbleContentBase, Text, TextField, TextFieldBase, TextStyles, TextView, ThemeContext, ThemeGenerator, ThemeProvider, Toggle, ToggleBase, Tooltip, TooltipBase, TooltipDelay, TooltipHost, TooltipHostBase, TooltipOverflowMode, ValidationState, VerticalDivider, WeeklyDayPicker, buildColumns, buildKeytipConfigMap, constructKeytip, createGenericItem, createItem, defaultWeeklyDayPickerNavigationIcons, defaultWeeklyDayPickerStrings, getAllSelectedOptions, getAriaDescribedBy, getBoundsFromTargetWindow, getDetailsRowStyles, getFontIcon, getIconContent, getInitialResponsiveMode, getMaxHeight, getMeasurementCache, getNextResizeGroupStateProvider, getOppositeEdge, getPersonaInitialsColor, getResponsiveMode, initializeResponsiveMode, isRelativeUrl, ktpTargetFromId, ktpTargetFromSequences, makeStyles, mergeOverflows, personaPresenceSize, personaSize, positionCallout, positionCard, positionElement, presenceBoolean, sequencesToID, setResponsiveMode, sizeBoolean, sizeToPixels, themeRulesStandardCreator, transitionKeysAreEqual, transitionKeysContain, useHeightOffset, useKeytipRef, useResponsiveMode, useTheme, withResponsiveMode } from '/_snowpack/pkg/@fluentui.date-time-utilities.lib.dateMath.dateMath.v8.1.2.js';

@fluentui/date-time-utilities/lib/dateMath.js only exports these functions though: https://docs.microsoft.com/en-us/javascript/api/date-time-utilities?view=office-ui-fabric-react-latest

It sort of looks like Snowpack intended to import a bunch of things from various modules but then decided to import them all from dateMath.js instead.

[joelspadin]

I ran snowpack dev --reload --verbose and it spit out a few errors that seem relevant. It seems to be treating https://github.com/microsoft/fluentui/tree/master/packages/date-time-utilities as regular scripts instead of a module?

[19:56:59] [esinstall:@fluentui/date-time-utilities] C:\Users\Joel\source\repos\zmk-config-builder
[19:56:59] [esinstall:@fluentui/date-time-utilities] running installer with options: {"input":{"@fluentui/date-time-utilities":"C:\\Users\\Joel\\source\\repos\\zmk-config-builder\\node_modules\\@fluentui\\date-time-utilities\\lib\\index.js"},"treeshake":{"moduleSideEffects":true},"plugins":[{"name":"alias"},{"name":"snowpack:fetch-handler"},{"name":"node-resolve"},{"name":"json"},{"name":"snowpack:rollup-plugin-css"},{"name":"replace"},{"name":"commonjs"},{"name":"snowpack:wrap-install-targets"},{"name":"snowpack:rollup-plugin-node-process-polyfill"},{"name":"esinstall:snowpack"},{"name":"snowpack:rollup-plugin-catch-unresolved"},{"name":"snowpack:rollup-plugin-strip-source-mapping"}]}
[19:56:59] [esinstall:@fluentui/date-time-utilities] cjsAutoDetectExportsStatic C:\Users\Joel\source\repos\zmk-config-builder\node_modules\@fluentui\date-time-utilities\lib\index.js: Unexpected export statement in CJS module.
  at @:1:8
[19:56:59] [esinstall:@fluentui/date-time-utilities] cjsAutoDetectExportsRuntime error C:/Users/Joel/source/repos/zmk-config-builder/node_modules/@fluentui/date-time-utilities/lib/index.js: Command failed with exit code 1: node -p JSON.stringify(Object.keys(require('C:/Users/Joel/source/repos/zmk-config-builder/node_modules/@fluentui/date-time-utilities/lib/index.js')))
C:\Users\Joel\source\repos\zmk-config-builder\node_modules\@fluentui\date-time-utilities\lib\index.js:1
export * from './dateMath/dateMath';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:353:18)
    at wrapSafe (node:internal/modules/cjs/loader:1039:15)
    at Module._compile (node:internal/modules/cjs/loader:1073:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at [eval]:1:28
    at Script.runInThisContext (node:vm:129:12)
[19:56:59] [esinstall:@fluentui/date-time-utilities] cjsAutoDetectExportsRuntimeUntrusted error C:/Users/Joel/source/repos/zmk-config-builder/node_modules/@fluentui/date-time-utilities/lib/index.js: Unexpected token 'export'

[19:56:59] [esinstall] C:\Users\Joel\source\repos\zmk-config-builder
[19:56:59] [esinstall] running installer with options: {"input":{"@fluentui/date-time-utilities":"C:\\Users\\Joel\\source\\repos\\zmk-config-builder\\node_modules\\@fluentui\\date-time-utilities\\lib\\index.js","@fluentui/date-time-utilities/lib/dateMath/dateMath":"C:\\Users\\Joel\\source\\repos\\zmk-config-builder\\node_modules\\@fluentui\\date-time-utilities\\lib\\dateMath\\dateMath.js"},"treeshake":{"moduleSideEffects":true},"plugins":[{"name":"alias"},{"name":"snowpack:fetch-handler"},{"name":"node-resolve"},{"name":"json"},{"name":"snowpack:rollup-plugin-css"},{"name":"replace"},{"name":"commonjs"},{"name":"snowpack:wrap-install-targets"},{"name":"snowpack:rollup-plugin-node-process-polyfill"},{"name":"esinstall:snowpack"},{"name":"snowpack:rollup-plugin-catch-unresolved"},{"name":"snowpack:rollup-plugin-strip-source-mapping"}]}
[19:56:59] [esinstall] cjsAutoDetectExportsStatic C:\Users\Joel\source\repos\zmk-config-builder\node_modules\@fluentui\date-time-utilities\lib\index.js: Unexpected export statement in CJS module.
  at @:1:8
[19:56:59] [esinstall] cjsAutoDetectExportsRuntime error C:/Users/Joel/source/repos/zmk-config-builder/node_modules/@fluentui/date-time-utilities/lib/index.js: Command failed with exit code 1: node -p JSON.stringify(Object.keys(require('C:/Users/Joel/source/repos/zmk-config-builder/node_modules/@fluentui/date-time-utilities/lib/index.js')))
C:\Users\Joel\source\repos\zmk-config-builder\node_modules\@fluentui\date-time-utilities\lib\index.js:1
export * from './dateMath/dateMath';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:353:18)
    at wrapSafe (node:internal/modules/cjs/loader:1039:15)
    at Module._compile (node:internal/modules/cjs/loader:1073:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at [eval]:1:28
    at Script.runInThisContext (node:vm:129:12)
[19:56:59] [esinstall] cjsAutoDetectExportsRuntimeUntrusted error C:/Users/Joel/source/repos/zmk-config-builder/node_modules/@fluentui/date-time-utilities/lib/index.js: Unexpected token 'export'
[19:56:59] [esinstall] cjsAutoDetectExportsStatic C:\Users\Joel\source\repos\zmk-config-builder\node_modules\@fluentui\date-time-utilities\lib\dateMath\dateMath.js: Unexpected import statement in CJS module.
  at @:1:8
[19:56:59] [esinstall] cjsAutoDetectExportsRuntime error C:/Users/Joel/source/repos/zmk-config-builder/node_modules/@fluentui/date-time-utilities/lib/dateMath/dateMath.js: Command failed with exit code 1: node -p JSON.stringify(Object.keys(require('C:/Users/Joel/source/repos/zmk-config-builder/node_modules/@fluentui/date-time-utilities/lib/dateMath/dateMath.js')))
C:\Users\Joel\source\repos\zmk-config-builder\node_modules\@fluentui\date-time-utilities\lib\dateMath\dateMath.js:1
import { DayOfWeek, MonthOfYear, FirstWeekOfYear, DateRangeType } from '../dateValues/dateValues';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:353:18)
    at wrapSafe (node:internal/modules/cjs/loader:1039:15)
    at Module._compile (node:internal/modules/cjs/loader:1073:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at [eval]:1:28
    at Script.runInThisContext (node:vm:129:12)
[19:56:59] [esinstall] cjsAutoDetectExportsRuntimeUntrusted error C:/Users/Joel/source/repos/zmk-config-builder/node_modules/@fluentui/date-time-utilities/lib/dateMath/dateMath.js: Cannot use import statement outside a module

(There are several more errors in the log, but they all look roughly the same as the ones above.)

[alinflorin]

Unfortunately, I've switched to vite. I'll try again tomorrow, using the latest Snowpack version. Thank you for looking into this.

[alinflorin]

Still not working, using latest Snowpack version.

[joelspadin]

I wasn't aware of Vite until you mentioned it. So far that's working well as an alternative to Snowpack.

[alexgorbatchev]

Seeing the same issue. On the browser site the error reads:

SyntaxError: The requested module '/_snowpack/pkg/@fluentui.date-time-utilities.lib.dateMath.dateMath.v8.2.0.js' does not provide an export named 'BaseExtendedPeoplePicker'

[LubomirPacheliev]

having a similar issue, did anybody find a solution to this or should I also switch to Vite

[alinflorin]

having a similar issue, did anybody find a solution to this or should I also switch to Vite

I didn't investigate this recently, I will do it tomorrow. Last I checked, 2 weeks ago, the error was still there.

Thank you.