Gagal menghuraikan modul: Kata kunci terpelihara 'antara muka' ditemui

Question

Saya cuba menulis komponen biasa rd-component yang mengandungi beberapa halaman biasa yang digunakan merentas semua projek. Apabila saya mengimport halaman awam ini ia menunjukkan ralat:

Module parse failed: The keyword 'interface' is reserved (15:0)

Saya membuat contoh minimum yang boleh diterbitkan semula, iaitu komponen mudah menggunakan halaman awam:

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;

Ini ialah 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();

Ini adalah pakej.json saya dengan semua pakej:

{
  "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"
  }
}

Ini adalah output ralat penuh semasa menjalankan arahan 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;
| }

Answer 1

Secara lalai, TypeScript (atau mungkin create-react-app, jika anda menggunakannya) tidak menyusun modul daripada node_modules .

Ini nampaknya berlaku dengan komponen Goods anda:

import Goods from "rd-component/src/component/good/Goods";

{
  "dependencies": {
    // ...
    "rd-component": "0.1.1"
  }
}

Konfigurasi lalai menganggap bahawa semua dalam node_modules sedia untuk digunakan oleh projek JavaScript tulen.

Oleh itu, komponen perpustakaan yang ditulis dalam TypeScript dijangka akan ditukar kepada JavaScript.

Walau bagaimanapun, anda masih boleh mencuba penyelesaian mudah, yang melibatkan penambahan symlink pada fail TypeScript sumber perpustakaan dalam projek anda src.

IIRC, malangnya sesetengah enjin binaan "terlalu" pintar malah boleh melihat laluan sebenar melalui symlinks... dalam kes ini anda perlu memasukkan perpustakaan secara manual dalam skop kompilasi.

Sudah tentu, penyelesaian yang betul adalah dengan menyusun semula perpustakaan anda.