Issue: SharePoint SSO Component

[mohammadamer]

Suggest improvements to the code sample and/or setup guide.

I did setup an SPFx extension with the same package.json packages and same components but I got error with running locally with gulp serve. I tried uninstall the packages then install again but still the same issue. Didn't find something useful when search for the errors.

Error - [webpack] 'dist':
./node_modules/micromark-util-decode-numeric-character-reference/index.js 23:11
Module parse failed: Identifier directly after number (23:11)
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
|   code > 126 && code < 160 ||
|   // Lone high surrogates and low surrogates.
>   code > 55_295 && code < 57_344 ||
|   // Noncharacters.
|   code > 64_975 && code < 65_008 || /* eslint-disable no-bitwise */
 @ ./node_modules/mdast-util-from-markdown/lib/index.js 138:0-97 1061:14-45
 @ ./node_modules/mdast-util-from-markdown/index.js
 @ ./node_modules/botframework-webchat-component/lib/Attachment/Text/private/LinkDefinitions.js
 @ ./node_modules/botframework-webchat-component/lib/Attachment/Text/private/MarkdownTextContent.js
 @ ./node_modules/botframework-webchat-component/lib/Attachment/Text/TextContent.js
 @ ./node_modules/botframework-webchat-component/lib/index.js
 @ ./node_modules/botframework-webchat/lib/addVersion.js
 @ ./node_modules/botframework-webchat/lib/index.js
 @ ./lib/extensions/copilotComponent/components/ChatBot.js
 @ ./lib/extensions/copilotComponent/CopilotComponentApplicationCustomizer.js
./node_modules/micromark-util-sanitize-uri/index.js 86:22
Module parse failed: Identifier directly after number (86:22)
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
|     }
|     // Astral.
>     else if (code > 55_295 && code < 57_344) {
|       const next = value.charCodeAt(index + 1)
|
 @ ./node_modules/micromark/lib/compile.js 44:0-55 770:10-21 781:10-21 1089:8-19 1105:22-33
 @ ./node_modules/micromark/index.js
 @ ./node_modules/mdast-util-from-markdown/lib/index.js
 @ ./node_modules/mdast-util-from-markdown/index.js
 @ ./node_modules/botframework-webchat-component/lib/Attachment/Text/private/LinkDefinitions.js
 @ ./node_modules/botframework-webchat-component/lib/Attachment/Text/private/MarkdownTextContent.js
 @ ./node_modules/botframework-webchat-component/lib/Attachment/Text/TextContent.js
 @ ./node_modules/botframework-webchat-component/lib/index.js
 @ ./node_modules/botframework-webchat/lib/addVersion.js
 @ ./node_modules/botframework-webchat/lib/index.js
 @ ./lib/extensions/copilotComponent/components/ChatBot.js
 @ ./lib/extensions/copilotComponent/CopilotComponentApplicationCustomizer.js
./node_modules/htmlparser2/lib/esm/index.js 48:9
Module parse failed: Unexpected token (48:9)
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
|  * They should probably be removed eventually.
|  */
> export * as ElementType from "domelementtype";
| import { getFeed } from "domutils";
| export { getFeed } from "domutils";
 @ ./node_modules/sanitize-html/index.js 1:19-41
 @ ./node_modules/botframework-webchat/lib/markdown/renderMarkdown.js
 @ ./node_modules/botframework-webchat/lib/index.js
 @ ./lib/extensions/copilotComponent/components/ChatBot.js
 @ ./lib/extensions/copilotComponent/CopilotComponentApplicationCustomizer.js

[adilei]

What does your serve.json look like?

[mohammadamer]

The default:

'use strict';

const build = require('@microsoft/sp-build-web');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

build.initialize(require('gulp'));

[adilei]

That is not serve.json

https://github.com/microsoft/CopilotStudioSamples/blob/master/SharePointSSOComponent/config/serve.json

[mohammadamer]

Sorry, accidently past the gulp.js serve.json file same as the code sample.

[adilei]

Same as the sample, i.e. untouched? Or did you populate your own values?

[mohammadamer]

Same as the sample and populate with my own values. I think I figured out where is the issue.

The issue has been resolved locally by adding the following function in the gulp.js file but it hasn't been resolved when deploying the extension using Azure DevOps pipelines.

So, gulp bundle in DevOps pipeline is giving the previous error however it works locally fine. gulp bundle --ship

build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    generatedConfiguration.module.rules.push(
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!htmlparser2)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    );
    return generatedConfiguration;
  }
});

[adilei]

Same as the sample and populate with my own values. I think I figured out where is the issue.

The issue has been resolved locally by adding the following function in the gulp.js file but it hasn't been resolved when deploying the extension using Azure DevOps pipelines.

So, gulp bundle in DevOps pipeline is giving the previous error however it works locally fine. gulp bundle --ship

build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    generatedConfiguration.module.rules.push(
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!htmlparser2)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    );
    return generatedConfiguration;
  }
});

Can you open a new issue so I could investigate Azure DevOps support (can't commit to a timeline though)