How to use unifiedjs for sharepoint web part?

[fhg-isi]

I try to import unifiedjs in a sharepoint web part, based on typescript.
How should the import statement and configuration look like, to get it working?
Also see
https://stackoverflow.com/questions/77850612/how-to-use-unified-js-in-sharepoint-web-part

[14:56:53] Error - [webpack] 'dist':
./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
D:\eis\python_env\workspace\component_webpart\node_modules\node_modules doesn't exist or is not a directory
D:\eis\python_env\workspace\node_modules doesn't exist or is not a directory
D:\eis\python_env\node_modules doesn't exist or is not a directory
D:\eis\node_modules doesn't exist or is not a directory
D:\node_modules doesn't exist or is not a directory
looking for modules in D:\eis\python_env\workspace\component_webpart\node_modules\unified\node_modules
using description file: D:\eis\python_env\workspace\component_webpart\node_modules\unified\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
looking for modules in D:\eis\python_env\workspace\component_webpart\node_modules
using description file: D:\eis\python_env\workspace\component_webpart\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
using description file: D:\eis\python_env\workspace\component_webpart\node_modules\devlop\package.json (relative path: .)
no extension
Field 'browser' doesn't contain a valid alias configuration
using description file: D:\eis\python_env\workspace\component_webpart\node_modules\unified\package.json (relative path: ./node_modules/devlop)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\devlop is not a file
.wasm
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\unified\node_modules\devlop doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\devlop.wasm doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\unified\node_modules\devlop.wasm doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\devlop.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\unified\node_modules\devlop.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\devlop.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\unified\node_modules\devlop.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\devlop.json doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\unified\node_modules\devlop.json doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\devlop.css doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\unified\node_modules\devlop.css doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\devlop.jsx doesn't exist
D:\eis\python_env\workspace\component_webpart\node_modules\unified\node_modules\devlop.jsx doesn't exist
as directory
D:\eis\python_env\workspace\component_webpart\node_modules\unified\node_modules\devlop doesn't exist
as directory
existing directory
using path: D:\eis\python_env\workspace\component_webpart\node_modules\devlop\index
using description file: D:\eis\python_env\workspace\component_webpart\node_modules\devlop\package.json (relative path: ./index)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\devlop\index doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\devlop\index.wasm doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\devlop\index.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\devlop\index.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\devlop\index.json doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\devlop\index.css doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
D:\eis\python_env\workspace\component_webpart\node_modules\devlop\index.jsx doesn't exist

[ChristianMurphy]

Welcome @fhg-isi! 👋
Sorry you ran into a spot of trouble.

I'm not sure how anyone could help you with your configuration when you don't share what build tool you are using, what version of libraries you are using, and what your configuration is.

My educated guess from "SharePoint" being in the title is you are facing the same issue as micromark/micromark#161
And are using WebPack 4 as a build tool. WebPack 4 is known to be unable to resolve ESM imports and exports.

The solution is to upgrade your build tool.
WebPack 5, vite, or esbuild will all offer better ESM compatibility.

[fhg-isi]

Thank you for the reply and your guess. I followed the sharepoint web part tutorial, using yo generator:
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

I downgraded to version 10.0.1 of unified and that work. No need for extra config entries.
Also see
https://stackoverflow.com/a/77862518/2876079

I also run into issues with myst-to-html and had to adapt the WebPack configuration of SharePoint:
https://stackoverflow.com/questions/77707969/how-to-use-myst-parser-for-sharepoint-web-part/77862543#77862543