How can I use relative module path for client script by @NAmdConfig? SuiteScript 2.0

Question

I would like to load non-AMD modules (jQuery and blockUI) using @NAmdConfig for client script, but my code occurs error in browser.

Uncaught Error: Module does not exist: ../../lib/jquery-blockUI.js

If I use absolute path instead of relative path, it works.

"baseUrl": "../../lib/"

Replace above with below, then works.

"baseUrl": "/SuiteScripts/ComponentA/SuiteScript2/lib/"

However I would like to use relative path because these scripts are going to be released as a bundle.

My current solution for this issue is using absolute path and replacing the path with bundle path when I release a bundle.

Does anyone know how to use relative path or better solution?

Script Files

File Structure

SuiteScripts/
└── ComponentA/
    └── SuiteScript2/
        ├── FunctionA/
        │   ├ config.json
        │   ├ Suitelet.js
        │   └ ClientScript.js
        └── lib/
            ├ jquery.min.js
            └ jquery-blockUI.js

config.json

{
  "baseUrl": "../../lib/",
  "paths": {
    "jquery": "jquery.min.js",
    "blockUI": "jquery-blockUI.js"
  },
  "shim": {
    "blockUI": ["jquery"]
  }
}

Suitelet.js

/**
 * @NApiVersion 2.x
 * @NScriptType Suitelet
 * @NModuleScope SameAccount
 * @NAmdConfig ./config.json
 */

define(['N/record', 'N/url', 'N/ui/serverWidget'],
function(record, nsUrl, serverWidget) {

    function onRequest(context) {
        // code abbreviated
        var form = serverWidget.createForm({title: 'FunctionA', hideNavBar: false});
        // Set client script
        form.clientScriptModulePath = './ClientScript.js';
        // code abbreviated
    }
})

ClientScript.js

/**
 * @NApiVersion 2.x
 * @NScriptType ClientScript
 * @NModuleScope SameAccount
 * @NAmdConfig ./config.json
 */
define(['N/runtime', 'N/url', 'blockUI'],
    function (runtime, url, blockUI) {
    // code using blockUI
});

score 0 · Answer 1 · answered Feb 19 '19 at 17:48

Like so. Its tricky at first but once you get it:

AMD config file ( /SuiteScripts/MyLibs/MyLibs.config.json ):

{
  "packages": [
  ],
  "paths": {
    "sugar-2.0.4.min": "SuiteScripts/MyLibs/libs/sugar-2.0.4.min",
    "buckets-1.98.2.min": "SuiteScripts/MyLibs/libs/buckets-1.98.2.min",
    "jquery.jexcel-1.5.7": "SuiteScripts/MyLibs/libs/jquery.jexcel-1.5.7",
    "jquery.jcalendar-1.5.7": "SuiteScripts/MyLibs/libs/jquery.jcalendar-1.5.7"
  }
}

And the usage in a client script

 *@NApiVersion 2.x
 *@NScriptType ClientScript
 *@NAmdConfig  /SuiteScripts/MyLibs/MyLibs.config.json
 */
define([
        'N/error',
        'N/search',
        'sugar-2.0.4.min',
        'buckets-1.98.2.min',
        'jquery.jexcel-1.5.7',
        'jquery.jcalendar-1.5.7',
    ],
    function (error, search, sugar, buckets, jexcel, jcalendar) {

       function pageInit(context) {
            // example 1 w/ sugar.js
            var num = Sugar.Number.random(1, 100);
            var hm = new buckets.Dictionary();

            // example 2 w/ jquery grid
            jQuery('#ui-grid').jexcel({
                    data: data,
                    colHeaders: ['Country', 'Description', 'Type', 'Stock', 'Next purchase'],
                    colWidths: [300, 80, 100, 60, 120],
                    columns: [
                        {type: 'autocomplete', url: 'https://bossanova.uk/jexcel/countries'},
                        {type: 'text'},
                        {
                            type: 'dropdown',
                            source: [{'id': '1', 'name': 'Fruits'}, {'id': '2', 'name': 'Legumes'}, {
                                'id': '3',
                                'name': 'General Food'
                            }]
                        },
                        {type: 'checkbox'},
                        {type: 'calendar'},
                    ]
                });

...

Hi xpeldev, Thank you for your answer, but I meant "I would like to use relative path". You use absolute path to specify custom modules in config.json. This script occurs error when you distribute and install it as a bundle, doesn't it? (Because there is no /SuiteScripts/MyLibs/ in destination account, but /SuiteBundles/Bundle ####/MyLibs/) — Kenji, Feb 20 '19 at 00:40
Nope, we dont have any bundling errors using this absolute path convention. relative vs absolute is up top you — xpeldev, Feb 20 '19 at 15:25
I've tried absolute path instead, but it does not work in destination account because paths still point at /SuiteScripts/.. Do you mean on bundle installation, NetSuite system overwrites absolute paths in your script files automatically? ( /SuiteScripts/MyLibs/ to /SuiteBundles/Bundle ####/MyLibs/)) — Kenji, Feb 21 '19 at 01:26

score 0 · Accepted Answer · answered Feb 22 '19 at 07:46

I found a workaround for this problem although it does not use relative path. jajo1987 told me this trick on Reddit, thanks jajo1987. Reddit

The workaround is having copy of config.json under /SuiteBundles/ folder in development environment.

With this trick, I don't have to replace path in config file when I release a bundle.

Script Files

Assuming bundle number is 00000.

File Structure

├── SuiteScripts/
│   └── ComponentA/
│       └── SuiteScript2/
│           ├── FunctionA/
│           │   ├ config.json
│           │   ├ Suitelet.js
│           │   └ ClientScript.js
│           └── lib/
│               ├ jquery.min.js
│               └ jquery-blockUI.js
└── SuiteBundles/
    └── Bundle 00000/
        └── SuiteScript2/
            └── FunctionA/
                └ config.json

/SuiteScripts/ComponentA/SuiteScript2/FunctionA/config.json

{
  "baseUrl": "/SuiteBundles/Bundle 00000/SuiteScript2/lib/",
  "paths": {
    "jquery": "jquery.min.js",
    "blockUI": "jquery-blockUI.js"
  },
  "shim": {
    "blockUI": ["jquery"]
  }
}

/SuiteBundles/Bundle 00000/SuiteScript2/FunctionA/config.json

{
  "baseUrl": "/SuiteScripts/ComponentA/SuiteScript2/lib/",
  "paths": {
    "jquery": "jquery.min.js",
    "blockUI": "jquery-blockUI.js"
  },
  "shim": {
    "blockUI": ["jquery"]
  }
}

ClientScript.js

/**
 * @NApiVersion 2.x
 * @NScriptType ClientScript
 * @NModuleScope SameAccount
 * @NAmdConfig /SuiteBundles/ComponentA/SuiteScript2/FunctionA/config.json
 */
define(['N/runtime', 'N/url', 'blockUI'],
    function (runtime, url, blockUI) {
    // code using blockUI
});

How can I use relative module path for client script by @NAmdConfig? SuiteScript 2.0

Script Files

2 Answers2

Script Files