Trying to use react-pdf with typescript

Question

I have a React app built with craco that I want to add react-pdf to display PDF files in a react component.

I'm getting the following error:

I've added the following to the craco.config.js file which apparently replaces the webpack.config

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1c48f2' },
            modules: true,
            javascriptEnabled: true
          }
        },
      }
    },
    { plugin: CracoTerserOverridePlugin }
  ],
  webpack: {
    options: {
      presets: [
        "@babel/preset-env",
        "@babel/preset-react"
      ],
      plugins: [
          [
            "@babel/plugin-proposal-class-properties",
            "@babel/plugin-syntax-class-properties"
          ]
      ],
    },
    plugins: process.env.NODE_ENV === 'production' ? [
      ...
    }),
  ] : [],
  }
};

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

I've tried positions within this object, but nothing seems to fix it. I'm assuming I need to add something else.

Can you edit your post to include your tsconfig.json file? — EpicPuppy613
– EpicPuppy613, Commented Feb 8, 2023 at 22:09
Try adding node_modules to the exclude property in your tsconfig.json. — EpicPuppy613
– EpicPuppy613, Commented Feb 8, 2023 at 22:11
That's interesting because it seems that the compilation error is coming from typescript trying to compile some of the node module files. — EpicPuppy613
– EpicPuppy613, Commented Feb 8, 2023 at 22:16

sancelot · Accepted Answer · 2023-02-09 17:46:30Z

1

You are targeting "es5" , but you are using a module using "ES6" properties. privateClassProperties are only available from "ES6"

Is it possible for you to target "ES6" ?

Difficult to tell it is in the tsc transpilation phase or babel phase.

If it is during babel phase, you will need a .babelrc file, you may need a .babelrc specifying target browser version, if it does not work in tsconfig.json

 "presets": [
    ["babel-preset-env", {
        "targets": {
            "browsers": "last 2 versions"
        },
    }]
 ]

edited Feb 9, 2023 at 17:46

answered Feb 9, 2023 at 17:38

sancelot

2,07414 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trying to use react-pdf with typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related