javascript - react 汇总 : 'name' is not exported by node_modules/

Question

我正在尝试从我的组件制作一个库/包。
技术栈是:React、Typescript... 和一堆其他依赖项。
我正在使用 Rollup，当我尝试构建包时，出现以下错误:

[!] Error: 'DisplayHint' is not exported by ../node_modules/@bestowinc/enroll-sdk-core/build/lib/question-common.js, imported by ../src/utils/answerTypeConversions.ts https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module

卷起:

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import external from 'rollup-plugin-peer-deps-external';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import reactSvg from 'rollup-plugin-react-svg';
import typescript from 'rollup-plugin-typescript2';
import svg from 'rollup-plugin-svg';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import replace from '@rollup/plugin-replace';
import urlResolve from 'rollup-plugin-url-resolve';

export default [
  {
    input: './src/index.ts',
    output: [
      {
        file: './dist/index.js',
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: './dist/index.es.ts',
        format: 'es',
        exports: 'named',
        sourcemap: true,
      },
    ],
    plugins: [
      typescript({
        tsconfig: './tsconfig.build.json',
        verbosity: 3,
        clean: true,
        check: true,
      }),
      babel({
        exclude: ['/node_modules'],
        presets: [
          '@babel/preset-react',
          '@babel/preset-flow',
          '@babel/preset-env',
        ],
        extensions: ['.ts', '.tsx'],
      }),
      commonjs({
        include: './node_modules',
        dynamicRequireTargets: [
          // include using a glob pattern (either a string or an array of strings)
          '/node_modules/@bestowinc/enroll-sdk-core/build/lib/question-common.js',
          './node_modules/@bestowinc/enroll-sdk-core/build/lib/question-common.js',
        ],
      }),
      resolve({
        browser: true,
        preferBuiltins: true,
        mainFields: ['browser'],
      }),
      urlResolve(),
      postcss({
        plugins: [],
        minimize: true,
      }),
      external(),
      terser(),
      reactSvg({
        jsx: false,
        include: ['custom.d.ts'],
        exclude: null,
      }),
      svg(),
      replace({
        include: ['../src/icons/**'],
        preventAssignment: true,
        // Replace ReactComponent to allow resolution of SVG files under Rollup
        ReactComponent: 'default',
      }),
      json(),
    ],
  },
];

显示提示:

/**
 * An indication of how clients should display a question.
 *
 * This is inferred from the answer_format and answer_display api properties.
 * Those properties should not be used directly, and clients should rely instead
 * solely on DisplayHint.
 */
export declare const DisplayHint: {
    readonly ButtonGroup: "DisplayHint::ButtonGroup";
    readonly Checkbox: "DisplayHint::Checkbox";
};
export declare type DisplayHint = typeof DisplayHint[keyof typeof DisplayHint];

Answer 1

看起来像 DisplayHint是 TS 类型/接口(interface)，而不是导出的 JS 值。
Rollup 本身是一个捆绑器，而不是 TS 语言分析器。它无法判断命名导出是具体的 JS 值还是仅仅是不存在的 TS 类型，因此会报告错误。
汇总插件顺序很重要。要解决此特定问题，只需解除 typescript按顺序安装插件，至少在 babel 之前. TS 插件，如果先投入使用，将正确地从 JS 代码输出中删除 TS 类型。

更新
我知道另一个技巧，但这是一种变通方法。诀窍是使用 import type显式标记 DisplayHint 的语法作为TS类型。

import type { DisplayHint } from "@bestowinc/enroll-sdk-core"
import { otherNonTypeStuff } from "@bestowinc/enroll-sdk-core"

这个技巧并不令人满意，因为它要求您在需要 TS 类型的任何地方显式标记，并且您必须将具体的 JS 导出与 TS 类型的导出分开，如上所示。如果它是一次性的，这很好，但如果你有一个很大的代码库，那就非常乏味了。
我必须补充一下，我没想到原来的解决方案不起作用。我的猜测是这个模块 @bestowinc/enroll-sdk-core有点古怪。 (为什么还要将它们作为动态导入目标包含在配置中？)
这是一个带有 .d.ts 的 JS 模块注释，我可以说，但看起来它是一个私有(private)模块，我看不到代码，因此无法深入研究。我的猜测是 .d.ts声明被破坏，它与 JS 代码的真实导出不匹配。
无论如何，我希望这个技巧能解决你的问题。如果您需要我仔细观察，我将不得不请您设置一个最小的可重现示例。以目前的信息，我无能为力。