SyntaxError: Unexpected token 'export'

Describe the bug I get the following error when trying to import the package like so import { downloadZip } from "client-zip";:

SyntaxError: Unexpected token 'export'
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:94:18)
    at Object.client-zip (/Users/ericamshukov/Projects/dt_bridge_pipetrekker_spa/.next/server/pages/index.js:20570:18) {
  page: '/'
}

To Reproduce Steps to reproduce the behavior:

1. Import in TypeScript file
2. npm run
3. SyntaxError: Unexpected token 'export'

Additional context I am developing a project in NextJS and TypeScript, but everything else is working properly.

[venkatd]

@Touffy I was helping a friend debug something similar

Unfortunately with nextjs the solution isn’t simple. There are two things that can be done in nextjs to use this:

You can use a nextjs dynamic component which is only rendered client side:

const FileAttachmentLink = dynamic<Attachment>(
  () => import('./file-attachment-link').then((m) => m.FileAttachmentLink),
  {
    ssr: false
  }
)

Then, in that component, you can use a dynamic import to avoid it being included on the server. For example in a callback, you could do the following:

export function DownlaodFileLink() {
  async function onDownload() {
    // import the library dynamically at runtime
    const { downloadZip } = await import('client-zip')

    const code = await fetch(
      'https://raw.githubusercontent.com/Touffy/client-zip/master/src/index.ts'
    )
    const intro = {
      name: 'intro.txt',
      lastModified: new Date(),
      input: 'Hello. This is the client-zip library.'
    }

    // get the ZIP stream in a Blob
    const blob = await downloadZip([intro, code]).blob()

    // make and click a temporary link to download the Blob
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = 'test.zip'
    link.click()
    link.remove()
  }

  return (
    <a onClick={onDownload}>
      {filename}
    </a>
  )
}

[Touffy]

The faster alternative in Node is to call a (fast) native Zip program. I am not an expert on those, and I’m sure there are already performance reviews you can find elsewhere. I don’t mean to be rude, I just don’t want to give you poor advice from a lack of research, and I don’t see why I should do the research. Zipping on the server-side is off-topic for this project. It happens to work in Deno, yes, but that wasn’t even intended.

However, there is a general explanation I can give you. Native programs can use CPU features that are not available to client-zip (because they’re not in JavaScript or WebAssembly), such as a hardware CRC32 primitive, and 256-bit vector operations. Also, Node and native programs have efficient random access to the local filesystem, which means they don’t have to use streaming mode if zipping from there, and they can copy data from one part of the filesystem to another with efficient kernel calls instead of moving it through userspace buffers. As you can see on my benchmark, the native Zip program I used is much faster than client-zip and other JavaScript alternatives. However, I can’t say if it’s the fastest, or the best suited for integration with Node.