typescriptimportsharepoint-onlineweb-parts

How to use unified.js in sharepoint web part?

I try to use unified.js as a dependency of my custom sharepoint web part and I am new to typescript. I tried several variants of import statements and configurations but still get import and type errors.

=> How exactly should the import statement and the configuration files for the sharepoint web part look like to get it working?

Some of the errors I faced:

Uncaught SyntaxError: Unexpected token 'export' (at unified.js:1:1)

./node_modules/unified/lib/index.js
Module not found: Error: Can't resolve 'devlop' in 'D:\eis\python_env\workspace\component_webpart\node_modules\unified\lib'
resolve 'devlop' in 'D:\eis\python_env\workspace\component_webpart\node_modules\unified\lib'
  Parsed request is a module
  using description file: D:\eis\python_env\workspace\component_webpart\node_modules\unified\package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      D:\eis\python_env\workspace\component_webpart\node_modules\unified\lib\node_modules doesn't exist or is not a directory

I tried following import statements

import {unified} from 'unified';
import * as unified from 'unified';
import unified from 'unified';

I also tried to add unified under externals section of config/config.json:

"externals": {
  "unified": "node_modules/unified/index.js"

or

"externals": {
  "unified": {
    "path": "node_modules/unified/index.js",
    "globalName": "unified"      
  }

I also tried to add unified under the types section in tsconfig.json

"types": [
  "webpack-env",
  "unified"
],

There is some documentation about how to add an external library for web parts here:

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library

...but I find it hard to follow.

Unity provide a index.d.ts file. Therefore, I do not need to manually create a type file?

The tools used by sharepoint web parts seem to be quite outdated (node version v18.19.0 and typecript 4.7.4).

=> Maybe I need to use an older, specific version of unified instead of current version 11.0.4 in order to be compatible?

Solution

  • I downgraded unified to version 10.0.1 and it works now, without extra entries for config.json or tsconfig.json.

    The corresponding import statement is

    import {unified} from 'unified';