Unexpected token error when deploying with @sls-next/serverless-component@3.5.2

Issue Summary

We have been successfully deploying with serverless-nextjs for a while now. Today we started to experience issues using serverless-component@3.5.2. We let sls-next/serverless-component use latest. The last successful deploy ran at Oct 27, 2021 at 4:14 pm PST. We have not changed the infrastructure, CICD or serverless configuration.

Actual behavior

serverless command fails at a js error from .serverless/components/registry/npm/@sls-next/serverless-component@3.5.2/node_modules/@sls-next/domain/utils.js:505

  error:
  /home/runner/.serverless/components/registry/npm/@sls-next/serverless-component@3.5.2/node_modules/@sls-next/domain/utils.js:505
  const isVersionValid = minimumProtocolVersion.match(validMinimumProtocolVersions)?.length === 1

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/runner/.serverless/components/registry/npm/@sls-next/serverless-component@3.5.2/node_modules/@sls-next/domain/serverless.js:15:5)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)

Expected behavior

serverless command successfully deploys the nextjs site to our AWS account.

Steps to reproduce

A copy of the serverless.yml is included with sensitive info redacted:

name: MySite-dev

MySite-dev:
  component: "@sls-next/serverless-component" 
  inputs:
    domain: ['dev', 'example.com']
    certificateArn: "arn:aws:acm:us-east-1:xxx:certificate/xxxx"
    publicDirectoryCache: false
    bucketName: mysite-dev
    name:
      defaultLambda: mysite-dev-lambda
      apiLambda: mysite-dev-apilambda
      imageLambda: mysite-dev-imagelambda

Screenshots/Code/Configuration/Logs

Here is the output when it fails:

  DEBUG ─ Creating invalidations on E1ZMH04ZRANWXX.

  error:
  /home/runner/.serverless/components/registry/npm/@sls-next/serverless-component@3.5.2/node_modules/@sls-next/domain/utils.js:505
  const isVersionValid = minimumProtocolVersion.match(validMinimumProtocolVersions)?.length === 1
                                                                                    ^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/runner/.serverless/components/registry/npm/@sls-next/serverless-component@3.5.2/node_modules/@sls-next/domain/serverless.js:15:5)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at NextjsComponent.load (/home/runner/.serverless/components/registry/npm/@sls-next/serverless-component@3.5.2/node_modules/@serverless/core/src/Component.js:108:24)

Previously there were no errors. Invalidation is successful according to CloudFront.

Versions

• OS/Environment: Ubuntu via Github Actions
• @sls-next/serverless-component version: latest, 3.2.0, 3.3.0, 3.4.0, 3.5.0
• Next.js version: 10.1.3

Additional context

We run yarn install and npm install serverless -g before syncing down the .serverless state file from s3 and running the serverless command to deploy.

          npm install serverless -g
          yarn install --frozen-lockfile

Checklist

• You have reviewed the README and FAQs, which answers several common questions.
• You have reviewed our DEBUGGING wiki and have tried your best to include complete information and reproduction steps (including your configuration) as is possible.
• You have first tried using the most recent latest or alpha @sls-next/serverless-component release version, which may have already fixed your issue or implemented the feature you are trying to use. Note that the old serverless-next.js component and the serverless-next.js plugin are deprecated and no longer maintained.

[seanmccartneysynctree]

Thanks @dphang 💃 I should have included we had been trying Node 12, 14, and 16 with latest sls-next with no luck.

Using Node 14 and 3.5.3-alpha.1 has resolved our issue. I’m guessing we will need to update our serverless.yml when a new version is released.

[dphang]

Yea, not sure why as Node14 should work with optional chaining…but with the proper transpiling to ES2019 issues like this should hopefully be avoidable in the future.

Ideally you should pin to a specific version instead of latest since while I do try to have good test coverage, occasionally there may be some issues…