Module parse failed: Unexpected token - npm-pdfreader

[marek8623]

Hi everyone,

when importing

import { PdfReader } from 'pdfreader';

I am getting the following error:

ERROR in ./node_modules/pdfreader/index.js 3:9
Module parse failed: Unexpected token (3:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export { PdfReader } from "./PdfReader.js";
| export { Rule } from "./Rule.js";
> export * as LOG from "./lib/LOG.js";
| import * as parseTableExports from "./lib/parseTable.js";

And this is the index.js file where the error occured:

export { PdfReader } from "./PdfReader.js";
export { Rule } from "./Rule.js";
export * as LOG from "./lib/LOG.js";
import * as parseTableExports from "./lib/parseTable.js";
export const parseTable = Object.assign(
  parseTableExports.parseTable,
  parseTableExports
);
import * as parseColumnsExports from "./lib/parseColumns.js";
export const parseColumns = Object.assign(
  parseColumnsExports.parseColumns,
  parseColumnsExports
);
export { SequentialParser } from "./lib/SequentialParser.js"; // experimental
export { TableParser } from "./lib/TableParser.js";
export { ColumnsParser } from "./lib/ColumnsParser.js";

This is webpack.config.js:

module: {
  strictExportPresence: true,
  rules: [
    {
      parser: {
        requireEnsure: false
      }
    },
    {
      oneOf: [
        {
          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
          loader: require.resolve('url-loader'),
          options: {
            limit: imageInlineSizeLimit,
            name: 'static/media/[name].[hash:8].[ext]',
          },
        },
        {
          test: /\.(js|mjs|jsx|ts|tsx)$/,
          include: path.resolve(__dirname),
          exclude: /node_modules/,
          loader: require.resolve('babel-loader'),
          options: {
            customize: require.resolve(
              'babel-preset-react-app/webpack-overrides'
            ),
            plugins: [
              [
                require.resolve('babel-plugin-named-asset-import'),
                {
                  loaderMap: {
                    svg: {
                      ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                    },
                  },
                },
              ],
              [
                require.resolve("babel-plugin-styled-components"),
                {
                  ssr: false,
                  displayName: true,
                  fileName: false,
                },
              ]
            ],
            cacheDirectory: true,
            cacheCompression: false,
            compact: isEnvProduction,
          },
        },
        {
          loader: require.resolve('file-loader'),
          exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
          options: {
            name: 'static/media/[name].[hash:8].[ext]',
          },
        },
      ],
    },
  ]
},

My project includes:

"react": "^17.0.2",
"react-dom": "^17.0.2",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.3"

Can someone help me and guide me how to properly setup webpack in order to use plugin like npm-pdfreader and get rid of the mentioned error?

Thank you very much for your help and guidance.

UPDATE:
I tried also this solution #10460 but the error is still there...

[alexander-akait]

You need to use webpack v5 to handle new syntax

[marek8623]

@alexander-akait So there is no workaround for this in webpack v4? The only way is to update everything to use webpack v5?

[alexander-akait]

No workarounds, only webpack v5, webpack v4 is deprecated and only security fixes

[kenobi-io]

Same issue. I use webpack 5.91.0, webpack-cli 5.1.4