我尝试编写一个公共组件 rd-component ,其中包含一些跨所有项目使用的公共页面。当我导入此公共页面时,显示错误:
Module parse failed: The keyword 'interface' is reserved (15:0)
我做了一个最小的重现示例,这是使用公共页面的简单组件:
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"
}
}
这是运行命令 npm run build 时的完整错误输出:
> 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;
| } Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
默认情况下,TypeScript(或者可能是 create-react-app,如果您正在使用的话)不会从
node_modules编译模块。您的
Goods组件似乎就是这种情况:{ "dependencies": { // ... "rd-component": "0.1.1" } }默认配置假设
node_modules中的所有内容都已准备好供纯 JavaScript 项目使用。因此,TypeScript 编写的库组件预计已被转换为 JavaScript。
话虽这么说,您仍然可以尝试一种简单的解决方法,其中包括在项目
src中添加一个指向库源的 TypeScript 文件的符号链接。IIRC,不幸的是,某些构建引擎“太”智能,甚至可以通过符号链接查看实际路径...在这种情况下,您必须手动将库包含在编译范围中。
当然,正确的解决方案是预编译您的库。