search

FredKSchott / snowpack

ESM-powered frontend build tool. Instant, lightweight, unbundled development. ✌️
https://www.snowpack.dev
MIT License
19.48k stars 921 forks source link

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

Open alinflorin opened 3 years ago

alinflorin commented 3 years ago

Bug Report Quick Checklist

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'

image

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 commented 3 years ago

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

joelspadin commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

alinflorin commented 3 years ago

Still not working, using latest Snowpack version.

joelspadin commented 3 years ago

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

alexgorbatchev commented 3 years ago

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 commented 2 years ago

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

alinflorin commented 2 years ago

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.