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

[tandrasi]

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

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version latest
• SPFx version 1.19.0
• Node.js version 18.20.2

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).

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]

The same issue

[xavisegura]

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

[gabmor38]

Same issue

[jensotto]

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]

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]

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).

[eljacko1]

I was also having this issue recently. After trying a whole bunch of different things I eventually ran 'gulp serve --verbose' and noticed the error happened after loading the localisation files for the @pnp/spfx-property-controls. On a whim I deleted the contents of this folder node_modules/@pnp/spfx-property-controls/lib/loc in the project and suddenly it started working again.

I've no idea why, but I hope perhaps this information can help somehow.

I should also note, that the files I removed came back but the error has not returned

[tandrasi]

I was also having this issue recently. After trying a whole bunch of different things I eventually ran 'gulp serve --verbose' and noticed the error happened after loading the localisation files for the @pnp/spfx-property-controls. On a whim I deleted the contents of this folder node_modules/@pnp/spfx-property-controls/lib/loc in the project and suddenly it started working again.

I've no idea why, but I hope perhaps this information can help somehow.

I should also note, that the files I removed came back but the error has not returned

I tried this but it didn't work for me. I saw the files being found during "gulp serve --verbose" and deleted them as per recommendation. I still get the same amount of [object Object] errors (6 in my case - it used to be 8 but upgrading the property controls must've done something). I have even tried upgrading to the latest @pnp/spfx-property-controls version (3.17.0)

"@pnp/spfx-property-controls": "^3.17.0"

While this suggestion is great as a workaround and hope it helps others, this just wouldn't suffice, especially when we use Azure DevOps Pipelines for our builds.

This is a systemic issue that I hope someone from the dev team can at least acknowledge.

Thanks

[bornhamilton]

I’ve removed "@pnp/spfx-property-controls": "^3.17.0" from project and still see errors.

[ZabbyCapurin]

I'm currently seeing the errors for my pre-existing SPFx solution web part. For me, if the web part is using @pnp/spfx-property-controls, it gives the errors and doesn't build/publish.
Removing the web part from the build and deployment doesn't show the errors (using --verbose didn't do much for me) and builds my package file just fine

[tandrasi]

I'm currently seeing the errors for my pre-existing SPFx solution web part. For me, if the web part is using @pnp/spfx-property-controls, it gives the errors and doesn't build/publish. Removing the web part from the build and deployment doesn't show the errors (using --verbose didn't do much for me) and builds my package file just fine

Same, I use it extensively in our shared library and all our web parts. I have to stick to 1.18.2 until this is addressed.

[vystartasv]

Same here. Tried many things (upgrade/downgrade libraries/node/refactor code) with this error, but only solution for now - downgraded everything back to 1.18.2 :((

[mbice]

We are also blocked from upgrading many of our modules to 1.19 because of this issue.

[stevebeauge]

Both @pnp/spfx-controls-react and @pnp/spfx-property-controls are tighly coupled to the version of SPFx (see here for example.

You have to wait a SPFX 1.19 compatible release of the components in order to use them with latest spfx version.

That said, the SPFX teams burried the actual webpack configuration is a deep stack of build tools, which "simplifies" the use of the framework, until something breaks. In this case, it's pratically impossible to debug the faulting component.

I wish this part of the SPFX framework to get better documented and opened to customization.