修复自定义React+TypeScript组件库的导入问题

我按教程搭建了React+TypeScript自定义组件库，打包发布到Nexus仓库后，在其他项目中作为依赖引入时，组件能正常导入，但导出Props类型的export type语法会触发编译错误，具体表现为语法解析失败。试过用Rollup打包但觉得过于复杂，希望实现教程里的无缝导入效果。

报错信息 #

ERROR in ./node_modules/java-multima-framework/src/components/form/index.ts 8:7

Module parse failed: Unexpected token (8:7)
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.
| export { default as JmfFormTextField } from "./JmfFormTextField";
| 
> export type { JmfFormAutocompleteProps } from "./JmfFormAutocomplete.types";
| export type { JmfFormCheckboxProps } from "./JmfFormCheckbox.types";
| export type { JmfFormSelectProps } from "./JmfFormSelect.types";

组件库关键代码（form目录下index.ts） #

export { default as JmfFormAutocomplete } from "./JmfFormAutocomplete";
export { default as JmfFormAutocompleteMultiple } from "./JmfFormAutocompleteMultiple";
export { default as JmfFormCheckbox } from "./JmfFormCheckbox";
export { default as JmfFormSelect } from "./JmfFormSelect";
export { default as JmfFormSwitch } from "./JmfFormSwitch";
export { default as JmfFormTextField } from "./JmfFormTextField";

export type { JmfFormAutocompleteProps } from "./JmfFormAutocomplete.types";
export type { JmfFormCheckboxProps } from "./JmfFormCheckbox.types";
export type { JmfFormSelectProps } from "./JmfFormSelect.types";
export type { JmfFormSwitchProps } from "./JmfFormSwitch.types";
export type { JmfFormTextFieldProps } from "./JmfFormTextField.types";
export type { ReactHookFormCommonPropsTypes } from "./ReactHookFormCommonProps.types";

组件库配置文件 #

tsconfig.json #

{
  "extends": "@tsconfig/recommended/tsconfig.json",
  "compilerOptions": {
    "jsx": "preserve",
    "resolveJsonModule": true
  },
  "include": ["src/**/*"]
}

package.json #

{
  "name": "java-multima-framework",
  "version": "0.1.0",
  "author": "Adam Ostrožlík",
  "main": "src/index.ts",
  "files": [
    "src/**/*"
  ],
  "directories": {
    "src": "src"
  },
  "publishConfig": {
    "registry": "http://lnx-nexusrep.mm.int/repository/npm-releases/"
  },
  "scripts": {
    "prepare": "cd .. && husky install frontend/.husky",
    "storybook": "start-storybook -p 6006 -s ./public",
    "build-storybook": "build-storybook -s ./public",
    "openapi-taxguru": "openapi -i openapi/jmf-openapi.json -o src/backend --exportCore false --exportServices false"
  },
  "lint-staged": {
    "*/**/*.{js,ts,jsx,tsx,x1}": "eslint --fix",
    "*/**/*.{js,ts,jsx,tsx,x2}": "prettier --write -u"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      },
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-react": "^7.18.6",
    "@storybook/addon-actions": "^6.5.13",
    "@storybook/addon-essentials": "^6.5.13",
    "@storybook/addon-interactions": "^6.5.13",
    "@storybook/addon-links": "^6.5.13",
    "@storybook/builder-webpack5": "^6.5.13",
    "@storybook/manager-webpack5": "^6.5.13",
    "@storybook/node-logger": "^6.5.13",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.13",
    "@storybook/testing-library": "^0.0.13",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@tsconfig/recommended": "^1.0.1",
    "@types/jest": "^29.2.3",
    "@typescript-eslint/eslint-plugin": "^5.44.0",
    "@typescript-eslint/parser": "^5.44.0",
    "babel-plugin-named-exports-order": "^0.0.2",
    "eslint": "^8.28.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-import-resolver-typescript": "^3.5.2",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-n": "^15.3.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-storybook": "^0.6.7",
    "husky": "^8.0.2",
    "lint-staged": "^13.0.3",
    "openapi-typescript-codegen": "^0.23.0",
    "prettier": "2.7.1",
    "react-scripts": "5.0.1",
    "tsconfig-paths-webpack-plugin": "^4.0.0",
    "web-vitals": "^2.1.4",
    "webpack": "^5.75.0"
  },
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@hookform/resolvers": "^2.9.10",
    "@mui/icons-material": "^5.10.16",
    "@mui/material": "^5.10.17",
    "@types/node": "^18.11.12",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.9",
    "axios": "^1.2.0",
    "i18next": "^22.0.6",
    "material-react-table": "^1.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.39.1",
    "react-i18next": "^12.0.0",
    "react-jwt": "^1.1.7",
    "react-router-dom": "^6.4.2",
    "typescript": "^4.9.3",
    "yup": "^0.32.11"
  }
}

内容的提问来源于stack exchange，提问作者Adam Ostrožlík