NX Monorepo中Angular应用调用React库JSX文件报错求助

针对你遇到的模块找不到和类型声明错误，按以下步骤配置即可：

1. 配置TypeScript识别JSX文件 #

在React库的tsconfig.lib.json（或根目录tsconfig.base.json）中调整以下配置：

• 在compilerOptions中添加：

  "jsx": "react",
  "allowJs": true,
  "moduleResolution": "node"
  

• 在include数组中追加"**/*.jsx"，确保TypeScript扫描到JSX文件：

  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"]
  

2. 修复模块解析路径问题 #

方案A：明确导入扩展名 #

在index.ts中导入JSX文件时，直接指定.jsx扩展名：

export { default as JsxSample } from './lib/jsx-sample.jsx';

方案B：配置自动解析扩展名 #

在NX项目的自定义webpack配置（或根目录webpack.config.js）中，添加JSX到扩展名列表：

module.exports = {
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
};

如果是React库的专属配置，也可以在project.json的build目标options中添加：

"extensions": [".ts", ".tsx", ".js", ".jsx"]

3. 解决JSX文件类型声明缺失问题 #

方案A：全局声明JSX模块 #

在项目根目录创建typings/jsx.d.ts文件，内容如下：

declare module '*.jsx' {
  import React from 'react';
  const Component: React.FC | React.ComponentType<any>;
  export default Component;
}

然后在tsconfig.base.json的include中追加"typings/**/*.d.ts"。

方案B：为单个JSX文件添加声明 #

在JSX文件同目录下创建jsx-sample.d.ts，内容示例：

declare module './jsx-sample' {
  import React from 'react';
  const JsxSample: React.FC;
  export default JsxSample;
}

4. 调整Angular应用的构建配置 #

因为主应用是Angular 13，需配置其webpack支持JSX编译：

1. 安装依赖：

npm install --save-dev babel-loader @babel/core @babel/preset-react

2. 在Angular应用根目录创建extra-webpack.config.js：

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.jsx', '.js', '.ts', '.tsx'],
  },
};

3. 修改angular.json中Angular应用的build目标，添加自定义webpack配置：

"build": {
  "options": {
    // 其他配置...
    "customWebpackConfig": {
      "path": "./extra-webpack.config.js"
    }
  }
}

4. 在Angular应用的tsconfig.app.json中添加：

"compilerOptions": {
  "allowJs": true,
  "jsx": "react"
},
"include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"]

5. 验证配置 #

执行以下命令重新构建React库并启动Angular应用：

nx build mylib
nx serve your-angular-app-name

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