无法在 React 中使用 package.json \"exports\" 导入模块答案

【问题标题】：Can't import module using package.json "exports" in React无法在 React 中使用 package.json \"exports\" 导入模块
【发布时间】：2023-01-17 09:03:10
【问题描述】：

我正在尝试将 (typescript) 包导入 (typescript) React 项目。此模块使用 package.json 文件中的 exports 属性来控制可以从中导入的内容。但是，在我的 React 项目中，我无法使 exports 中导出的路径起作用。相反，我可以从模块中导入任何东西。因此，例如，我在 package.json 中使用 exports 导出路径 ./certificate。但不是像这样导入：

import {test} from "certificationtypes/certificate"

我需要像这样导入：

import {test} from "certificationtypes/src/certificate"

（它还公开了所有其他未使用 exports 指令导出的文件）。

这是模块的package.json：

{
  "name": "inputsvalidator",
  "version": "1.0.0",
  "description": "",
  "main": "./build/src/index.js",
  "exports": {
    "./certificate": "./build/src/certificate.js"
  },
  "scripts": {
    "build": "tsc",
    "prepare": "npm run build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "devDependencies": {
    "typescript": "^4.9.4"
  },
  "dependencies": {
    "@types/validator": "^13.7.10",
    "certificationtypes": "file:../certificationTypes",
    "countries": "file:../../../../../lib/shared/countries",
    "types": "file:../../../../../lib/shared/types",
    "validator": "^13.7.0"
  }
}

奇怪的是，这在 Node.js 项目中确实有效！那么我还应该做些什么来让这项工作在我的 React 项目中发挥作用吗？我确实读过这应该使用 webpack 来支持。

我的 React 项目的 package.json：

{
  "name": "front-end",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.11",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "certificationtypes": "file:../../lib/shared/certificationTypes",
    "countries": "file:../../../../lib/shared/countries",
    "inputsvalidator": "file:../../lib/shared/inputsValidator",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-spinners": "^0.13.7",
    "styled-components": "^5.3.6",
    "typescript": "^4.9.4",
    "validator": "^13.7.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts 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/styled-components": "^5.1.26"
  },
  "proxy": "http://localhost:3003"
}

【问题讨论】：

标签： javascript node.js reactjs typescript node-modules

【解决方案1】：

默认情况下，TypeScript 在导入包时不会考虑 package.json 文件中的 "exports" 字段。

在 TypeScript 4.7 或更高版本中，可以通过在当前项目中将 moduleResolution 设置为 "node16" 或 "nodeNext" 来在编译器选项中显式启用此功能（没有任何导入编辑包可以执行此设置），例如

// tsconfig.json
{
  ...
  "compilerOptions": {
    ...
    "moduleResolution": "node16",
    ...
  },
  ...
}

请注意这样做可能会意外破坏应用程序的其他部分，因为 package.json 中的其他设置也会开始发挥作用。

【讨论】：