react-pdf cannot use import statement outside a module

Question

I'm using react-pdf to render PDFs in React via CRA, and I import it like this:

import { Document, Page } from "react-pdf/dist/esm/entry.webpack";

Now, I'm trying to implement SSR with this webpack config:

// webpack.server.conf

const path = require("path");
const webpackNodeExternals = require("webpack-node-externals");

module.exports = {
  target: "node",
  entry: "./server/index.tsx",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build-server"),
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
    modules: [path.resolve(__dirname, "src"), "node_modules"],
  },
  externals: [webpackNodeExternals()], // excludes node modules in Webpack
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        options: {
          configFile: "tsconfig.server.json",
        },
      },
      // we use url-loader as loader for webpack which transforms files into base64 URIs
      {
        test: /\.(gif|jpe?g|png|ico)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
            },
          },
        ],
      },
      {
        test: /\.(otf|eot|ttf|woff|woff2).*$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
            },
          },
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: ["file-loader"],
      },
      {
        test: /\.svg$/,
        use: ["@svgr/webpack"],
      },
    ],
  },
  optimization: {
    nodeEnv: "development", // NODE_ENV
  },
};

To build my SSR I run:

webpack --config webpack.server.js --mode=development

And I start the server like this:

nodemon ./build-server/bundle.js

Now, everything works fine besides that import string above, I get the following error:

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at eval (webpack:///external_%22react-pdf/dist/esm/entry.webpack%22?:1:18)
    at Object.react-pdf/dist/esm/entry.webpack (/Users/max/Code/Lawplus/docket/build-server/bundle.js:2314:1)
    at __webpack_require__ (/Users/max/Code/Lawplus/docket/build-server/bundle.js:20:30)

Not sure if that helps, but I had exactly the same error when I was introducing jest, that time I fixed it by adding:

  "jest": {
    "moduleNameMapper": {
      "^react-pdf": "react-pdf/dist/umd/entry.jest"
    }
  },

to my package.json. I guess I need to modify my webpack.server.js to make it work, but how?

react-pdf cannot use import statement outside a module

0 Answers0