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 值。

\n

Rollup 本身是一个捆绑器，而不是 TS 语言分析器。它无法判断命名导出是具体的 JS 值还是仅仅是不存在的 TS 类型，因此报告错误。

\n

Rollup 插件顺序很重要。要解决这个特定问题，只需按顺序提升typescript插件即可，至少在 之前babel。TS 插件如果首先投入使用，将会正确地从 JS 代码输出中删除 TS 类型。

\n\n

更新

\n

我知道另一个技巧，但它\xe2\x80\x99是一个解决方法。技巧是使用import type语法显式标记DisplayHint为 TS 类型。

\n

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

\n

这个技巧并不令人满意，因为它要求您显式标记需要 TS 类型的所有位置，并且必须将具体的 JS 导出与 TS 类型分开，如上所示。如果它\xe2\x80\x99 是一次性的事情，那么这很好，但如果你有一个很大的代码库，它\xe2\x80\x99 会非常乏味。

\n

我必须补充一点，原始解决方案不起作用，这让我意想不到。我的猜测是这个模块@bestowinc/enroll-sdk-core有点奇怪。（为什么你将它们作为动态导入目标包含在配置中？）

\n

我可以看出，它\xe2\x80\x99是一个带.d.ts注释的JS模块，但看起来它\xe2\x80\x99是一个私有模块，我看不到代码，因此无法深入研究。我的猜测是.d.ts声明已损坏，它与 JS 代码的真实导出不匹配。

\n

不管怎样，我希望这个技巧能解决你的问题。如果您需要我仔细观察，我\xe2\x80\x99ll 必须要求您设置一个最小的可重现示例。根据当前信息，\xe2\x80\x99s 我无能为力。

\n