The SharePoint Framework (#SPFx) Extensions Dev Preview Drop 1 utilizes a new version of one of the core node modules, sp-webpart-base v1.1.1. This module removed, possibly by accident, a particular TypeScript definition file, Placeholder.d.ts found in \node_modules\@microsoft\sp-webpart-base\lib\components\placeHolder.
Unfortunately this change was not included in the release notes, so it went unnoticed for a few days until rgueldenpfennig posted this as an issue on github.
Does this affect you?
First this will only effect those using a developer tenant that includes the latest SPFx bits. It’s a preview drop, this happens. Second, this only affects those using the “Placeholder” React Component that was found in the sp-webpart-base module. This is a very cool component though, we have been using it to help define a pre-configured webpart panel to help onboard new users with a particular webpart.
Example code that works in sp-webpart-base v1.0.0
1 2 3 4 5 6 | <Placeholder icon={ 'ms-Icon--Edit' } iconText='Todos' description="Get things done. Organize and share your team's to-do items with your team." buttonLabel='Configure' onAdd={ this._configureWebPart } /> |
I pulled this code from the React Todo Basic SPFx webpart example over on SharePoint PnP.
If you are using a dev tenant that includes first release bits, you will automatically be updated to the new extensions preview drop 1. If you were to include a Placeholder component in your code, when you load a webpart in a browser that triggers this code, you will likely received a console log error similar to:
Uncaught (in promise) Error: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=%20Check%20the%20render%20method%20of%20%60Todo%60. for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Next Steps
At this point there is not much we can do to work around this issue that I have found. You can either replace your Placeholder components with another component, which is a shame, or we can wait until we receive more guidance from Microsoft. It does appear as though the PG is now aware of the issue and will work on a solution. When I hear something I will update this post. Also, it does appear as though there is a new Placeholder component in the new sp-application-base module. Possibly this caused the confusion? Unfortunately for us, this new placeholder is providing very different functionality.
Update – 7/12/2017
I created a fix for this by replacing the Placeholder component provided by sp-webpart-base with a custom component. I am ok with my code, but long term if this is the suggested solution, I would rather see this as its own node module. In any case, a Pull Request (https://github.com/SharePoint/sp-dev-fx-webparts/pull/260) has been submitted for review. You can get the code now by reviewing the commit and grab the few files I changed.
Note, when you update package.json, you will want to delete your node_modules folder. Then run npm install again and you will be set.
We will see what happens.
The good thing is I learned a lot here….. Thanks for this blog
Eric
Timely post. I have a similar issue with the spfx-examples : React_Multipage and the React-Todo-basic (as per our post) on my client’s tenant ( not a dev tenant) hosted workbench . Both of which work fine in my localhost Workbench. I am at a bit of a loss as what to do next.
Daniel, looks like we were all using internal, undocumented code, thus when MS removed it, they didn’t see the need to tell anyone. But since examples were created using that placeholder, it is a shame. The best replacement right now is to replace the placeholder with our own ReactComponent. I am going to see about updating the PnP examples with new code that will compile fine.
Eric
Yes, I unwittingly stumbled on this and reached out to Waldek. The good thing is I learned a lot but I wasted valuable time.
Yup. I did create a workaround and submitted a pull request. You can grab my update via the commit if you want to preview and possibly use in your solutions.