Module parse failed: Unexpected token (10:17) #361

RyzorBent · 2023-12-12T07:35:18Z

RyzorBent
Dec 12, 2023

Greetings

i'm getting below error, which i don't know how to fix

[dashboard] ./node_modules/@pdfme/schemas/dist/esm/src/image/uiRender.js 10:17
[dashboard] Module parse failed: Unexpected token (10:17)
[dashboard] File was processed with these loaders:
[dashboard]  * ./node_modules/babel-loader/lib/index.js
[dashboard] You may need an additional loader to handle the result of these loaders.
[dashboard] |   const fileReader = new FileReader();
[dashboard] |   fileReader.onload = e => {
[dashboard] >     if (e.target?.result) {
[dashboard] |       resolve(e.target.result);
[dashboard] |     }

in my MERN stack app

    "react": "^17.0.2",
    "@pdfme/common": "^3.1.5",
    "@pdfme/generator": "^3.1.5",
    "@pdfme/ui": "^3.1.5",
    "antd": "^4.21.4",

code

import { generate } from '@pdfme/generator';

const template = {
  schemas: [
    {
      mainTitle: {
        type: 'text',
        position: {
          y: 80.43,
          x: 22.22,
        },
        width: 96.06,
        height: 86.99,
        rotate: 0,
        alignment: 'left',
        verticalAlignment: 'top',
        fontSize: 63,
        lineHeight: 1,
        characterSpacing: 0,
        fontColor: '#8D95A1',
        backgroundColor: '',
        opacity: 1,
        fontName: 'Roboto',
        dynamicFontSize: {
          min: 4,
          max: 72,
          fit: 'vertical',
        },
      },
      reportDate: {
        type: 'text',
        position: {
          x: 26.98,
          y: 175.15,
        },
        width: 107.71,
        height: 5.76,
        rotate: 0,
        alignment: 'left',
        verticalAlignment: 'top',
        fontSize: 13,
        lineHeight: 1,
        characterSpacing: 0,
        fontColor: '#FFFFFF',
        backgroundColor: '',
        opacity: 1,
        fontName: 'Roboto',
      },
    },
    {},
    {
      summaryText: {
        type: 'text',
        position: {
          y: 83.08,
          x: 32.01,
        },
        width: 114.59,
        height: 167.42,
        rotate: 0,
        alignment: 'center',
        verticalAlignment: 'top',
        fontSize: 13,
        lineHeight: 1,
        characterSpacing: 0,
        fontColor: '#8D95A1',
        backgroundColor: '',
        opacity: 1,
        fontName: 'Roboto',
      },
    },
    {
      notableQuoteText: {
        type: 'text',
        position: {
          y: 92.35,
          x: 32.28,
        },
        width: 146.85,
        height: 28.51,
        rotate: 0,
        alignment: 'left',
        verticalAlignment: 'top',
        fontSize: 33,
        lineHeight: 1,
        characterSpacing: 0,
        fontColor: '#8D95A1',
        backgroundColor: '',
        opacity: 1,
        fontName: 'Roboto',
        dynamicFontSize: {
          min: 4,
          max: 72,
          fit: 'vertical',
        },
      },
    },
    {
      numberOfResponse: {
        type: 'text',
        position: {
          y: 146.31,
          x: 47.62,
        },
        width: 15.1,
        height: 9.99,
        rotate: 0,
        alignment: 'center',
        verticalAlignment: 'top',
        fontSize: 13,
        lineHeight: 1,
        characterSpacing: 0,
        fontColor: '#FFFFFF',
        backgroundColor: '',
        opacity: 1,
        fontName: 'Roboto',
        dynamicFontSize: {
          min: 4,
          max: 72,
          fit: 'vertical',
        },
      },
      numberOfSubscribers: {
        type: 'text',
        position: {
          y: 146.32,
          x: 94.72,
        },
        width: 14.04,
        height: 10,
        rotate: 0,
        alignment: 'center',
        verticalAlignment: 'top',
        fontSize: 13,
        lineHeight: 1,
        characterSpacing: 0,
        fontColor: '#FFFFFF',
        backgroundColor: '',
        opacity: 1,
        dynamicFontSize: {
          min: 4,
          max: 72,
          fit: 'vertical',
        },
      },
      numberOfOptOuts: {
        type: 'text',
        position: {
          y: 146.84,
          x: 141.55,
        },
        width: 12.99,
        height: 10,
        rotate: 0,
        alignment: 'center',
        verticalAlignment: 'top',
        fontSize: 13,
        lineHeight: 1,
        characterSpacing: 0,
        fontColor: '#FFFFFF',
        backgroundColor: '',
        opacity: 1,
        dynamicFontSize: {
          min: 4,
          max: 72,
          fit: 'vertical',
        },
      },
    },
    {},
    {
      suggestion: {
        type: 'text',
        position: {
          x: 27.25,
          y: 99.74,
        },
        width: 165.38,
        height: 63.97,
        rotate: 0,
        alignment: 'left',
        verticalAlignment: 'top',
        lineHeight: 1,
        characterSpacing: 0,
        fontColor: '#FFFFFF',
        backgroundColor: '',
        opacity: 1,
        fontName: 'Roboto',
        fontSize: 18,
        dynamicFontSize: {
          min: 4,
          max: 72,
          fit: 'vertical',
        },
      },
      additionalSuggestion: {
        type: 'text',
        position: {
          y: 193.68,
          x: 26.19,
        },
        width: 167.77,
        height: 52.06,
        rotate: 0,
        alignment: 'left',
        verticalAlignment: 'top',
        fontSize: 13,
        lineHeight: 1,
        characterSpacing: 0,
        fontColor: '#FFFFFF',
        backgroundColor: '',
        opacity: 1,
        fontName: 'Roboto',
        dynamicFontSize: {
          min: 4,
          max: 72,
          fit: 'vertical',
        },
      },
    },
    {
      conclusion: {
        type: 'text',
        position: {
          y: 88.11,
          x: 32.54,
        },
        width: 116.17,
        height: 160.01,
        rotate: 0,
        alignment: 'center',
        verticalAlignment: 'top',
        fontSize: 13,
        lineHeight: 1,
        characterSpacing: 0,
        fontColor: '#8D5BA5',
        backgroundColor: '',
        opacity: 1,
        dynamicFontSize: {
          min: 4,
          max: 72,
          fit: 'vertical',
        },
        fontName: 'Roboto',
      },
    },
  ],
  basePdf:
    'data:application/pdf;base64,JVBERi0xLjQKJfbk/N8KMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovVmVyc2l

const plugins = { text, qrcode: barcodes.qrcode };

const PDFReport = async (inputs) => {
  const pdf = await generate({ template, plugins, inputs });
  return new Blob([pdf.buffer], { type: 'application/pdf' });
};

export default PDFReport;

hand-dot · 2023-12-12T07:55:00Z

hand-dot
Dec 12, 2023
Maintainer

can you remove {}, from template?

5 replies

RyzorBent Dec 12, 2023
Author

Thank you for your speedy response :)

I removed the 3x {}, from the template object. The issue is still happening.

chatGPT 4 suggesting i create config-overrides.js file but i'm not seeing anything relating to this suggestion on the pdfme documentation.

I also searched within github if there's any repo using "@pdfme/common": "^3.1.5", "@pdfme/generator": "^3.1.5", so that i could learn from it, i'm not having any luck finding such repos which are not using typescript.

hand-dot Dec 12, 2023
Maintainer

can you create minimal repro code on a https://stackblitz.com/?

RyzorBent Dec 12, 2023
Author

Apologies,
I'm not able to get a sample going at stackbliz, but i just started an instance on gitpod and to my surprise the same approach is working.

here is the repo of the sample code -> https://github.com/RyzorBent/pdfme-demo

My main app's package.json

{
  "name": "surveyr-dashboard",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.6.2",
    "@pdfme/common": "^3.1.5",
    "@pdfme/generator": "^3.1.5",
    "@pdfme/ui": "^3.1.5",
    "@sentry/react": "^7.43.0",
    "@sentry/tracing": "^7.43.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "ace-builds": "^1.10.0",
    "antd": "^4.21.4",
    "apexcharts": "^3.27.1",
    "brace": "^0.11.1",
    "dayjs": "^1.11.5",
    "html-to-image": "^1.11.11",
    "html2canvas": "^1.4.1",
    "install": "^0.13.0",
    "js-file-download": "^0.4.12",
    "js-yaml": "^4.1.0",
    "jspdf": "^2.5.1",
    "jszip": "^3.10.1",
    "lodash": "^4.17.21",
    "md5": "^2.3.0",
    "papaparse": "^5.4.1",
    "qrcode.react": "^3.1.0",
    "rc-field-form": "^1.29.1",
    "react": "^17.0.2",
    "react-ace": "^10.1.0",
    "react-apexcharts": "^1.3.9",
    "react-confetti": "^6.1.0",
    "react-dom": "^17.0.2",
    "react-password-strength-bar": "^0.4.1",
    "react-redux": "^8.0.2",
    "react-router-dom": "^5.3.3",
    "react-router-hash-link": "^2.4.3",
    "react-scripts": "4.0.3",
    "redux": "^4.2.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.4.1",
    "styled-components": "^5.3.0",
    "web-vitals": "^1.1.2",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts --openssl-legacy-provider build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:4800",
  "secure": "false",
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/preset-env": "^7.23.6",
    "@babel/preset-react": "^7.23.3"
  }
}
```

i installed these ```
"devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/preset-env": "^7.23.6",
    "@babel/preset-react": "^7.23.3"
  }
``` today as an effort to try solve the issue.

But clearly the issue IS NOT on pdfme, but somewhere in my app configs.

hand-dot Dec 13, 2023
Maintainer

I tried to clone and build and reproduce your repo.
but i cant reproduce... (node: v20.10.0, npm: 10.2.3, did not use yarn.)

can you tell me env and step to repro .

RyzorBent Dec 13, 2023
Author

I had to do the following to get it working,

I moved away from CRA and am currently in the process of migrating to Vite, because i saw that the pdfme library works perfectly in React 18.0.2.
[dashboard] * ./node_modules/babel-loader/lib/index.js also pushed me to move away from CRA / babel loaders etc within my MERN stack.

So it the issue is fixed by this migration, as i could see clearly that the library was having conflicts with within my app, as i have lots of things installed.

THANK YOU SO MUCH FOR YOUR PROMPT FEEDBACK!! I really appreciate it and was motivated a lot by it.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Module parse failed: Unexpected token (10:17) #361

{{title}}

Replies: 1 comment 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Module parse failed: Unexpected token (10:17) #361

RyzorBent Dec 12, 2023

Replies: 1 comment · 5 replies

hand-dot Dec 12, 2023 Maintainer

RyzorBent Dec 12, 2023 Author

hand-dot Dec 12, 2023 Maintainer

RyzorBent Dec 12, 2023 Author

hand-dot Dec 13, 2023 Maintainer

RyzorBent Dec 13, 2023 Author

RyzorBent
Dec 12, 2023

Replies: 1 comment 5 replies

hand-dot
Dec 12, 2023
Maintainer

RyzorBent Dec 12, 2023
Author

hand-dot Dec 12, 2023
Maintainer

RyzorBent Dec 12, 2023
Author

hand-dot Dec 13, 2023
Maintainer

RyzorBent Dec 13, 2023
Author