TypeError: e.replace is not a function in tilib.js:44:44

[Steve-Mcl]

Software and Package Versions

node -v: 12.16.1
OS: Windows 10
npm -v: 6.13.4
uibuilder: 3.2.0
chrome (latest)

I know it seems like a lot but it saves time in the long run

Software	Version
Node.JS	12.16.1
npm	6.13.4
Node-RED	1.3.0 beta.1
uibuilder node	3.2.0
uibuilderFE
OS	Windows 10
Browser	Chrome latest

How is Node-RED installed? Where is uibuilder installed?

regular node-red install - uibuilder installed via palette

---

The issue: after installing axios via the uibuilder manage frontend libraries, accessing uibuilder details results in an error.

clicking the [uibuilder details] button, this happens...

Debugging in vscode reveals...

I have put a temporary fix to handle pj.browser being an object (in uibuilder.js:1414) ...

                    /** Are either the `browser` or `main` properties set in package.json?
                     *  If so, add them to the output as an indicator of where to look.
                     */
                    let mainTxt = '<i>Not Supplied</i>'
                    if ( typeof pj.browser === "string" && pj.browser !== '' ) {
                        mainTxt = `<a href="${tilib.urlJoin(httpNodeRoot, pj.url.replace('..',''), pj.browser)}">${pj.url}/${pj.browser}</a>`
                    } else if ( typeof pj.browser === "object" && pj.browser !== '' ) {
                        let entries = Object.entries(pj.browser)
                        mainTxt = "";
                        for (let index = 0; index < entries.length; index++) {
                            const element = entries[index];
                            mainTxt += `<a href="${tilib.urlJoin(httpNodeRoot, pj.url.replace('..',''), element[1])}">${pj.url}/${element[1]}</a>`
                        }
                    } else if ( pj.main !== '' ) {
                        mainTxt = `<a href="${tilib.urlJoin(httpNodeRoot, pj.url.replace('..',''), pj.main)}">${pj.url}/${pj.main}</a>`
                    }

... but perhaps it might be better to default to pj.main?

---

edit...

FYI: Looking in axios folder, there is actually a browser ready dist folder with axios.js and axios.min.js
The hack i did above works to prevent the error I seen, but I imagine what the end user wants from uibuilder is for the Vendor Client Libraries list to show the browser ready code? .

What might be of interest is the axios package.json has a couple of potentially useful props...

"jsdelivr": "dist/axios.min.js",
"unpkg": "dist/axios.min.js",
  "bundlesize": [
    {
      "path": "./dist/axios.min.js",
      "threshold": "5kB"
    }

perhaps some logic in uibuilder.js:1414 could first check some of these fields before looking to main or browser props?

---

edit 2...

So perhaps this is a better (potential) fix than the one above uiblib.js:511...

                // Find browser entry point (or '')
                let browser = typeof pj.browser === "string" ? pj.browser : ""
                installedPackages[pkgName].browser = browser || pj.jsdelivr || pj.unpkg || ''

this give us the below output in the uibuilder details pages...

[TotallyInformation]

Hi, the error comes from one of the urljoin parameters being something other than a string as you say.

tilib.urlJoin(httpNodeRoot, pj.url.replace('..',''), pj.browser)

But note that pj.browser IS the package.json browser property. So which of the above 3 arguments isn't a string? I can only think that it is the pj.browser arg. So the processing around uibuilder.js line 1410 needs an extra check to make sure that pj.browser is a string - there isn't such a check because it seemed impossible for it to be anything else given the checks that are done on package.json.

However, you clearly can. This is what pj.browser contains for axios: { './lib/adapters/http.js': './lib/adapters/xhr.js' }

This is very annoying because it looks like people are starting to use the browser property in ways that are not defined in the npm documentation:

• https://docs.npmjs.com/cli/v7/configuring-npm/package-json#browser
• https://github.com/defunctzombie/package-browser-field-spec

Clearly Axios is using the 2nd definition. But it also means that the browser property may not in fact be a valid browser entry point but something completely different that is only useful when compiling using a bundler.

Anyway, I will include your suggested fix. Sadly, because there isn't a single, enforced standard for the browser entry point, uibuilder can only make a guess.

I have another fix to put live as well so expect a v3.2.1 shortly. Thanks for reporting and for the fix.

[TotallyInformation]

Fixed in v3.2.1