引入公共组件rd-component遇Module parse failed: interface关键字报错求助

我开发了一个包含跨项目通用页面的公共组件包rd-component，在项目中引入该包的页面组件时，执行npm run build命令出现编译错误。

最小复现代码 #

使用公共组件的Chat组件代码 #

import './App.css';
import React from 'react';
import Goods from "rd-component/src/component/good/Goods";

const Chat: React.FC = (props) => {
  return (<Goods></Goods>);
}

export default Chat;

Index.tsx代码 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Chat from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Chat />
  </React.StrictMode>
);

reportWebVitals();

项目package.json #

{
  "name": "react-demo",
  "version": "0.1.0",
  "private": true,
  "config-overrides-path": "src/config/config-overrides.js",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@textea/json-viewer": "^2.16.2",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.21",
    "@types/react": "^18.0.30",
    "@types/react-dom": "^18.0.11",
    "antd": "^5.4.0",
    "prismjs": "^1.29.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-syntax-highlighter": "^15.5.0",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4",
    "rd-component": "0.1.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-syntax-highlighter": "^15.5.6",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.2.1"
  }
}

完整错误输出 #

> react-demo@0.1.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.

Module parse failed: The keyword 'interface' is reserved (15:0)
File was processed with these loaders:
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| import { doPay } from "@/service/pay/PayService";
| 
> interface IGoodsProp {
|   appId: string;
| }

问题原因 #

核心问题是rd-component包发布了未编译的TypeScript源码（包含interface这类TS专属语法），而Create React App默认不会编译node_modules目录下的TS文件，导致Webpack无法解析该语法，抛出关键字保留错误。

解决方法 #

方法1：优化公共组件包发布流程（推荐） #

确保发布到npm的是编译后的JS代码，而非TS源码：

• 在rd-component项目的tsconfig.json中设置"outDir": "./dist"，指定编译输出目录
• 在rd-component的package.json中配置：
  • "main": "./dist/index.js"（指向编译后的入口文件）
  • "types": "./dist/index.d.ts"（提供类型声明）
• 执行tsc编译后，仅将dist目录、package.json、README.md等必要文件发布到npm，排除TS源码文件

方法2：修改当前项目Webpack配置，编译rd-component #

如果暂时无法修改公共组件包，可通过react-app-rewired和customize-cra调整Webpack配置：

1. 在src/config/config-overrides.js中添加代码：

const { override, addBabelLoader } = require('customize-cra');

module.exports = override(
  addBabelLoader({
    test: /\.(ts|tsx)$/,
    include: /node_modules\/rd-component/,
    presets: [
      '@babel/preset-react',
      '@babel/preset-typescript'
    ]
  })
);

2. 安装依赖：

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

3. 重新执行npm run build

方法3：临时修改组件引入路径 #

如果rd-component已存在编译后的输出目录，直接引入编译后的文件：

// 替换原引入路径
import Goods from "rd-component/dist/component/good/Goods";

内容的提问来源于stack exchange，提问作者Dolphin