Error serving up sp-webpart sample

[JonoSuave]

Sample

https://github.com/pnp/mgt-samples/tree/main/samples/app/sp-webpart

Author(s)

Gavin Barron

What happened?

When I run a gulp serve --nobrowser I get the following error:

Error - [webpack] 'dist':
./node_modules/lit-element/lit-element.js 6:194
Module parse failed: Unexpected token (6:194)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  * Copyright 2017 Google LLC
|  * SPDX-License-Identifier: BSD-3-Clause
>  */class s extends t{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=e(i,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return i}}s._$litElement$=!0,s[("finalized","finalized")]=!0,globalThis.litElementHydrateSupport?.({LitElement:s});const r=globalThis.litElementPolyfillSupport;r?.({LitElement:s});const o={_$AK:(t,e,i)=>{t._$AK(e,i)},_$AL:t=>t._$AL};(globalThis.litElementVersions??=[]).push("4.0.4");export{s as LitElement,o as _$LE};
| //# sourceMappingURL=lit-element.js.map
| 
 @ ./node_modules/lit/index.js 3:0-43 3:0-43
 @ ./node_modules/@microsoft/mgt-element/dist/es6/components/baseComponent.js
 @ ./node_modules/@microsoft/mgt-element/dist/es6/index.js
 @ ./lib/webparts/mgtDemo/MgtDemoWebPart.js

Steps to reproduce

1. npm install the sp-webpart sample. I'm using node version 18.18.2.
2. Run gulp serve --nobrowser

Expected behavior

To not have any errors and to see the MGT sample display in workbench

Developer environment

macOS

Browsers

• [ ] Internet Explorer
• [X] 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

No response

[sebastienlevert]

I was able to reproduce on my environment. @musale or @mnickii can you have a look at this? Were there changes made on how the SPFx experience should work?

[musale]

I'll look into this during the week @sebastienlevert @JonoSuave

[konrad-kolodziejak-at-cg]

@musale Are there any updates on this issue? I have the same problem.

In my case it's Windows 11, Chrome and node v18.17.1

[musale]

@konrad-kolodziejak-at-cg @JonoSuave apologies for the late response. I got around to testing this and I could replicate.

Can you update your gulpfile.js under lit folders to this:

const litFolders = [
  `node_modules${path.sep}lit${path.sep}`,
  `node_modules${path.sep}@lit${path.sep}`,
  `node_modules${path.sep}lit-html${path.sep}`,
  `node_modules${path.sep}lit-element${path.sep}`
];

This adds the lit-element file to be transformed. I'm trying to figure out where the change that introduced this is and all the relevant documentation update. Let me know if that works.

[musale]

@konrad-kolodziejak-at-cg @JonoSuave added #25 to upgrade deps and remove the code blocks that introduce transforming lit files, test it out and let me know if that works for you?