In build i'm getting @parcel/optimizer-swc: Expected '(', got '.'

[avoguga]

Hello guys, I'm encountering an issue during my build process using Parcel. The error I'm receiving is:

🚨 Build failed.
@parcel/optimizer-swc: Expected '(', got '.'

    5147 | 
  > 5148 | var $bpxV3 = parcelRequire("bpxV3");
  >      |                                     ^
    5149 | var $fae2523b6fb5c892$var$BREAK = {};
    5150 | var $fae2523b6fb5c892$var$RETURN = {};

This problem arises when I modify the outputFormat to "global" in my package.json file.

Here's my package.json looked like:

{
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "type": "module",
  "myApp": "dist/myApp.min.js",
  "iframe": "dist/iframe-app.js",
  "targets": {
    "myApp": {
      "engines": {
        "browsers": "Chrome 80"
      }
    },
    "iframe": {
      "engines": {
        "browsers": "Chrome 80"
      }
    }
  },
  "scripts": {
    "start": "npm-run-all --parallel dev:dependencies dev:web",
    "dev:ht-test": "parcel serve ./index.html --open --no-cache",
    "dev:dependencies": "parcel serve ./src/IframeApp.ts --target iframe --port 1235 --no-cache"
  },
  "alias": {
    "react": "preact/compat"
  },
  "engines": {
    "node": "^18.0.0"
  }
}

My package.json now:

{
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "type": "module",
  "myApp": "dist/myApp.min.js",
  "iframe": "dist/iframe-app.js",
  "targets": {
    "myApp": {
      "engines": {
        "browsers": "> 0.2%, not dead"
      },
      "outputFormat": "global"
    },
    "iframe": {
      "engines": {
         "browsers": "> 0.2%, not dead"
      }
    }
  },
  "scripts": {
    "start": "npm-run-all --parallel dev:dependencies dev:web",
    "dev:ht-test": "parcel serve ./index.html --open --no-cache",
    "dev:dependencies": "parcel serve ./src/IframeApp.ts --target iframe --port 1235 --no-cache",
     "build:iframeApp": "cross-env-shell parcel build  src/IframeApp.ts --target iframe --no-source-maps",
    "build:web": "cross-env-shell parcel build src/myApp.tsx --target myApp--no-source-maps",
  },
  "alias": {
    "react": "preact/compat"
  },
  "engines": {
    "node": "^18.0.0"
  }
}

I am currently stuck and unsure about how to proceed 🥲 . Has anyone encountered this issue before or does anyone have insights on possible solutions to this problem?

If I use the --no-optimize flag, the build process successfully completes, but I still encounter the Uncaught SyntaxError: Unexpected token '.' error at runtime.

[mischnic]

This is definitely a bug and shouldn't happen. Please share some code to reproduce this.

Alternatively, build with parcel build --no-optimize and test the result in the browser. If there's a syntax error, post it with the surrounding code, that would be another way to potentially narrow it down.

[avoguga]

I have updated my comment.

And as I said If I use the --no-optimize flag, the build process successfully completes. But I still encounter the Uncaught SyntaxError: Unexpected token '.' error in browser.

The error in browser is:

Uncaught SyntaxError: Unexpected token '.' (at handtalk.min.js:5151:69)

And the line that this points to is:

var $4c0b174ca4ac8906$var$exports = module.exports = function module.exports(iterable, entries, fn, that, ITERATOR) {
    var iterFn = ITERATOR ? function iterFn() {
        return iterable;

I think that it's in module.exports, but I just don't know why, and it won't happen in development mode.

[mischnic]

That sounds like #7090 (comment)