search

SharePoint / sp-dev-docs

SharePoint & Viva Connections Developer Documentation
https://docs.microsoft.com/en-us/sharepoint/dev/
Creative Commons Attribution 4.0 International
1.22k stars 986 forks source link

SPFx 1.19.0 - Error during build with [object Object] errors that didn't happen in previous versions #9675

Open tandrasi opened 1 week ago

tandrasi commented 1 week ago

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

Additional environment details

Describe the bug / error

Everything else being equal, upgrading our current React projects from 1.18.2 to 1.19.0 causes us to get errors during webpack's build process. The issue is that it doesn't say what the errors are, just "[object Object]". Multiple error lines exist depending on the files included in the build. It is impossible to isolate what is exactly causing the issues, but I have a .ts file I know is causing at least one of the build failures (just reach out if you would like to see it).

image

Please note:

  1. Using the Yeoman generator for 1.19.0 and provisioning a React webpart, it builds fine. Adding more and more of our code eventually will cause the error as per above.
  2. We have upgraded correctly, ensuring to clear node_modules and even rebuilt the package.json file.
  3. Some projects have been alive since 1.16.0 and upgraded correctly with each release without issue.

Steps to reproduce

  1. Upgrade existing SPFx project to 1.19.0 or start from scratch;
  2. Something will eventually trigger this error and I'm not sure what because it doesn't say!
  3. Sadness

Expected behavior

I expect no errors in the build, just like there were no errors in previous SPFx versions.

bornhamilton commented 1 week ago

The same issue

xavisegura commented 1 week ago

Same issue, compared with ootb 1.19 generated webpart, same npm versions, webpack throws a bunch of [object Object] errors without further details.

gabmor38 commented 1 week ago

Same issue image

jensotto commented 1 week ago

I had the same exact issue. For me it boiled down to some CSS references that where not done according to documentation, and top level imports of Fluent UI components that for some reason used an unsupported reference path (deeper than for example @fluentui/react/lib/Pickers.

All of this worked fine in 1.18.2 but failed after upgrading to 1.19.0. After fixing the issues mentioned above all of those [object Object] errors disappeared in my project and all worked as before.

tandrasi commented 5 days ago

I had the same exact issue. For me it boiled down to some CSS references that where not done according to documentation, and top level imports of Fluent UI components that for some reason used an unsupported reference path (deeper than for example @fluentui/react/lib/Pickers.

All of this worked fine in 1.18.2 but failed after upgrading to 1.19.0. After fixing the issues mentioned above all of those [object Object] errors disappeared in my project and all worked as before.

OK, say that this is the case with import reference paths being longer, how would I fix the following imports? This snippet I'm showing from my ThemeProvider.ts file is definitely the culprit for 2 out of my 8 [object Object] errors because once I remove some of the property pane references from pnp/spfx-property-controls, it works:

import {
    ThemeProvider as msThemeProvider
} from '@microsoft/sp-component-base';
import ThemeGenerator from '../generators/ThemeGenerator';
import ColorHelper from '../helpers/ColorHelper';
import tinycolor from 'tinycolor2';
import IBaseThemingProps from '../typings/interfaces/base-webpart-props/IBaseThemingProps';
import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
import { PropertyFieldSwatchColorPicker, PropertyFieldSwatchColorPickerStyle, IPropertyFieldSwatchColorOption } from '@pnp/spfx-property-controls/lib/PropertyFieldSwatchColorPicker';
import { IPropertyPaneDropdownOption, IPropertyPaneField, PropertyPaneToggle, PropertyPaneDropdown, PropertyPaneDropdownOptionType, PropertyPaneSlider } from '@microsoft/sp-property-pane';
import { update } from '@microsoft/sp-lodash-subset';
import BaseThemingPropsEnum from '../enums/BaseThemingPropsEnum';
import { createTheme, mergeStyles } from '@fluentui/react';
import WebFont from 'webfontloader';
import GoogleFontFamilies from '../data/GoogleFontFamilies';
import React from 'react';
import { PropertyPaneSeparator } from '../property-pane/PropertyPaneSeparator';
import { PropertyPaneSpacer } from '../property-pane/PropertyPaneSpacer';
import SPHelper from '../helpers/SPHelper';
import ThemeHelper from '../helpers/ThemeHelper';
User5679 commented 5 days ago

Hello, Similar issue here. The solution provided by @jensotto with reference paths worked for 3 over my 4 warnings. However for the last one, it was coming from : import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";

I tried several reference paths but none is working, apparently same as what @tandrasi has with pnp/spfx-property-controls. So it appears to impact all kind of react component libraries. Didn't find a workaround yet for this one (except embedding the component which is not the point obviously).