how to use azure cognitive search from a sharepoint online SPFx webpart

Question

I haven't had much contact with SPFx lately, so I guess I need to study a bit, :)

I want to use this NPM package here:
https://www.npmjs.com/package/azure-search

Into a basic new SPFx web part:

The code is like this:

export default class Azurecognitivesearchwebpart extends React.Component<IAzurecognitivesearchwebpartProps, {}> {

  public render(): React.ReactElement<IAzurecognitivesearchwebpartProps> {    
  //var AzureSearch = require('azure-search');
  var client = AzureSearch({
    url: "https://x.search.windows.net",
    key: "xx",
    version: "2016-09-01", // optional, can be used to enable preview apis
    headers: { // optional, for example to enable searchId in telemetry in logs
      "x-ms-azs-return-searchid": "true",
      "Access-Control-Expose-Headers": "x-ms-azs-searchid"        
    }
  });

  // search the index
  client.search('azureblob-index-aihw', {search: "scott", top: 10}, function(err, results, raw){
    // raw argument contains response body as described here:
    // https://msdn.microsoft.com/en-gb/library/azure/dn798927.aspx
  });


    return (
      <div className={ styles.azurecognitivesearchwebpart }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

However I get this error:

sp-webpart-workbench-assembly_default.js:26411 [1585151245901][OtherGlobalError.window.onerro] TypeError: Object(...) is not a function

what am I missing here?

and some others

score 0 · Answer 1 · answered Aug 28 '21 at 19:18

From the error, you can’t tell what line triggered the error… but with that being said…

You commented out the import of the NPM package you’re using… meaning where you’re creating an instance of AzureSearch() it simply isn’t defined.

FWIW, that NPM package doesn’t look to provide much value… why not just make a call to the direct endpoint? Looks like all that package does is build the endpoint for you. I’d just call the endpoint directly.

I do this here in a GitHub Action: https://github.com/andrewconnell/azure-search-index/blob/master/src/index.ts

Use that as a guide… note that’s running from a Node environment, but running from SPFx will be easier because you don’t need Axios in your SPFx component. Rather, just use the HttpClient API to submit the HTTP request.

how to use azure cognitive search from a sharepoint online SPFx webpart

1 Answers1