Forum Stats

  • 3,733,849 Users
  • 2,246,830 Discussions
  • 7,856,894 Comments

Discussions

Adding third party library Oracle JET typescript

Zsolt Holman
Zsolt Holman Member Posts: 23 Red Ribbon

It is confusing how to integrate external third party libs to an ojet 10.1.0 typescript app, based on

and

bcs requirejs.config in "main.js" is said to be generated by file "path_mapping.json" and shoudln't be edited...

Imports in typescript version seems working, however, after "build" and "serve" receiving error message saying that libraries/resources are inaccessible:

"Failed to load resource: the server responded with a status of 404 (Not Found)"

Is there any typescript-specific setup method for third party libraries?

Best Answers

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,546 Employee
    Accepted Answer

    Ok, the path_mappings.json file looks much better now. But it's a different folder that you are aliasing to now. The alias "my-library" is going to be pointing to the "folder" only. So in your import statement, you are going to need to add the "/module/index" part to it.

    import Module from "my-library/module/index.js"

    If your alias pointed to the "/module" folder, then it would look like

    import Module from "my-library/index.js"

    Hope that makes sense.

    Zsolt Holman
  • Zsolt Holman
    Zsolt Holman Member Posts: 23 Red Ribbon
    Accepted Answer

    As per JB's explanation:

    this is what the path_mappings.json would look like

        "my-library": {
          "cwd": "node_modules/@issuer/my-library",
          "debug": {
            "src":  "index.js",
            "path": "libs/my-library/index.js"
          },
          "release": {
            "src": "index.js",
            "path": "libs/my-library/index.js"
          }
        }
    


    you would add a path entry in the tsconfig.json file as well so that the type definitions can be found.

           "paths": {
                "my-library":["./node_modules/@issuer/my-library/"],
                "ojs/*": ["./node_modules/@oracle/oraclejet/dist/types/*"]
            },
    

Answers

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,546 Employee

    Nothing really special needs to be done between JavaScript and TypeScript for these.

    You should not modify the main.js file at all. There are a few blog posts out there by 3rd parties that tell you to do this as well, but it's not needed. Add your entry to the path_mappings.json file and then import the "alias" that you defined in that file. Don't use any path entries, etc. Just reference the alias name that you provided.

    This is all assuming that you are loading a 3rd party library that will actually work in the browser (not a Nodejs only library) and that the library will work with Requirejs. There are libraries out there that are not designed to work with an asynchronous loader like Requirejs.

    Can you tell me which library you are trying to load? I'll be happy to configure it on my local machine and provide a working example if possible.

    Zsolt Holman
  • Zsolt Holman
    Zsolt Holman Member Posts: 23 Red Ribbon

    The library looks like this:

    "@issuer/my-library/module"

    installed successfully via:

    npm install @issuer/my-library/module --save

    which can be successfully referenced from ojet ts code:

    import Module from "@issuer/my-library/module";

    The path_mapping.json file based on the video above:

    ...
     "libs": {
    
        "my-library": {
          "cdn": "3rdparty",
          "cwd": "node_modules/@issuer/my-library/module",
          "debug": {
            "src": "my-library.index.js",
            "path": "libs/my-library/index.js",
            "cdnPath": ""
          },
          "release": {
            "src": "my-library.js",
            "path": "libs/my-library/index.js",
            "cdnPath": ""
          }
        },
    ...
    

    results error messages in browser inspection window...

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,546 Employee

    Thanks Zsolt,

    In this case, your import statement should look like

    import Module from "my-library";

    The path_mappings,json entry is incorrect for the "src" entries. It should be either [**] if you want to copy all files over to the libs/my-library folder, or "index.js" if that is the only file being copied over. The "my-library" name is an alias placed in to the main.js file at build time. It is not a real file name. Take a look at the other existing entries in the path_mappings file for examples of how this is done in different scenarios. You can also look at the /web/js/ folder after a build to see what has actually be copied over from the "src" to the "path" as you have defined them.

    Zsolt Holman
  • Zsolt Holman
    Zsolt Holman Member Posts: 23 Red Ribbon

    My "path_mappings,json" file looks like this

    ...
     "libs": {
    
        "my-library": {
          "cdn": "",
          "cwd": "node_modules/@issuer/my-library",
          "debug": {
            "src": ["**"],
            "path": "libs/my-library",
            "cdnPath": ""
          },
          "release": {
            "src": ["**"],
            "path": "libs/my-library",
            "cdnPath": ""
          }
        },
    ...
    

    and the folder /web/js/libs contains the files copied...

    However, the code still doesn't accept the import as follows:

    import Module from "my-library";

    Full path seems working:

    import Module from "/path/to/my-library";

    Unfortunately, still producing error, while

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,546 Employee
    Accepted Answer

    Ok, the path_mappings.json file looks much better now. But it's a different folder that you are aliasing to now. The alias "my-library" is going to be pointing to the "folder" only. So in your import statement, you are going to need to add the "/module/index" part to it.

    import Module from "my-library/module/index.js"

    If your alias pointed to the "/module" folder, then it would look like

    import Module from "my-library/index.js"

    Hope that makes sense.

    Zsolt Holman
  • Zsolt Holman
    Zsolt Holman Member Posts: 23 Red Ribbon
    Accepted Answer

    As per JB's explanation:

    this is what the path_mappings.json would look like

        "my-library": {
          "cwd": "node_modules/@issuer/my-library",
          "debug": {
            "src":  "index.js",
            "path": "libs/my-library/index.js"
          },
          "release": {
            "src": "index.js",
            "path": "libs/my-library/index.js"
          }
        }
    


    you would add a path entry in the tsconfig.json file as well so that the type definitions can be found.

           "paths": {
                "my-library":["./node_modules/@issuer/my-library/"],
                "ojs/*": ["./node_modules/@oracle/oraclejet/dist/types/*"]
            },
    
Sign In or Register to comment.