React-pdf 无法在模块外部使用 import 语句

Question

我用来react-pdf通过 CRA 在 React 中渲染 PDF，然后像这样导入它：

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

现在，我尝试使用以下 webpack 配置来实现 SSR：

// 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
  },
};

为了构建我的 SSR，我运行：

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

我这样启动服务器：

nodemon ./build-server/bundle.js

现在，除了上面的导入字符串之外，一切正常，我收到以下错误：

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)

不确定这是否有帮助，但我在介绍时遇到了完全相同的错误jest，当时我通过添加修复了它：

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

给我的package.json。我想我需要修改我的webpack.server.js才能使其工作，但是如何呢？