Pdfjs-dist 'unexpected token' error with Jest

[alzca1]

I am having some problems while doing some testing with react-testing-library. Apparently, there must be an issue with the file pdf.js:

` FAIL src/pages/Ayuda/test/Ayuda.test.js ● Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

/Users/alzca/Code/frio/logistica-cfrio-frontfriocliente-app-nodejs/node_modules/@bundled-es-modules/pdfjs-dist/build/pdf.js:27612
export default pdf_1;
^^^^^^

SyntaxError: Unexpected token 'export'

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (node_modules/@mikecousins/react-pdf/dist/react-pdf.cjs.development.js:7:29)

Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 2.382s, estimated 5s`

How can I fix it ? I added a "transformIgnorePatterns" to the test script in my package.json but then I cannot use the react-pdf module to test things like checking that the pdf file loaded correctly (onDocumentLoadFail).

Thanks in advance!

[alangf]

having the same issue, using latest next version with node 18.4.0

[travisanderson]

Just installed into my next.js project, and I get similar error. I just did a yarn add and copy/pasted the example from the readme, and I get SyntaxError: Unexpected token 'export'

[travisanderson]

My node version is v14.20.0, and here is my package.json:

{
  "name": "yfb-platform",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "stripe:listen": "stripe listen --forward-to=localhost:3000/api/webhooks --project-name=saas-starter"
  },
  "dependencies": {
    "@mikecousins/react-pdf": "^5.5.1",
    "@stripe/stripe-js": "1.22.0",
    "@supabase/supabase-auth-helpers": "^1.2.3",
    "chart.js": "^3.9.1",
    "classnames": "2.3.1",
    "crawler-request": "^1.2.2",
    "framer-motion": "^6.5.1",
    "fs": "^0.0.1-security",
    "moment": "^2.29.3",
    "next": "^12.0.9",
    "pdfjs-dist": "^2.13.216",
    "react": "17.0.2",
    "react-chartjs-2": "^4.3.1",
    "react-countup": "^6.3.0",
    "react-currency-input-field": "^3.6.4",
    "react-dom": "17.0.2",
    "react-dropzone": "^14.2.1",
    "react-hook-form": "^7.29.0",
    "react-hot-toast": "^2.2.0",
    "react-merge-refs": "1.1.0",
    "react-scroll": "^1.8.7",
    "react-select": "^5.2.2",
    "sass": "^1.49.9",
    "stripe": "8.201.0",
    "swr": "1.2.0",
    "tailwindcss": "3.0.18",
    "worker-loader": "^3.0.8"
  },
  "devDependencies": {
    "@types/classnames": "2.3.1",
    "@types/node": "^17.0.13",
    "@types/react": "^17.0.38",
    "autoprefixer": "^10.4.2",
    "postcss": "8.4.5",
    "prettier": "^2.6.2",
    "typescript": "^4.5.5"
  },
  "prettier": {
    "arrowParens": "always",
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "none"
  }
}

[travisanderson]

I also just updated my pdfjs-dist to 2.15.349 to see if that would help...it did not.

[mikecousins]

Let me know if this is fixed in the latest version.