Maximo

 View Only
Expand all | Collapse all

MAF: What's the best practices to import the third party react component into our RBA application?

  • 1.  MAF: What's the best practices to import the third party react component into our RBA application?

    Posted Tue April 16, 2024 04:26 AM
    Edited by Wei HUANG Tue April 16, 2024 12:08 PM

    Hello IBM team,

    We are interested in integrating a third-party React (which is not available from public npm repo) component into our RBA applications.

    Within the development documentation, there is a section detailing how to importing a react component (Fancy button example).

    I've tried declare the component step by step. But I have some issue to installed this react component using npm

    npm install <url to package> --save

    First there is some dependencies errors which are not related to my third-party React component, this kind of error occurs event in a brand new workspace

    npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @maximo/inspection@8.11.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from mobx-react@5.4.4
npm ERR! node_modules/mobx-react
npm ERR!   mobx-react@"5.4.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/wiotp/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/wiotp/.npm/_logs/2024-04-16T13_44_13_490Z-debug-0.log

    I attempted to use the --legacy-peer-deps argument to assess whether I could proceed with the installation process to completion.

    However, I encountered an issue. It seems that npm is prompting me to log in, likely due to the @maximo/map-component being inaccessible for non-IBM users

    6625 timing idealTree:node_modules/webpack/node_modules/fill-range/node_modules/extend-shallow Completed in 0ms
6626 timing idealTree:node_modules/webpack/node_modules/is-number/node_modules/kind-of Completed in 0ms
6627 timing idealTree:buildDeps Completed in 42712ms
6628 timing idealTree:fixDepFlags Completed in 13ms
6629 timing idealTree Completed in 42799ms
6630 timing command:install Completed in 42810ms
6631 verbose stack HttpErrorAuthUnknown: Unable to authenticate, need: Basic realm="Artifactory Realm"
6631 verbose stack     at /usr/lib/node_modules/npm/node_modules/npm-registry-fetch/lib/check-response.js:80:17
6631 verbose stack     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
6632 verbose statusCode 401
6633 verbose pkgid @maximo/map-component@https://na.artifactory.swg-devops.com/artifactory/api/npm/iot-maximodev-npm-virtual/@maximo/map-component/-/@maximo/map-component-1.4.32.tgz
6634 verbose cwd /home/whuang/workspaces/rba/testDevOps/WHUANG-masdemo.manage.masdemo.mas-cg-eam-coe.com/WOSUMMARY
6635 verbose Linux 5.15.133.1-microsoft-standard-WSL2
6636 verbose node v21.7.0
6637 verbose npm  v10.5.0
6638 error code E401

    Alternatively, should we roll up the third-party component to resolve dependencies and enable importing it using relative paths from a custom component?

    Thank you for your suggestion.

    Best regards,
    ------------------------------
    Wei HUANG
    ------------------------------