React Rollup：'name' 未由 node_modules/ 导出

Question

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

Tech-stack 是：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 type/interface，而不是导出的 JS 值。

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

Rollup 插件顺序很重要。要解决这个特定问题，只需按顺序提升 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 代码导出不匹配。

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

React Rollup：'name' 未由 node_modules/ 导出

React Rollup: 'name' is not exported by node_modules/

javascript

rollup

typescript

reactjs

webpack