我尝试编写一个公共组件 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; | }
P粉0314920812024-03-22 13:46:49
默认情况下,TypeScript(或者可能是 create-react-app,如果您正在使用的话)不会从 node_modules
编译模块。
您的 Goods
组件似乎就是这种情况:
import Goods from "rd-component/src/component/good/Goods";
{
"dependencies": {
// ...
"rd-component": "0.1.1"
}
}
默认配置假设 node_modules
中的所有内容都已准备好供纯 JavaScript 项目使用。
因此,TypeScript 编写的库组件预计已被转换为 JavaScript。
话虽这么说,您仍然可以尝试一种简单的解决方法,其中包括在项目 src
中添加一个指向库源的 TypeScript 文件的符号链接。
IIRC,不幸的是,某些构建引擎“太”智能,甚至可以通过符号链接查看实际路径...在这种情况下,您必须手动将库包含在编译范围中。
当然,正确的解决方案是预编译您的库。