使用React PDF Viewer与Webpack构建时遇语法错误求助

AI 小北

2026-7-21

解决React PDF Viewer + Webpack构建时的TypeScript语法错误

问题根源

你遇到的props:语法属于TypeScript类型注解，当前Webpack配置排除了对node_modules目录的Babel转译，导致react-pdf-viewer包中未转译的TypeScript代码无法被处理，最终引发构建失败。同时你的Babel预设缺少TypeScript支持，无法解析这类语法。

解决方案

1. 安装Babel TypeScript预设

执行命令安装必要依赖：

npm install --save-dev @babel/preset-typescript

2. 更新Babel配置

修改你的.babelrc，添加TypeScript预设：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

3. 调整Webpack转译范围

修改Webpack配置中module.rules里的JS/JSX规则，让Babel处理react-pdf-viewer相关模块（仅排除该包外的其他node_modules内容）：

{
    test: /\.js(x?)$/,
    // 正则含义：排除node_modules，但不排除@react-pdf-viewer相关子包
    exclude: /node_modules(?!\/@react-pdf-viewer)/,
    use: 'babel-loader',
}

注：若使用的是无@前缀的旧版react-pdf-viewer，请将正则改为/node_modules(?!\/react-pdf-viewer)/

4. 可选：项目TypeScript支持（按需添加）

如果你的项目本身需要TypeScript，可额外安装相关依赖：

npm install --save-dev typescript @types/react @types/react-dom

并在项目根目录创建基础tsconfig.json：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}