React Rollup：'name' 不是由 node_modules/ 导出的

Question

我正在尝试从我的组件中创建一个库/包。

技术栈是：React、Typescript... 和一堆其他依赖项。

我正在使用 Rollup，当我尝试构建包时出现以下错误：

[!] 错误：“DisplayHint”不是由 ../node_modules/@bestowinc/enroll-sdk-core/build/lib/question-common.js, 由 ../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 类型/接口，而不是一个导出的 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模块，我知道，但看起来它是一个私有模块，我看不到代码，因此无法深入。我的猜测是 .d.ts 声明被破坏了，它与真正的 JS 代码导出不匹配。

无论如何，我希望这个技巧可以解决您的问题。如果您需要我仔细观察，我将不得不请您设置一个最小的可重现示例。以目前的信息，我无能为力。