Échec de l'analyse du module : mot clé réservé "interface" rencontré

Question

J'essaie d'écrire un composant commun rd-component qui contient des pages communes utilisées dans tous les projets. Lorsque j'importe cette page publique, l'erreur s'affiche :

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

J'ai réalisé un exemple minimal reproductible, qui est un composant simple utilisant une page publique :

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;

C'est 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();

Voici mon package.json avec tous les packages :

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

Voici le résultat d'erreur complet lors de l'exécution de la commande 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

Par défaut, TypeScript (ou éventuellement create-react-app, si vous l'utilisez) ne compile pas les modules de node_modules .

Cela semble être le cas de votre composant Goods :

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

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

La configuration par défaut suppose que tout ce qui se trouve dans node_modules est prêt à être utilisé par des projets JavaScript purs.

Par conséquent, les composants de bibliothèque écrits en TypeScript devraient être convertis en JavaScript.

Cela étant dit, vous pouvez toujours essayer une solution de contournement simple, qui consiste à ajouter un lien symbolique vers le fichier TypeScript de la source de la bibliothèque dans votre projet src.

IIRC, malheureusement, certains moteurs de build sont "trop" intelligents et peuvent même voir les chemins réels via des liens symboliques... auquel cas vous devez inclure manuellement la bibliothèque dans la portée de la compilation.

Bien sûr, la bonne solution est de précompiler votre bibliothèque.