Example not working

[maaft]

I tried to run the example code with freshly bootstrapped cra and vite apps.

Both failed miserably:

Cra

1. yarn create react-app my-app --template typescript
2. yarn && yarn add @elyra/pipeline-editor
3. insert example code
4. yarn start

Failed to compile.

Module not found: Error: Can't resolve 'path' in '/home/user/tmp/my-app/node_modules/@elyra/pipeline-editor/dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }
WARNING in ./node_modules/@elyra/pipeline-services/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/migration/errors/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/errors/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/errors/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/migration/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/migration/migrateV1/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV1/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV1/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/migration/migrateV2/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV2/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV2/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/migration/migrateV3/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV3/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV3/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/migration/migrateV4/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV4/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV4/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/migration/migrateV5/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV5/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV5/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/migration/migrateV6/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV6/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV6/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/migration/migrateV7/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV7/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV7/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/migration/migrateV8/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV8/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/migrateV8/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/migration/utils/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/utils/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/migration/utils/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/validation/check-circular-references/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/check-circular-references/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/check-circular-references/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/validation/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/validation/types.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/types.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/types.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/validation/utils.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/utils.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/utils.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/validation/validators/enum-validators.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/validators/enum-validators.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/validators/enum-validators.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/validation/validators/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/validators/index.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/validators/index.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/validation/validators/nested-enum-validators.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/validators/nested-enum-validators.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/validators/nested-enum-validators.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/validation/validators/number-validators.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/validators/number-validators.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/validators/number-validators.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/validation/validators/string-array-validators.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/validators/string-array-validators.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/validators/string-array-validators.ts'

WARNING in ./node_modules/@elyra/pipeline-services/dist/validation/validators/string-validators.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/validators/string-validators.ts' file: Error: ENOENT: no such file or directory, open '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/src/validation/validators/string-validators.ts'

ERROR in ./node_modules/@elyra/pipeline-editor/dist/index.js 5:6-21
Module not found: Error: Can't resolve 'path' in '/home/user/tmp/my-app/node_modules/@elyra/pipeline-editor/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }

ERROR in ./node_modules/@elyra/pipeline-services/dist/migration/migrateV2/index.js 42:29-44
Module not found: Error: Can't resolve 'path' in '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/dist/migration/migrateV2'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }

ERROR in ./node_modules/@elyra/pipeline-services/dist/migration/migrateV6/index.js 69:29-44
Module not found: Error: Can't resolve 'path' in '/home/user/tmp/my-app/node_modules/@elyra/pipeline-services/dist/migration/migrateV6'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }

ERROR in ./node_modules/jsonschema/lib/helpers.js 3:10-24
Module not found: Error: Can't resolve 'url' in '/home/user/tmp/my-app/node_modules/jsonschema/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }

ERROR in ./node_modules/jsonschema/lib/scan.js 3:13-27
Module not found: Error: Can't resolve 'url' in '/home/user/tmp/my-app/node_modules/jsonschema/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }

ERROR in ./node_modules/jsonschema/lib/validator.js 3:13-27
Module not found: Error: Can't resolve 'url' in '/home/user/tmp/my-app/node_modules/jsonschema/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }

webpack compiled with 6 errors and 22 warnings
No issues found.

Vite

1. npm create vite --template react-ts
2. yarn && yarn add @elyra/pipeline-editor
3. insert example code
4. patch react-virtualized:

"resolutions": {
    "react-virtualized": "git+https://git@github.com/remorses/react-virtualized-fixed-import.git#9.22.3"
  }

5. yarn dev
6. open browser and look at console output

[lresende]

Not being a react expert, I would check how the Elyra JupyterLab extension is using it to give you some suggestions and then submit a pr to update/fix any issues you find.

Also, maybe @bourdakos1 is around and have some suggestions.