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

Question

我正在尝试从我的组件制作一个库/包。

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

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

[：] 错误。 '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 代码 output 中正确擦除 TS 类型。

Answer 2

我在链接库（使用 typescript 插件）时遇到了类似的问题，在我的情况下，解决方案是将链接库添加到配置“外部”属性。 但是 node_modules 无论如何都应该被视为外部的，所以不确定这是否适用