browserify / tinyify

a browserify plugin that runs various optimizations, so you don't have to install them all manually. makes your bundles tiny!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unexpected token while browserifying peermaps-web

ralphtheninja opened this issue · comments

I get the following error when trying to build peermaps-web with browserify and tinyify.

How to reproduce

  • git clone git@github.com:peermaps/peermaps-web.git && cd peermaps-web && npm install
  • manually set worker_threads: false in ./node_modules/sodium-universal/package.json` after clean install but before testing (fix for this is in the air here sodium-friends/sodium-universal#9)
  • npm run test:browser
lms@x260 ~/src/peermaps/peermaps-web (tinyify)
$ npm run test:browserify 

> test:browserify
> browserify -p tinyify app.js > /dev/null

/home/lms/src/peermaps/peermaps-web/node_modules/acorn/dist/acorn.js:2929
    throw err
    ^

SyntaxError: Unexpected token (1:2616)
    at _class.pp$4.raise (/home/lms/src/peermaps/peermaps-web/node_modules/acorn/dist/acorn.js:2927:15)
    at _class.pp.unexpected (/home/lms/src/peermaps/peermaps-web/node_modules/acorn/dist/acorn.js:698:10)
    at _class.pp$1.parseTryStatement (/home/lms/src/peermaps/peermaps-web/node_modules/acorn/dist/acorn.js:1085:51)
    at _class.pp$1.parseStatement (/home/lms/src/peermaps/peermaps-web/node_modules/acorn/dist/acorn.js:847:34)
    at _class.parseStatement (/home/lms/src/peermaps/peermaps-web/node_modules/acorn-node/lib/dynamic-import/index.js:65:118)
    at _class.pp$1.parseBlock (/home/lms/src/peermaps/peermaps-web/node_modules/acorn/dist/acorn.js:1170:23)
    at _class.pp$3.parseFunctionBody (/home/lms/src/peermaps/peermaps-web/node_modules/acorn/dist/acorn.js:2777:24)
    at _class.pp$1.parseFunction (/home/lms/src/peermaps/peermaps-web/node_modules/acorn/dist/acorn.js:1294:10)
    at _class.pp$3.parseExprAtom (/home/lms/src/peermaps/peermaps-web/node_modules/acorn/dist/acorn.js:2307:19)
    at _class.parseExprAtom (/home/lms/src/peermaps/peermaps-web/node_modules/acorn-node/lib/dynamic-import/index.js:77:117) {
  pos: 2616,
  loc: Position { line: 1, column: 2616 },
  raisedAt: 2617
}

Trying to debug this using visual studio I have the following screen dump:

image

In the debugger this.input is set to the following string:

'const ascii=require("./lib/ascii"),base64=require("./lib/base64"),hex=require("./lib/hex"),utf8=require("./lib/utf8"),utf16le=require("./lib/utf16le"),LE=255===new Uint8Array(Uint16Array.of(255).buffer)[0];function codecFor(encoding){switch(encoding){case"ascii":return ascii;case"base64":return base64;case"hex":return hex;case"utf8":case"utf-8":case void 0:return utf8;case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return utf16le;default:throw new Error(`Unknown encoding: ${encoding}`)}}fun…){const len=buffer.byteLength;return start>=len?"":end<=start?"":(start<0&&(start=0),end>len&&(end=len),(0!==start||end<len)&&(buffer=buffer.subarray(start,end)),codecFor(encoding).toString(buffer))},write:function(buffer,string,offset,length,encoding){return void 0===offset?encoding="utf8":void 0===length&&"string"==typeof offset?(encoding=offset,offset=void 0):void 0===encoding&&"string"==typeof length&&(encoding=length,length=void 0),codecFor(encoding).write(buffer,string,offset,length)}};\n'

After cleaning up this a bit to get a better grip:

lms@x260 ~/src/peermaps/peermaps-web (tinyify)
$ cat input.js 
const ascii=require("./lib/ascii")
const base64=require("./lib/base64")
const hex=require("./lib/hex")
const utf8=require("./lib/utf8")
const utf16le=require("./lib/utf16le")
const LE=255===new Uint8Array(Uint16Array.of(255).buffer)[0];

function codecFor(encoding){
  switch(encoding){
    case"ascii":return ascii;
    case"base64":return base64;
    case"hex":return hex;
    case"utf8":
    case"utf-8":
    case void 0:
      return utf8;
    case"ucs2":
    case"ucs-2":
    case"utf16le":
    case"utf-16le":
      return utf16le;
    default:throw new Error(`Unknown encoding: ${encoding}`)}}

fun…){const len=buffer.byteLength;return start>=len?"":end<=start?"":(start<0&&(start=0),end>len&&(end=len),(0!==start||end<len)&&(buffer=buffer.subarray(start,end)),codecFor(encoding).toString(buffer))},write:function(buffer,string,offset,length,encoding){return void 0===offset?encoding="utf8":void 0===length&&"string"==typeof offset?(encoding=offset,offset=void 0):void 0===encoding&&"string"==typeof length&&(encoding=length,length=void 0),codecFor(encoding).write(buffer,string,offset,length)}};

Looking more carefully it seems like a function has been parsed in a weird way:

image

I'm able to fix this issue by an update to b4a here holepunchto/b4a#2

It's related to try { } catch { } code where the (err) is missing:

https://github.com/hypercore-skunkworks/b4a/blob/81ff8e1b5de2e1c89cd34b10ccad7a87bab087d4/browser.js#L36-L41

So, adding (err) makes that problem go away, so can be used as a workaround for now.

Cheers!

By the looks of it, it seems to me that tinyify uses minify-stream which in turn uses terser so I'm guessing this is where the real fix should happen?

It seems the real culprits are in browser-pack-flat and common-shakeify.

Fixing this elsewhere.